Tips & tricks when using Bootstrap

Posted on

We’ve been using Bootstrap on all our Magento and WordPress responsive project for the last couple of years. Before that we used bootstrap to develop our iWeb FTP interface.

We’ve been through a lot of pain and learning while using bootstrap so here are a list of things we would tell anyone who is starting to use it.

Read the documentation first

Its big and it will take time but before you do anything read as much documentation as you can. Bootstrap can do lots of things without you writing a line of CSS or JavaScript. Check the documentation before writing your own versions to make sure something similar isn’t available in Bootstrap.

24 columns

Screen Shot 2014-06-09 at 11.35.25

By default bootstrap uses 12 columns. We’ve found this to be quite restrictive when designing. We have played around with lots of different column amounts and have settled with a 24. 24 columns allows for much greater flexibility while still retaining the ability to divide the layout equally into 2, 3, 4 or 6 columns easily.

Use smaller gutters

Bootstrap uses a gutter of 30 pixels out of the box. Our designs rarely have gaps between columns this big. 30 pixels is a huge amount of valuable screen space and when using several columns it can add up. We opt to reduce this to 10-15 pixels and even sometimes have no gutters. We review the design for every project and decide which fits best. There is no one fits all here and we always review it on a site by site basis.

Mobile first

Mobile first has become a common practice when building responsive websites. If you’ve not come across the term before it is definitely worth researching further. The basic premise is you build your website for mobile devices first and then add layers using media queries for larger screens.

When building sites using bootstrap it is essential you use a mobile first approach else you’ll end up writing lots of CSS that overrides each other. This leads to very bloated, complicated code that becomes very difficult for you and other developers to work with.

Consider using CSS preprocessors

sass-less

We’re currently in the process of introducing CSS preprocessors to our websites. Preprocessors allow additional leverage over CSS by providing new syntax. The advantages of using CSS preprocessors included nested syntax, ability to define variables, ability to define mixins, mathematical functions, operational functions such as the ability to lighten or darken and the joining of multiple files.

LESS and SASS are the two most popular CSS preprocessors. Both are very good but from our research we found many tend to prefer SASS because it is slightly more flexible.

Extend bootstrap with your own classes

Bootstrap is not a complete solution. When browsing the bootstrap website it can be easy to think it is because of the many different components available. It can be overwhelming just how much bootstrap can do out of the box, but it does not do everything. Sometimes people feel constrained to the limitations of bootstrap. Bootstrap is a framework to help you build your applications, not a complete solutions. Don’t be scared to add your own classes on top of bootstrap to adapt it to suit you. There maybe small things missing from core bootstrap that you use a lot. Just remember to try and keep your code tidy by using the naming conventions bootstrap have set and to comment your code for future developers.

Don’t be scared to override bootstrap

Bootstrap is a base for you to build your website or application but don’t worry if you need to override some of the bootstrap styling to suit you. The last thing anyone wants is every website on the internet to look like the Bootstrap default styling.

The only word of caution here is to check that what you are overriding cannot be done within the customisation page of bootstrap. The customisation page on bootstrap offers a nearly endless options to build a custom version of bootstrap for your site.

Consider using other icon packages

Screen Shot 2014-06-09 at 11.43.38

The bootstrap icon pack is fine but boring. Website design is all about the little details so don’t rely on the default icon pack too much. They’re fine for wireframing but consider finding something a little more unique.

A popular icon pack that works great with Bootstrap is FontAwesome. While this is a very common icon set it has a much wider selection including a nice social media set.

Think components and not pages

Change your mindset from creating HTML and CSS for each page to creating reusable components. This will make your code leaner, smaller and much more flexible. Reviewing all the designs before you start will help you see which components are used across several pages.

This is a very common method of designing and coding large websites. Companies and organisations such as Gov.UK, BBC and Channel 4 and Wikipedia have adopted this way of thinking. Creating a style guide full of components such as news widgets, galleries and text layouts ensures designs are consistent across pages and easy to put together in the future. For an example of a style guide see – https://www.gov.uk/design-principles.

Want to discuss a project?

Talk to our Magento experts on 01785 279920

Request a callback