In part 1, I covered a few important things you should know when starting with LESS CSS. This segment will cover Bootstrap. If you don’t have a decent understanding for LESS, I encourage you to spend some time with it because Bootstrap leverages the technology and this article will make much more sense.
- Start with a template. The best way to quickly get started with Bootstrap is to use one of their templates. The available templates has most of today's web layouts covered; from jumbotron, to blog, to dashboard. Using a template frees you from the initial fiddling you normally need to do when learning new frameworks. Then from there, take out what you don't need and implement what you do.
- Customize your Bootstrap. Even with internet bandwidth in abundance, you should avoid bloat when possible. Bootstrap's customize page allows you select only what you need. This page breaks Bootstrap into selectable components and plugins. It even shows you all the LESS variables being used and allows you to change the values so you don't have to dig around the CSS after download.
- Understand the grid system. By far one of the features you will use the most is the grid system. While it's generally accepted that you should not use HTML tables to lay out a page, using divs presents its own challenges… especially when you're just learning CSS. Bootstrap's grid system can help guide the way. There are a few rules to follow; like the rows must be nested inside a .container and the columns must be an immediate child of .row. Also keep in mind that Bootstrap takes care of all responsiveness duties for you so your grid will look great at any window size. As a side note, grid systems in general have been used by graphic designers for a very long time. It's a tried and true way to organize elements on the page while at the same time maintaining consistency throughout the site. So use it when possible.
- Override the number of columns and the gutter width of your grid. By default, Bootstrap's grid system has 12 columns and the gutters are 30px wide. I find that having only 12 columns is too restrictive and doesn't allow me the level of horizontal precision when placing elements on a page. That's why I usually change the @grid-columns variable to 24. Same with the gutters (the spacing between the columns). To me, the width of the gutters depends on the design and supported width of the layout. Change it as you see fit.
And there you have it, my top 5 things to know when you're starting out with Bootstrap. But this list just scrapes the surface. Both LESS and Bootstrap are rich with features and nuances. The more you use them, the more little gems you'll discover to help you with your development. So it's time to get back to work and create that awesome website. But now you can get it started a lot quicker with these two in your toolkit.