Hi. I have a page I’m working on now where some of the styling is done via Bootstrap classes, and some with CSS properties.
So, two questions:
Overall question: Am I right in thinking it’s perfectly safe/fine for me to convert all/most of the Bootstrap-based styling with the matching CSS rules (…which I obtain by examining the bootstrap style classes in the CSS panel, where it shows the CSS rules that make up the Bootstrap styling class)? I’m not losing any ‘under the hood’ compatibility or anything by replacing the Bootstrap styling class with the collection of CSS rules, right?
I’m in the middle of manually converting most of the Bootstrap styling classes into CSS rules, and one of them (d-flex) show the two CSS rules that it is made of, but one is crossed out. What’s up with that? I originally thought it meant that the crossed out CSS rule had already been applied elsewhere, but that doesn’t seem to be the case with this particular case.
not a bootstrap user, but you can migrate any the bs classes you are using to your own .css using the style editor so you can customize it or just not have to load a ginormous css library with every page load.
the crossed out rules and lower in the active style window means it’s being superseded by another rule with higher specificity. BOTH are active, just that the element you have selected is using the upper one, rather than the crossed out one.
this is a fantastic aid when encountering specificity wars in your cascade.
Hi, Drogidgoo… I’ve been converting manually so far, although I suspect there’s a more automated way… but it’s no big deal. I simply expand the collapsed Bootstrap classes in the CSS panel, note the rules inside, and then manually type them into my css sheet. It’s good to see how these things are constructed, anyway.
Ah! That’s interesting about the crossed out rules. Okay, so I’ll add them in. I was just concerned that my ‘manual CSS translation’ might not perform the same, and I get some glitch or compatibility issue. Part of me thinks I should just leave the Bootstrap classes alone, but on the other hand, I was wanting to clean up the HTML tags, as they were getting a bit cluttered with all the Bootstrap and CSS stylings. The CSS stuff is now all converted to CSS rules in the style sheet (…I previously was doing inline, both because I was tinkering first, and secondly because it’s just a simple, single landing page… but, still, it’s best to do it in the external style sheet.)
Still a bit concerned something will not be as fully compatible, compared to if I left it alone… But, I’m assuming the Bootstrap rules truly are just groups of CSS rules (as displayed in the CSS panel), and the two methods are fully interchangable.
there is a tutorial video of migrating BS rules to your css… it didn’t look as difficult as manually re-typing the rules… but then it was enough for me to want to avoid BS for what i was doing.
that’s a good question… i only vaguely remember it being about adding classes – because that’s what i wanted to learn how to do – and the video i found was one where they were working in BS and how you can easily copy only the BS css you need for your page without loading all the BS resources.
i don’t think it was any different than copying rules from one .css file to another (BS to your custom css) and then unconnecting the BS .css when you’re done in the manage stylesheets thingy.
i’ve tired twice now to find this video again, and not having any luck.
@mxs All I do is go to the CSS panel (2nd tab in Pinegrow in the properties section), and expand/open the collapsed Boostrap classes that are listed (do this for each element on your page). That will reveal the CSS rules that make up each Bootstrap class. I then just add those to the style definition for that element in the CSS file. I do this until I’ve covered all/most of the inline styling that appears in the html code. I usually keep the breakpoint-based styling (ex. Bootstrap column size), as I like using the Bootstrap panel’s breakpoint chart thing to set/view that, rather than read code.