Lately I was thinking about a nice way of implementing Twitter Bootstrap and maybe other vendor libraries into my private eShop project. My main problem was: how can I keep it extendable, but yet simple enough to switch parts of the implementation very easily? I came up with a design sketch which might be a little bit over the top, but hey! No risk, no fun!
Second, my theme definitely will be extended by another developer or a customer in the future, so it should have a very maintainable structure which is also easy to understand (Note to myself: add some documentation!). I also will need some kind of graduated abstraction so that I can easily refactor parts of my implementation.
Now try to imagine the whole thing as a nice Black Forest Cake with its specific layers. It must be possible to add more layers to the cake as well as adding multiple ingrediences within a layer. So with this picture in your mind, let’s crack on!
Add LESS Layers
Implementing Vendor Libraries
First, let’s add some vendor libraries, e. g. our frontend framework, Twitter Bootstrap. I also added a corresponding file to the libraries directory which contain styles to overwrite Bootstrap defaults. This way, it should be very easy to implement new versions of Bootstrap via Bower or something similar.
To continue with LESS Layers, we need some kind of base for our theme now. After implementing all vendor libraries, this base will contain stuff which will affect the global scope of our theme.
Starting the Theme Base
As a theme base I will definitely need some variables to declare font faces, grids and other stuff I want to store at a central place. Additionally, I want to declare some LESS Mixins. In the past, I saw some implementations with different files for utilities, helpers and so on, but I don’t see the necessity for this differentiation (if you do, please let me know down below in the comments!).
All these files will be imported BEFORE the vendor libraries so that the styles which overwrite e. g. Twitter Bootstrap can use that declarations.
Paint the Bigger Picture
Now here it comes! I splitted my theme related stuff into global styles and template specific stuff and imported it via a theme.less file (just for convenience purposes).
In my experience you will definitely run into trouble if you work with template related styles only, because that will cause doublettes in your compiled CSS as well as a lot of efford to refactor all that crap. And YES: this. is. crap! Don’t deny it …
The structure of my global styles is kind of copied from Twitter Bootstrap, so you will find a media.less (for images, videos, …) and a typography.less (font faces, lists, blockquotes etc.) file. The structure will be extended as needed.
Next, I added some template based files, meaning that these last styles are specifically only for that single piece/ page. As you can see in the theme.less file, I grouped all page related files so that I can overwrite partials in the main file for that specific page.
At least, you can add some kind of documentary comment on top of your style.less file, e. g. in the WordPress format or with some copyright hints and rules. You should beware of the different comment types in LESS, which is also the reason why I mostly two slashes (“// …”) for comments.
I know, that’s a lot of stuff to swallow. I hope that my explanations were clear, but if you have questions, don’t hesitate and write a comment! Constructive criticism and helpful tips are also very welcome. A .zip download of the shown structure will be provided later on. All files except style.less and theme.less will contain an explanatory comment only, so feel free to fill it with life by yourself.
So, I hope you enjoyed that “little” explanation of LESS Layers, and I am really looking forward for some feedback!
Edit: as promised, LESS Layers as a .zip-Archive. Feel free to download!