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?
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
