Relax Breath of Solution.Community tech blog of Sameera Thilakasiri - Consultant UI, UX, RWD Specialist/ Interactive Designer

Just I wanted.. Do you?…

Introducing Bootswatch

Posted on November 3, 2012 | No Comments

What’s Bootstrap Again?

Bootstrap is a popular web framework made by some talented people at Twitter. It allows even the most time-constrained and design-impaired to create nice-looking sites.
As more and more sites adopt Bootstrap though, a growing issue is the uniformity between them. You might already recognize the signature black bar and blue buttons. Here are a few examples, taken from Built with Bootstrap.

So how do I use Bootswatch?

First, head over to Bootswatch and pick a swatch. Download the bootswatch.min.css file associated with it.
In Bootstrap’s CSS directory, you’ll find a stylesheet in full (bootstrap.css) and minified (bootstrap.min.css) forms. Rename them or move them to a safe place. Then drop in the new CSS file and check that your HTML points to it. If you ever change your mind, simply drop in another swatch or switch back to the original.

What if I want to extend Bootswatch?

Bootswatch is an open source project, and you’re welcome to modify the swatches further or create your own. If you’re interested, fork or follow the GitHub repository.

Each raw swatch consists of two LESS files. One is variables.less, which is included by default in Bootstrap and allows you to customize these settings. The other is a new file called bootswatch.less that introduces more extensive changes.

First, add these two files to Bootstrap’s own LESS files. You’ll be overwriting the default variables.less.

Next, open up bootstrap.less and just before the line “Utility classes” at the end, add @import “bootswatch.less”;. This command includes bootswatch.less when compiling the LESS files to CSS, and placing it near the end overrides earlier styles with the same CSS selector specificity.

Now you can start customizing variables.less and bootswatch.less. You are also free to modify the other LESS files, which in some cases will be easier, but your swatch may become brittle to future changes in Bootstrap itself. When you’re ready to test your code, compile to CSS and enjoy!

Helpful resources Create unique web design with Twitter Bootstrap ANY PLATFORM, ANY LANGUAGE, NO INSTALLATION.
Too many frameworks promise to make your life easy only to require you to install obscure dependencies. Kickstrap is ready out of the box. Just put Kickstrap on your server and begin making your website.

Sameera Thilakasiri By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.


Leave a Reply

You must be logged in to post a comment.