Skip to content

Latest commit

 

History

History
107 lines (64 loc) · 6.38 KB

ch05.asciidoc

File metadata and controls

107 lines (64 loc) · 6.38 KB

Using Bootstrap

Github Project

Like a lot of great open source projects, the power of Bootstrap comes not just from the developers at the core of the project, but also from the developement community that supports it. (GitHub)[http://github.com] is a large code repository for projects, and at time of writing, Bootstrap is the most popular project. With over 42,000 stars, and over 10,000 forks, the project is bustling with activity. Like I mentioned in chapter 1, if you want to use Bootstrap, you can simply download the .zip archive from the site, or you can download using git.

For the unitiated, git is a free and open source version control system. Bootstrap, and a host of other projects manage everything using Github, which is an online code repository for git projects. To download the source for Bootstrap, run the following commands from the command line.

$ git clone https://github.com/twitter/bootstrap.git

Cloning the Rootstrap will give you a full download of all the files, not just the CSS/Javascript but also all of the documentation pages, and the LESS files for the dynamic Javascript elements.

If desired, using the LESS files, you can compile your own version of Bootstrap with the features, or customizations that you desire.

Customizing Bootstrap

You can download the source, or if you want to easily customize a few of the colors, sizing, or plugins, you can cater the Bootstrap to your needs via the [Bootstrap website](http://twitter.github.com/bootstrap/customize.html).

customize
Figure 1. Customize Page

When you use the customize page, you decide what components you need, you might choose to leave off all of the responsive features, or maybe leave off the button classes if they conflict with styles that you already have. Then you can opt out of any of the jQuery plugins. If you know that you aren’t going to be using the modals, or the carousel, you could leave it out of the build so that you a smaller file to request.

Lastly, you have the LESS variables that you can configure. Everything from column count, to typography colors can be modified here. When you have the options included that you can download a customized build of Bootstrap.

Using LESS

less popover
Figure 2. Using Bootstrap with LESS

There are a few different ways to use LESS with Bootstrap. The first, and perhaps the easiest is to use a preprocessor like Codekit, or SimpLess. Using these tools, you can set them up to watch certain files or folders. Then when you save any of those files, they build the master CSS files. In addition to using traditional CSS techiniques, you can use advanced features like mixins and functions to dynamically change the look of your site just by changing some variables.

LESS is a dyanic stylesheet language for writing CSS. It allows you to write variables, functions, and mixins for your CSS. The Bootstrap /less/ folder has a few files, but for setting globals, check the variables.less file and mixins.less.

In the variables.less file, you will find all of the global variables for Bootstrap. Let’s say you wanted to change the color of all of the links. You would simply update the following, update LESS to compile the CSS, and all of the links would change color.

/* Old Code */
@linkColor:			#08c;
@linkColorHover:	darken(@linkColor, 15%);

/* New Code */
@linkColor:			#7d00cc;
@linkColorHover:	darken(@linkColor, 15%);

Now, all links are changed to a purple color, and buttons, and buttons and other interface elements that call for @linkColor will be updated all over your site.

In the beginning, I was really hesitant to use LESS, after all, I have been writing CSS for a long time, and didn’t feel the need to change. The nesting alone is such a huge timesaver, I’m really glad to have added it to my workflow.

less
Figure 3. Codekit and the Bootstrap code base

Text Snippets

To rapidly develop Bootstrap sites, I like to use Sublime Text 2, and the Bootstrap snippets from DEVtellect on Github. This makes any componant easy as a keyboard shortcut to add to the page.

snippets
Figure 4. Bootstrap Snippets

To install the snippets, clone the git repository into your packages folder.

git clone [email protected]:devtellect/sublime-twitter-bootstrap-snippets.git

There are clippings for lots of popular IDEs/Text Editors.

Photoshop Templates

In addition to snippets, there have been a few Photoshop PSDs of all of the Bootstrap markup elements. My favorite comes from Repix design.

psd

Features:

  • Adjustable colors

  • Separate layers

  • Vector based

The PSD, is free, but the author requests that you pay with a tweet. Kind a new spin on the free as in free speech mantra of Open Source programming.

Themes

If you have a vanilla installation of Bootstrap, but want to add a bit of panache, there are few different ways to find free, and premium themes for Bootstrap. My two favorites are {Wrap}Bootstrap, and Bootswatch. Both have some great options, and make it easy to get a new style on your site.

Built with Bootstrap

If you are looking for even more inspiration, check out Built with Bootstrap, a Tumblr that features screen grabs of user-submitted Bootstrap sites. Fun way to see the varying ways that people are using Bootstrap.

Conclusion

So, to conclude, whatever the project, Bootstrap can fill the needs of just about any web project. It’s blend of responsive framework, extensive Javascript plugins and robust interface components make developing easy, fast, and feature rich. It has been great working with the project over the last year, and I look forward to the future development of the project. Cheers, kudos, and all of the accolades to Jacob Thornton and Mark Otto for creating a project that is so versatile, and fun to develop around.

Thanks from me,

Jake Spurlock