But, recently I have been using some extra functionality that marries well with Genesis and gives me a load more options as well. It is the Twitter Bootstrap Framework for creating “standard” web interfaces.
I have been using them together to get better-looking front-end layouts that don’t come as standard from Studiopress. I like having solid looking elements, such as forms, images, tables, buttons and the like, and Bootstrap is a great way to get them easily and quickly.
The two frameworks make good partners, work well together and are easy to implement.
Consistency and Simplicity
When it comes to consistency and ease of use, the Genesis and Bootstrap frameworks get it right.
Genesis is well known for its clean, simple and effective designs and has long been one of the leading website design frameworks online. It’s now all about ‘responsive‘ design – the ability for a website to be viewed properly on all different types of media, such as mobile, tablets, and desktops.
And the beauty of Bootstrap is that it is free to download and use!
Mobile First Philosophy – Prepare For The Future
What is mobile-first?
Mobile-first enables scaling for mobile devices before others via the responsive coding within so saving download times dramatically.
The future of the web is very much geared towards mobile technology and smaller portable devices. Therefore, it is vital to utilize a mobile strategy that is tried and tested and already works. If your business is not using, or preparing to use an effective mobile strategy, you can certainly expect a hasty demise into obscurity.
Adopting a mobile-first mentality makes us focus and prioritize our website designs due to the constraints of mobile devices. As new capabilities become available to mobile online, it allows us to be up-to-date and deliver innovative experiences to our users.
Bootstrap gives added value by supplying extra useful functionality, which offers a plethora of different layout styles and effects. This means less design effort on your part – and you don’t have to mess around with too much HTML and CSS.
Marrying the best of both these worlds will enable you to create fully responsive website layouts from the offset, so saving design time and increasing goal conversions.
Adding Bootstrap functionality to a WP theme using the Genesis Framework is fairly simple.
How To Add Bootstrap
Step 1: Grab the Compiled Bootstrap 3 Includes
There are a couple of ways to incorporate Bootstrap into your Genesis theme. Each one is fairly easy and suited to a different skill level and user requirement.
The first option is self-explanatory and my download of choice out of the three above. Just follow the instructions.
If you’re comfortable and have an understanding of basic HTML and CSS, which most modern marketers are, then you are technically finished. Now you can go ahead and start including your Bootstrap shortcodes into your posts and pages.
Or, perhaps you want an easier method – a plugin is good too!
Step 2: You’re Done, Unless You Would Prefer a Plugin…
There are a number of Bootstrap plugins available, so take your choice from those available!
On your WP dashboard, go to Plugins > Add New and search for ‘bootstrap shortcodes‘. Something like this will come up…
Here are two that I particularly like – one free, the other paid:
- Download Free Plugin – Bootstrap Shortcodes
Limited functionality, but great to get you going and learning about the benefits of shortcodes in your posts and pages.
- Download Paid Plugin – Easy Bootstrap Shortcode Pro
Easy Bootstrap Shortcode Pro is available from http://oscitasthemes.com at a cost of $15 for use on a single site (other options are available). This installs a simple interface into your WP Visual editor for quick selection and implementation.
Bootstrap Flexibility Enhances the Genesis Functionality
Advantages of adding Bootstrap to your Genesis powered website are:
- Extra flexibility, enabling you to come up with some awesome layouts and designs.
- Saving yourself a lot of time trying to fathom out HTML and CSS – it’s already done for you in small shortcode packages!
For mobile website design best practice, learn how Bootstrap can fill the responsive design gaps and help take your website to the next level – and Google loves ‘responsive’!
See if your website is mobile-friendly.
Bootstrap Overview and Examples
Bootstrap includes a fully responsive, mobile-first fluid grid system, which scales up to 12 columns as the device size increases. There are predefined classes for simple layout options, as well as some comprehensive mixins which generate more semantic layouts.
Let’s have a look at a few elements and how they are coded…
A Jumbotron is a large box which spans the screen. It’s useful for drawing attention to special content or other such important information.
Displayed as a gray box with rounded corners, it also enlarges the text font sizes inside it.
Tip: Inside a Jumbotron you can place almost any valid HTML, including other Bootstrap elements/classes.
<div> element with class
.jumbotron to create a jumbotron:
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
mobile-first projects on the web.
<!-- Standard button --> <button type="button" class="btn btn-default">Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">Danger</button> <!-- De-emphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">Link</button>
You can even have larger or smaller buttons. Just add
.btn-xs for extra sizes.
<p> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-default btn-lg">Large button</button> </p> <p> <button type="button" class="btn btn-primary">Default button</button> <button type="button" class="btn btn-default">Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-default btn-sm">Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">Extra small button</button> <button type="button" class="btn btn-default btn-xs">Extra small button</button> </p>
For basic styling, such as light padding and only horizontal dividers just add the base class
.table to any
|#||First Name||Last Name||Username|
|3||Larry the Bird|
<table class="table"> ... </table>
Head over to Bootstrap CSS tables to see more.
More Cool Bootstrap Stuff
Once you delve into the depths of Bootstrap CSS capabilities you’ll be amazed at what is on offer. It won’t take long for you to hooked into trying some of them out.
Here is a brief list of what’s in store:
- Grid System
If you are serious about implementing mobile website design best practice on your website – and you should be, I have given you reasons to take action.
You have seen how you can improve your ‘mobile-friendly’ status within Google by adopting a mobile-first attitude in your site design.
Use Google PageSpeed Insights to get started, and always think of the user experience when developing your website. Do this, and your visitors will benefit from the improved site download speed, while Google will undoubtedly boost your site’s ranking!
If you need help in understanding how to market your site or even want to comprehend how online marketing works, then I cannot recommend this training highly enough.
Most people do nothing and they are surprised when they fail at the one thing that matters to them -don’t be one of them!
Have you used Bootstrap with Genesis or any other theme before? If so, I’d like to know how you got on and whether you share my thoughts on the advantages of the partnership.
Keep me posted on your Bootstrap + WordPress + Genesis progress and jot down any experiences or difficulties in the comments section…
- Review of VideoScribe – Awesome Animated Video Software - February 13, 2017
- Best Amazon WordPress Plugin for eCommerce | WooZone - May 20, 2016
- How To Make Money By Blogging | A Useful Guide - April 8, 2016
- Best Animation Software for Beginners is Fun and Easy to Use! - March 29, 2016
- What Is FileZilla? | Popular FTP Client to Transfer Files - February 29, 2016
- How to Leverage Browser Caching Using .htaccess - February 21, 2016
- How To Back Up A Computer To An External Drive - December 30, 2015
- Powtoon Review: Free Presentation Software - December 15, 2015
- Whiteboard Animation Software is the Secret Ingredient | See Why! - August 16, 2015