I have a semi-functional, but static HTML comp of a homepage created by a designer that I’m working with to start a project. The comp was created using Bootstrap, so the css is currently bootstrap.css plus style.css.
I want to take the style.css and get it into my app.less file fresh roots environment.
Is there an easy method, or maybe a Grunt plug-in to do this?
Sorry if this is a dumb question, this is all new to me. Thanks for any thoughts/advice.
CSS is valid LESS, so all you need to do is copy-paste the CSS into app.less and recompile. I would probably compartmentalise it though.
Many thanks, that worked just fine. Not exactly sure how you meant compartmentalize, though. By template? By selector? Something else?
Anyway, thanks again for the quick help. Much appreciated.
I think @Foxaii means you may want to group it into logical groups, (the way Bootstrap groups their LESS) or, at the very least, maintain the separation between the bootstrap.css and style.css you mentioned in your OP.
Thanks, that makes sense. I removed bootstrap.css completely figuring that was redundant with the bootstrap less files. I’ll see if I can further compartmentalize the style.css.
Sounds like a good plan. You’re correct, if the original Bootstrap CSS styles were not modified then you should not need to import its CSS and you can then rely on Roots’ built in Bootstrap components.
so am i correct to assume that there is no bootstrap.css file in the roots\assets\css path?>
I am new to Roots (loving it) but not sure about some simple stuff like this… Also what are the diffs between LESS and SASS and what would be the advantages to one over the other?
@theGuruWithin you are correct. By default, Grunt compiles all the Bootstrap LESS files along with your custom LESS file into one minified CSS file, main.min.css.
As for LESS vs SASS, that’s definitely not Roots related and has been addressed ad nauseam throughout the net. This might be a good overview. For more detailed info you should review the documentation for each.