All free and paid ThemeFlood RapidWeaver themes include support for the open source Bootstrap toolkit, by Twitter. ThemeFlood is proud to have been the very first RapidWeaver addon company to pioneer the use of Bootstrap in RapidWeaver. Bootstrap is a rival frontend framework to Zurb Foundation. We've generally found Bootstrap to be better suited for what we're using it for; backed by more online resources and lots of frequent updates. Without doubt, Bootstrap has been a major driving force in shaping the future web.
W3Schools have published a comprehensive free guide on using Bootstrap. Meanwhile Tiffany from udemy.com has got in contact with ThemeFlood and forwarded us a link to their free Bootstrap tutorial which you can view here. Both of these resources are very well written with up-to-date information, and are well worth adding to your Bootstrap reading list! Although you can readily copy and paste the Bootstrap code snippets as you see them, building a basic understanding of what Bootstrap actually is and how it works is of major advantage.
All this combined make Bootstrap absolutely ideal for use in RapidWeaver themes. Bootstrap is already built into all premium ThemeFlood themes and is working behind the scenes all the time. Although there are several other prominent web development frameworks available (many of which are just good), Bootstrap has the advantage of being immensely popular and has a strong future. Even if a web developer has never heard of RapidWeaver, chances are he or she has definitely heard of Bootstrap and has possibly used it too. So really there is nothing Bootstrap can do wrong and is an almost essential foundation of any modern website or app.
How Bootstrap works
It should be emphasised at this point that there is nothing else you need to download or install into the theme. Bootstrap is already waiting and available for you, should you choose to use it.
Once you have grasped the basics of how Bootstrap works and how you can use it to enhance your webpages, you can work towards more advanced things. For example, you can merge a Bootstrap Well with Thumbnails, a Grid and Buttons to create a beautiful product comparison table or charts. There is huge potential to mix things up and create some amazing page styles or layouts.
Advantages of using Bootstrap
Bootstrap goes wherever the sandwich file (project file) goes. So if you move your RapidWeaver sandwich file off onto another computer or send it to a colleague, all the Bootstrap code and content goes with it. No more dashing-around trying to install matching plugins, matching plugin versions, finding stacks or retrieving license codes! Bootstrap is always with you. Just ensure that the computers you open your RapidWeaver sandwich file on all have the same theme (and version) installed.
You can choose to use as much or as little as Bootstrap as you want. Some people choose to use none of it or just touch on the absolute basics (like buttons). Whereas others really max-out their projects with loads of Bootstrap modules. The choice is entirely yours; take what you want and leave the rest.
Almost everything you see listed on websites like Bootsnipp can also be incorporated into your projects 'as is'. There is a growing marketplace for free and paid Bootstrap addons, and many work perfectly with ThemeFlood RapidWeaver themes. Plus there are a growing number of help and support resources, covering setup and usage of Bootstrap; some links of which are provided a little later on in this chapter. However some snippets like the forms will require some sort of backend to handle form submissions and process them.
Some of the Bootstrap code snippets are ridiculously simple to use. Even if you have never used HTML code ever before in your life, some snippets like tags, labels and buttons are super-easy to use. Just drag and drop them into the page. Delete what you don't want and customise the rest. Change labels to reflect the text you want to display and alter URL's for things like links:
<a href="http://www.example.com/" class="btn btn-primary">Click Me!</a>
Some of the more complex code snippets do require a bit more work. For example the carousel image slider and accordion require you to delete or duplicate blocks of HTML code, based on how many slides or panels you want to display. You sometimes have to look for patterns in the code and work out what each chunk of code does. The code snippets are commented and indented to try and make things as easy as possible for you. But ultimately, knowledge of HTML code would be a clear advantage, if you're working with the more complicated code snippets and trying to do tricky stuff.
Bootstrap is frequently updated every couple of weeks. As you can imagine, trying to 'sync' theme updates to that sort of time frame would be pretty difficult, and also quite annoying for our theme users who would otherwise be bombarded with a constant flow of updates! Therefore we only tend to pull the major Bootstrap updates into themes, unless the theme is receiving an interim update anyway.
Sometimes Bootstrap might release an update (patch) to fix an obscure corner-case bug relating something in a distant version of a web browser. For that sort of Bootstrap update, we would probably tend to turn a blind eye and ignore it; as chances are it's not a problem exposed to many RapidWeaver users. But if a more significant Bootstrap update landed that provided new features or important browser compatibility improvements, then we definitely would work to get that merged into themes and rolled out as soon as possible.
An effort is made to keep the Bootstrap code snippets updated regularly, and try to match the snippets as close as possible to the version of Bootstrap being used in themes. Sometimes minor things in Bootstrap change or we find better ways of doing things. Therefore if you have recently updated a ThemeFlood theme or are about to embark on a new project, it's recommended that you re-download the snippets again and delete or overwrite any existing ones you already have installed in RapidWeaver. That way you can be assured you have the latest and greatest versions installed on your computer to work from. Just use any one of the Bootstrap code snippet download links on the ThemeFlood website. Updated code snippets do not effect code or content already in your pages.
Bootstrap code snippets
Bootstrap is already installed in the theme and aspects of it (like the CSS reset and grid system) are used by the theme permanently. If you have taken a look at the Twitter Bootstrap website, you may have acknowledged the wide variety of styling and special effects available. Just about every single one of these is available for you to use in your Bootstrap-enabled RapidWeaver theme. So suddenly a rather humble RapidWeaver theme traditionally used for simply styling pages takes on a whole new dimension and becomes as useful and as sophisticated as a plugin like Stacks or Blocks!
Most of these styling and layout effects you see showcased on the Bootstrap website are available for you to download and install into RapidWeaver as code snippets. You can find the download link for the 'bootstrap snippets pack' on most theme pages of the ThemeFlood website. Some people find the code snippets easier than copying code from the Bootstrap website; so the choice is entirely yours.
This snippet pack downloads as a .zip package, onto your computer. Opening the package reveals at least 40 code snippets for RapidWeaver. Double-clicking on these snippets installs them into RapidWeaver. The code snippets are then available for you to use in the RapidWeaver snippets window.
The Bootstrap code snippet names are all prepended with the word 'Bootstrap'. So even if you already have a large number of snippets installed in RapidWeaver, you will always be able to quickly filter and find the snippets you want. Unused or unwanted snippets can be easily deleted at any time. Manage Bootstrap code snippets like you currently do with other standard RapidWeaver code snippets.
Using the Bootstrap code snippets
If you have looked at the Bootstrap website and decided you want to test some aspects of Bootstrap in your project, then the free code snippets are often the best place to start. Once installed, simply drag-and-drop a Bootstrap code snippet from the RapidWeaver Snippets window, down into your page.
Bootstrap code snippets can work in almost any Styled Text or HTML Code region, in RapidWeaver. However if you're putting a code snippet in a Styled Text region, it's advisable to highlight the entire code snippet and select Ignore Formatting from the RapidWeaver Format menu (pictured below). This will instruct RapidWeaver to ignore any line or paragraph breaks in the code.
Most of the code snippets include a title and comments at the start. These comments tell you what that particular snippet does, plus any special instructions essential to follow. If you choose to, titles and comments can be safely deleted, once you have read them.
Sometimes the code snippets (like labels or buttons) might include multiple variations of elements in different styles or colours. If there is one there that you want to use, simply delete the others. Or copy the code for the one you want to use, and delete the entire snippet afterwards. Again, pick and choose whatever you want to use.
HTML Bootstrap code snippets should not be entered into places like the Custom Header or Prefix box in the RapidWeaver Page Inspector, as these input boxes are reserved for other code. Also you should bare in mind that plugins like Stacks apply overflow:hidden on all stack elements within a page, and this may present difficulties in getting some of the code snippets (like the popups or tooltips) to work correctly.
The first line calls jQuery. This can either be a version of jQuery hosted on Google API's or alternatively you can use the version of jQuery in the theme contents:
The picture below shows what this code would look like in the RapidWeaver Custom Header box, in the Page Inspector.
We use the jQuery (document).ready() event handler, so that the code only fires once the page is loaded. Then typically you can just follow the same instructions provided on the Bootstrap website and adjust any variables you like. The example above is taken from the image carousel snippet, and as you can see, this is where you would be able to customise the interval (slider speed) and make the slider pause on hover.
The role of CSS resets in Bootstrap
For a couple of versions now, Bootstrap has included the Normalize.css CSS reset. What does a reset do? The basic idea of a reset is to make web browsers render all elements more consistently and in line with modern standards. If you create a webpage that has no styling, you'll often find Times New Roman is still applied as the font face, text will be black, links will be blue and underlined, headings will be shown in different sizes with bold text, and lists will have built points etc. This is web browser styling being applied to the page. The problem with this styling is that different web browsers apply different styling. A prime example of this would be the difference in list item spacing and indentation between Safari and Firefox. So the purpose of a reset is to target and reset the styling of many common elements back to a more neutralised, baseline format. From then on, Bootstrap itself or the theme can redefine these styles. Everything should appear almost identical in different web browsers, from then on. There's a good article here which discusses the topic of CSS resets in much more detail.