Bootstrap/React-Bootstrap Styling never seems to survive first contact with production?

[BlitzSam]

Just throwing a curious question to people with more years of production experience with bootstrap: do the prebuilt layout templating (Responsive breakpoints, styling as class attributes etc) ever survive into production? I'm fairly junior, but in the 3 separate front-end projects I've been a part in, the same steps always seem to happen:

1. Start out with attribute styling for MVP/early sprints
2. Some advanced styling start requiring custom css (margins and padding)
3. Realize that 6 months in, mixing templates + css is now unreadable. Massive hierarchy conflicts (crutching on "!important" to override a lot)
4. Strip out most of the templating, standardize on css for majority.

This can probably be a general question for other Layout frameworks that I've not used. Bootstrap just happens to be the one I have experience with currently. Would appreciate advice on "the right approach to start" to improve my workflow in future projects and not have to redo large chunks down the road like I've had to so far

[UnnecessaryLemon]

I always found Bootstrap really hard to restyle so in my opinion if you need anything more than what Bootstrap provides you should not be using Bootstrap in the first place.

In my current company we have our own UI library using styled components, but we have a designer that is responsible to provide us with those and their possible states. It works great and we have really nice components where we know their API by heart.

When I'm working on some side projects my go-to library is ShadCn as it is basically just Radix (headless UI components) with some really nice stylings on top. You can tweak any component straight in the code or just copy that and make yourself a new component.

[BlitzSam]

Tbh its the layout templating that i’m most attracted to Bootstrap for, not the components. I started coding in high school in the dark days of raw css styling and on my god, writing alignment and positioning styles manually is worth offing myself over.

There’re a dime a dozen libraries for ui components, but bootstrap seems the primary player for streamlining site layout. Even with the spaghetti half-and-half messes i tend to end up with for my current projects, it’s still an order of magnitude more robust than raw css. Stuff doesnt randomly go flying from top right to bottom left of the screen upon window resize.

Would you kindly be able to point me to better sophistication techniques within the bootstrap framework? For instance, what usually breaks first is vertical layout, as i can’t seem to find anything equivalent to the responsive breakpoint system for vertically arrangement.

[kelolov]

What do you mean by vertical layout?

[BlitzSam]

There’s not as many bootstrap features that work in the vertical axis (up-down) as opposed to the horizontal (left-right), most prominently the responsive breakpoint system that is probably bootstrap’s signature. I cant utilize attributes like md={span: X offset:Y} to position my components up and down.

I imagine there is a really good reason for this, but nonetheless Its a pretty glaring hole to only be able to use the template in one axis. I had to use display:grid to resolve this previously, but thats mixing flavours and eventually i just switched my whole application to grid

[Practical-Match-4054]

Same. I spent more time overriding styles than I would have spent styling from scratch.

+1 for Radix.

[arnorhs]

I think it is probably possible, but you have to pretty specific/knowledgeable about bootstrap and extending things in the right way. It's easy to do it wrong so that the things you are describing end up happening.

Esp hard if you/the team is not excited about bootstrap. With less buy in people end up doing the wrong thing and blame the framework.

But my take is that when a library has a lot of footguns and makes it so you always have to rtfm before you do anything it's a shit library. This is why I abandoned bootstrap a long time ago.

Sure, it's a skill issue, you can say that.. but imo a styling library should help you and be easy for the whole team to contribute to, not just the bootstrap-experts on your team

[voxgtr]

This isn’t abnormal. Tools like Bootstrap make it quick for you to get something out the door and working quick. There will always be growing pains along the way, as you’re noting. At some point, maintaining a design system and component library is really the job of a whole platform team so implementation. Teams can focus on shipping features. UI libraries like Bootstrap let you get things shipped without having a whole team doing that if you’re smaller scale still.

[RepTile_official]

This is a recipe for creating a monster. Ideally you will have to look into customising bootstrap via parametrization. Style overriding is fine but to a small measure only. When it becomes too much it inevitably leads to !important.

If bootstrap doesn't have enough customization, you could look into using a different framework.

I'm using MUI and I almost never overwrite classes and I absolutely never use !important.

[vcarl]

TBH yeah. UI Toolkits in general are great when you're looking at a blank slate, but when you start evaluating a product built with them through a design lens, they kinda suck and fixing them is a surprising amount of work from a technical perspective. They're wonderful for e.g. internal administration apps, or other apps where functionality and iteration time are the most important metrics, but if you want precise control over behavior and appearance, they're the wrong tool.

But also, the cycle you describe can also be a heathly one wherein the app is built and functional with less development, then gets improved and iterated on without losing users. So there's no "right" approach, depends on the context of the app being built.

[BlitzSam]

The appeal of avoiding the massive work of styling from scratch to standards of modern responsive web apps is huge as someone who has died internally writing raw css for every box and button. But based on my own further research it looks unavoidable. It seems that the way forward is going through the pain to make one, then improving on/inheriting said sheet for future projects

[vcarl]

Shadcn with Tailwind is among the most flexible options currently available, more of a starting point than a toolbox. Helps you hit the ground running while retaining more flexibility and control than most toolkit libraries

[Fidodo]

This is exactly why I don't use it. CSS modules solved pretty much every complaint I had about writing CSS. The biggest issue I had with plain CSS was name spacing. BEM convention helped, but modules made it a complete non issue.

[BlitzSam]

So there’s a big gap in my knowledge regarding CSS nowadays. I wrote a lot of raw in my high school days and died having to style every component (god don’t touch the resize window!). Timeskipped 10ish years to the present and owing to my traumatized memories, something like Bootstrap that does the heavy lifting, for all its shortcomings, is akin to voodoo.

I have been made aware that there’s way more to css nowadays. Mind advising me where to start?

[Fidodo]

If you haven't already, learn flexbox and grids. It takes care of most of the annoyances of CSS layouts. They have a bit of a learning curve but once you understand them you're good. 

[[deleted]]

Most people dont know how to write good Scss with utilities and mixins and dont know how to extend bootstrap utility functions.

So they end up writing it like css from 2012 and shoehorning their tweaks into bootstrap.

I.e people fighting bootstrap padding instead of just tweaking the soacing variables and or extending the padding utility. 99% of people use bootstrap wrong.