What’s on our mind?

Exsilio Solutions is proud to introduce our new blog! Not only is this forum completely integrated with all our social networks, but it is also 100% responsive. Now, you can take Exsilio with you on your phone, tablet, and desktop - redefine what you thought possible!

Starting with LESS CSS and Bootstrap – Part 2

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.

 

Bootstrap was the brain child of a bunch of developers at Twitter. Their goal was to create a common style and pattern baseline to be used as a starting point by all teams within the organization. Since its open source birth in 2011, it's grown to be a web development launching pad that includes a CSS library, glyphs, and baked JavaScript driven components. What's really fascinating is that all this was designed with mobile-first mentality. Cross-device, cross-platform, and responsiveness is Bootstrap's ethos. Needless to say, Bootstrap will make your web development much easier. Here is what you should know to get started.

 

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Implement component functionality with markup or JavaScript. Bootstrap comes with a set of commonly used UI components such as the modal window, tab menu, and carousel. These all require Bootstrap's JavaScript library and work out of the box just by assigning some CSS classes and attributes to the HTML elements. For example, I can have a button open a modal window with
    [crayon-5dd116e853f33952309381/]
    That's it. That gets you a working modal dialog box. Bootstrap's JavaScript will recognize the attributes and automatically wire up everything. But if you want more control, you have the option of implementing using JavaScript. This uses jQuery to achieve the same effect without having to assign CSS classes or other attributes to your DOM elements.
    [crayon-5dd116e853f4f648154190/]

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.

Any thoughts?



Loading more content...