Migrate your (former) Skematik theme framework to Twitter’s Bootstrap 3: Instructions for theme developers

At Jamedo Websites we work with the Skematik Theme(work) to build responsive websites. Unfortunately the website was down for a while and Skematik use Twitters Bootstrap 2 only. Cause we need a new version of Skematik i start to migrate it to TB3. You will find this new version on: https://github.com/bassjobsen/jamedo-bootstrap-start-theme.

To use the theme work to build your own child theme use the instruction below:

  1. download from: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/archive/master.zip
  2. copy the content of this .zip to the folder skematik in the wp-content/themes folder (the zip file creates the folder “https://github.com/bassjobsen/jamedo-bootstrap-start-theme/archive/master.zip” you have to rename this to “skematik” )
  3. (search and) replace all “span*” classes in your theme files with “col-lg-*”, see also: http://stackoverflow.com/a/17890898/1596547
  4.  fix all other points (general issues should be send by email to bass@w3masters.nl or send as a pull request to https://github.com/bassjobsen/jamedo-bootstrap-start-theme )

Basic setup for your child themes:

Read: http://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme. So basically create style.css in your child theme folder. Start this file with: @import url("../skematik/style.css");

Learn more about Bootstrap 3

Bootstrap 3 don’t have a separate responsive CSS file any more.

From now Twitter’s Bootstrap defines three grids: Tiny grid for Phones (<480px), Small grid for Tablets (<768px) and the Medium-large grid for Desktops (>768px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 768 pixels screen width. So does the Small grid below 480 pixels and the tiny grid never stacks.

For this reason the “span*” classes in your theme files are replaced with “col-lg-*” in step 3 above. With “col-lg-*” the grid become horizontal above a screen width of 992px (desktop). Below this screen width elements will stack. To start the stacking at 767px use the “col-sm-*” prefixes instead of “.col-lg-”. Read Twitter Bootstrap 3 breakpoints and grid for more information.

Read Bootstrap your (designer’s) mind  also and ask your designer to deliver different designs for screen widths (from low to high). This will help you to choose the right grid settings.

For other changes read: Migrate your templates from Twitter Bootstrap 2.x to Twitter Bootstrap 3 and http://bootply.com/bootstrap-3-migration-guide.

You will find the official documentation of Twitter’s Bootstrap 3 now on: http://getbootstrap.com/.

Leave a Reply

(will not be published)