I was curious about your thoughts on workflow and best practices when customizing a bootstrap page. I really haven’t developed much in Bootstrap, but from what I can tell, the best way to customize Bootstrap CSS is to load a “custom.css” sheet after the bootstrap.css and override any rules you want to change, to prevent issues when upgrading bootstrap.
I’m trying to figure out how to mimic that approach while using Pinegrow.
I could change styles and properties straight in the doc and run a diff on the css files to create a standalone custom.css file.
I could create custom classes for changing properties, but I don’t think I would be able to figure out how to handle conflicting styles on elements.
The easiest and fastest way is to install a local copy of bootstap css file and call it say “custom.css” then add it after call to normal css file in html pages.
Then you can just make changes to that knowing that original will remain unchanged.
with experience you can either just delete all the bits not being changed or just create a blank custom.css and add changed bits into that.
@mandarin just re-create the bootstrap style the you want to change in the style.css file, no need to have a duplicate bootstrap style included. Because of how css works (cascade) the new rules created in style.css will either overwrite existing rules or append to them. Hope that makes sense.
Just a matter of personal preference really. I’ve been creating custom css files since i started working with Bootstrap.The joy of custom is that if necessary you can have a different one on each page if you want something different uniquely on that page. Have a look at this article which might help decide:
@mandarin I don’t think I explained myself properly. Pinegrow creates a style(s).css file by default which you can add style rules too. This is the same as creating your own custom.css file but why bother when PG already provides one. Same concept as the link you shared just a different name.
So good times… we’re both talking about the same thing
