These docs are still incomplete. If you have any questions, please email firstname.lastname@example.org
Kickoff is made with Less at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.
One of Twitter Bootstrap's creators wrote a quick blog post about this, summarized here:
- Bootstrap compiles faster ~6x faster with Less compared to Sass
- Less is more; we want to feel like we're writing CSS and making Kickoff approachable to all.
As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.
Visit the official website at http://lesscss.org to learn more
Compiling Kickoff with Less
Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how:
Crunch is a great looking LESS editor and compiler built on Adobe Air.
Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.
Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.
Kickoff's default LESS files
The four most important .less files in any Kickoff project are:
All roads lead to here.
Kickoff.less is the starting point for any kickoff project. Here you choose which other
.less files your project needs. The order of the imported files is the same order that the CSS is compiled to.
// at the start of the line or remove that line completely.
This file contains all your app/site's global variables. For example, you can set your background colours, fonts, base text size etc here & use the variable names throughout the rest of your project.
Mixins contains many useful items, but the most useful of which are the CSS3 mixins.
Here you add all your app-specific css/less.
Other useful LESS files
You can use the brilliant Gridlover to work out your font sizings & spacings
View the example page for a demo then view the source to understand how it works.