New platform enhancement to make a bootstrap 3 less workflow easier.
Inspired by two posts by Erik Flowers, detailing the Bootstrap grid and introducing a less workflow, we've added an import enhancement to our less compile function and also created a simple template that can be easily used as the base if you are interested in following Erik's examples.
Currently our css files has a less mode, when this is switched on, less code can be entered and is automatically compiled to css on save. This give a transparent user experience with using less, there is no off line set up or build script, just edit, save and go.
Few weeks ago we also added a less @import function. When using the @import instruction in a less enabled css file, the system will automatically look in the less virtual folder for the file and bring it in as part of the compile.
This week we've also added bootstrap 3.2.0 and font awesome 4.2.0 less files to the core app files and made available to all projects. To import them into your less file simply do this (you do not have to download and install them yourself, these files are available to all during compilation)
bootzee.com beta
@import "bootstrap-3.2.0/bootstrap.less";
@import "font-awesome-4.2.0/font-awesome.less";To demonstrate this functionality and also to provide a simple starter for everyone to try Erik's examples, we've created a new template. The template has a style.css that has less mode switched on, the contents of which is simply...
@import "bootstrap-3.2.0/bootstrap.less";
@import "font-awesome-4.2.0/font-awesome.less";
@import "mixins.less";
@import "main.less";When saving, this will automatically compile a style.css that has bootstrap and font awesome built in, there is no need to import those files separately in your html.
For the example we've added a mixins.less we found on Github by dalou, it gives just enough basic example mixins you'd need to get you started. The main.less is where you'd add your own code, in the example we have this
h1 {
font-size: 22px;
margin: bottom 10px;
@media (min-width:@screen-tablet) {
font-size: 40px;
margin-bottom: 20px;
}
}
.jumbotron p {
margin-bottom: 15px;
font-size: 14px;
font-weight: 200;
@media (min-width:@screen-tablet) {
font-size: 21px;
}
}
.feature-box {
.border-radius(10px);
height: 200px;
border: 3px solid;
padding: 10px;
}It is a contrived example as all we've done is used the @screen-tablet variable from bootstrap to set a smaller font for small screens and used the border-radius mixin from mixins.less in the feature-box, but it gives an idea of what is possible. Following Erik's example, you could extend it by adding a less file per page to hold page specific styles and keeping main.less for site wide styles. Give it a try on our platform...
Preview Template Try now, it's Free!
bootzee.com is designed to be a free and easy to use on-line editor, we've added number of tools to make building a website using hand cranked code as easy as possible.