Git Product home page Git Product logo

jamedo-bootstrap-start-theme's Introduction

Jamedo's Bootstrap Start Theme (JBST)

Powerful theme framework that can be used as a standalone website builder or as a framework to create child themes for wordpress build on Twitter's Bootstrap 3. The original framework is written by Matt Jones of Rocket Farmer, LLC (former Skematik theme framework) It also has built in support for theme options, metaboxes, BuddyPress and eCommerce (WooCommerce, JigoShop and WPeCommerce).

Installation

Download the latest version as .zip file. Upload the .zip file to your Wordpress theme directory (wp-content/themes) or use Install theme function in your dashboard. Activate the theme in your dashboard ( Appearence > themes ).

Migration

  1. download from: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/archive/master.zip
  2. unzip this file in the wp-content/themes folder (this will create a folder with the name “jamedo-bootstrap-start-theme”)
  3. (search and) replace all “span*” classes in your theme files with “col(-sm|lg)-*”, see Grid (below) and also: http://stackoverflow.com/a/17890898/1596547. Or try Twitter's Bootstrap Migrator
  4. fix all other points (general issues should be send by email to [email protected], twitter @bassjobsen, or send as a pull request )

Read more

Grid

The most important changes in Twitter Bootstrap 3 will be the more mobile-first approaching and the grid. From now Twitter’s Bootstrap defines three grids: Tiny grid for Phones (<768px), Small grid for Tablets (&gt=;768px) and the Medium-large grid for Destkops (>=992px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 992 pixels screen width. So does the Small grid below 768 pixels and the tiny grid never stacks. (updated for Twitter's Bootstrap3 RC1). Also read: Twitter Bootstrap 3 breakpoints and grid

JBST use the Small grid by default. You can change this in the customizer. (Tiny, Small or Large). The large grid will stack below the 992px and be horizontal for desktop (and large tablets) while the Tiny grid never stacks.

More about the grid and examples on: http://getbootstrap.com/css/#grid

NOTE: Twitter's Bootstrap 3 RC2 intoduced a new grid class (col-xs-*). The class is used for mobile phone but only set (or not) the default behavior. col-xs-* will always stack (and never become horizontal).

Without Responsive features

The Tiny grid will never stack so use this if you don't want to use responsive features of Twitter's Bootstrap. There is no option to choose between repsonsive and non-responsive at the moment. Beside the Tiny grid setting you will need to add some custom css and an extra class to your templates, see: Bootstrap 3 - Turn off responsive completely.

Keep in mind this setting don't set the @grid-float-breakpoint. This (Less) setting will be used for the collapsing point of the navbar. The setting is also used for modals, forms and carousels. To (re)set the @grid-float-breakpoint you will have to compile your own copy of the Bootstrap CSS and use this (replace libary/assets/css/bootstrap.min.css). After the final release of TB3 we will add a non-responsive option for this to the customizer too.

To remove all responsive features consider to replace the Bootstrap CSS (replace libary/assets/css/bootstrap.min.css) with the one from https://github.com/bassjobsen/non-responsive-tb3. Also read: Compile Twitter’s Bootstrap 3 without responsive features.

Recommended Plugins

Support

We are always happy to help you. If you have any question regarding this code. Send us a message or contact us on twitter @JamedeoWebsites

Credits

Example

Screendump theme home

jamedo-bootstrap-start-theme's People

Contributors

bassjobsen avatar

Watchers

James Cloos avatar 王赛 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.