The demand for responsive and adaptive website design is increasing by the minute. Every day, more people are using their phones to shop, surf the web, do their banking, and so much more. In April, Google started boosting search results for websites that are mobile friendly. This was dubbed “Mobilegeddon”, because thousands of companies, including some big corporations, do not have responsive web sites. If you need to upgrade your website in order to make it mobile friendly, you are not alone.
Thankfully, there are a number of responsive web design frameworks available. If you’re using a CMS, like WordPress or Joomla, there are countless themes and templates that are built to be responsive, right out of the box. But for the purposes of this article, we’re going to focus a bit more on CSS grid frameworks.
For this entry, we’ll be focusing on Twitter Bootstrap. Bootstrap is easy to learn, highly customization, and fairly lightweight. Like many grid frameworks, the heart of Bootstrap is a CSS column class system. You set a div container, either at full width, or a set width like 940px. Once you’re working within the container, you start creating the div columns. At this point, each column div is set with a range of up to twelve columns, across four screen sizes. The screen sizes for columns are large, medium, small, and extra small. At each size, you set how many columns, out of twelve, you want the div to occupy. So a div that took up twelve columns, across all four screen sizes, would look like this:
<div class=”col-lg-12 col-md-12 col-sm-12 col-xs-12″>content</div>
If you wanted the div above to only take up 9 columns once it got to mobile phone, you would change the xs class, like so:
<div class=”col-lg-12 col-md-12 col-sm-12 col-xs-9″>content</div>
And if you wanted two equal columns side by side, you would do it like this:
<div class=”col-lg-6 col-md-6 col-sm-6 col-xs-6″>content left</div>
<div class=”col-lg-6 col-md-6 col-sm-6 col-xs-6″>content right</div>
This is just a small sample of what you can do with Bootstrap, once you have the column sizes down, there are a number of bells and whistles you can fit within the grid. These include a banner with a call to action, accordion tabs, drop down menus, and more. All of these components have default styles that look pretty professional, and can also easily be customized to your liking if you know CSS.
For more information on Bootstrap, visit their site by clicking here.