How should a boilerplate LESS framework be customised?

Question

I'm building a website using the skeleton framework, using a fork that compiles from LESS.

What is the correct approach to customising the styles without losing the underlying scaffolding provided by skeleton? I understand that I can change variables such as @font-color, but there are no variables for font-size and certain elements need custom margins and padding.

Should I edit the LESS file or create a separate css file?

Answer 1

The fork you mentioned ships with a single file (less/skeleton.less) which contains all required Less code.

You could create a new file (for instance project.less) which import the less/skeleton.less.

project.less:

@import "less/skeleton";

Now you can override all variable declared in less/skeleton.less after the import directive.

@import "less/skeleton";
@font-color: blue;

Because of Less uses lazy loading and the last declaration wins rule for variables you can override a variable by putting the definition afterwards, see also: http://lesscss.org/features/#variables-feature-lazy-loading.

but there are no variables for font-size and certain elements need custom >margins and padding.

You should override these properties per selector, for stance:

button, .button {
height: 48px; //overide button's height
}

or create a new class with the extend feature

.smallbutton {
&:extend(.button all);
height: 16px;
}

The Less code also contains some Media Queries. You should use these media queries in your code:

@media (min-width: @bp-larger-than-mobile) { 
.smallbutton {
&:extend(.button all);
height: 16px;
}
}

In stead of importing the Less code you can also use the Less Skeleton plugin. After installing this plugin (npm install less-plugin-skeleton) you can compile your code as above without the @import directive.

lessc project.less --skeleton