Base-LESS

April 24, 2013

After some careful debate I have decided to drop LESS from Base, my front-end template. The main reasons are:-

I never use it.
Most people who do use Base either use SASS or standard CSS.
Now that I am familiar both I want to focus my attention on one CSS extension.
SASS is better in my opinion.

So firstly I want to say sorry to anyone that has been using my template with LESS. The standard CSS will always be present so no need to worry about that. But the LESS, well, it’s gone.

It want to start thinking about my code in a modular way from the very beginning to ensure larger projects are much cleaner and well structured and smaller/simpler projects can easily be stripped down. To help me achieve this I have added several SASS @import modules. I don’t want to go over-board with this and my main aim (as always) is to create a nice base that can be expanded, but at the same time is adequate to start with.

All my CSS is still based around the _style.scss file. Here’s a little bit of code to show you how these imports work. The modules are simply imported into my _style.scss file. If any of these modules aren’t needed then they can simply be deleted. If more are require then stick some more in. It’s pretty easy to see the benefits.

/*********************************************
- 3.0 -  SASS
*********************************************/

/* - 3.1. - Colours, Backgrounds, Gradients
------------------------------------------ */

@import "imports/colours-gradients";

/* - 3.2. - Mixins
------------------------------------------ */

@import "imports/mixins";

Modules

So what modules have I included? Have a read below.

Base-elements – Headers, lists, blockquotes, paragraphs, img
Colours-gradients – List of site colours, gradients
Font-face – Includes @font face code
Forms – Form styles
Links – Hyperlinks, buttons, header links
Mixins – Includes all SASS mixins

I use Codekit to compile my SASS code, each time I save one of these import files it automatically sticks the code into the _style.scss file.

My initial thoughs and maybe yours are that this approach is overkill. Too many folders and file names, surely it’s easier to just have it in one file? For smaller projects I would agree yes, but imagine a huge project with 10k lines of code, creating separate modules will make things much neater and convenient.

Another benefit would be the fact that styles can be reused very easily across a range of stylesheets for a project or even on other projects.

Thoughts

I don’t expect this transition to be problem free. No doubt I will run into issues along the way but trial and error is most defiantly the best way to learn. One issue that springs to mind is the use of nesting in these modules. It will need to be kept to an absolute minimal to ensure the styles can be reused anywhere.

Base has had a complete new re-design. Much simpler and easy to manage, it also looks decent! You can view base online here and on Github here.

Another redesign