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 while learning so here some tips and tricks for using bootstrap:
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.
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 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.
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.
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.
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.
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.
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.