Theming with Twitter Bootstrap version 3 - Part 2
In the first article, I explained some of the basics of creating a Twitter Bootstrap 3 (BS3) based theme for Exponent. In this article I'll attempt to alleviate some of the myths or quirks associated with BS3 that may be delaying your move to use this versatile framework for your next custom theme.
Myth #1 - BS3 themes are limited to a one page design - NOT TRUE. While many of the examples found across the internet are limited to one (possibly) long page with a menu of relative links on the page, you can still use the multi-page approach Exponent has used in the past.
Myth #2 - BS3 themes must have the fixed menu (navbar) always displayed at the top of each window - NOT TRUE. Again, while many examples on the internet follow this approach, our sample BS3 theme (bootstrap3theme) provides the option of 'static top' (stays at the top of the content and will scroll out of view), 'fixed bottom' (always displayed at the bottom of the window), or 'fixed top' (always displayed at the top of the window).
Additionally, you may place a banner above the navbar using one of the techniques found here. You are not limited to generic sort of layout. Some example non-Exponent themes can be found at:
Quirk #1 - BS3 navbars are limited to children only (depth of two) and no grandchildren (depth of three or more) - While we support multi-level navbars of any depth, this will NOT work with touch devices (grandchildren are only displayed on 'hover'), nor with the 'collapsed' menu provided on small devices (or small width browser windows)
Quirk #2 - Not everything is 'touch' enabled - Though we're working inside Exponent to alleviate (work-around) this, some elements like the 'carousel' are not 'touch' enabled, in addition to the aforementioned multi-level menus.
Quirk #3 - The site looks slightly different on different sized devices or different browser widths - This is actually a feature, NOT a problem. With BS3 you won't need to develop a complex stylesheet based on media queries, nor have separate mobile subthemes (a feature of Exponent documented here). Since BS3 is 'mobile first' it makes it simpler to desing a web site style and layout which works equally well on large (desktop) or small (smartphone) displays.
Hopefully, this has alleviated some of your fears in pressing forward into the Bootstrap era. I do still plan to write another article/tutorial on converting an open-source/free BS3 theme (from one of the sites listed above) into an Exponent theme, which may be a greater incentive to take the plunge.