This article is reference to self, but I hope it may help others who want to dive in to Twitter Bootstrap and LESS. I did not want to write everything from scratch, so, I forked Twitter Bootstrap and host the changes to forked repository
What is Twitter Bootstrap
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
What is Less CSS
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.
What does customization look like.
This site is live example of modified Twitter Bootstrap. Another sample page is at http://ch4nd4n.github.com/docs/customized-template.html. As mentioned forked source is Twitter Bootstrap
Extending Twitter Bootstrap has documentation about dependency to install before you get started. You could either clone Twitter Bootstrap on github or fork and make your changes. Forking Git repository has advantage, you maintain versions of your changes. In future if you make any change that is worth to be shared you send a pull request to Twitter Bootstrap repo.
npm(node package manager) should be installed.
make will build the stuff for you.
To quickly compile changes to CSS you would issue command something like
lessc less/bootstrap.less > DESTINATION/bootstrap.css
--compress to minify the file.
Some of the primary files that I have customized
- widget.less - this is the primary less file that contains the crux of the widget CSS.
- overrides.less - Overrides the
default values of twitter bootstrap. For example
- bootstrap.less -
override.lessin to this file
Work in progress
You could hack around above three files to get an understanding of how things work. Will update this page soon.