JBST is a powerful theme framework that can be used as a standalone website builder or as a framework to create child themes for WordPress. JBST build on the top of Twitter's Bootstrap 3 and is full customizable with LESS. Integrated customizer for easy responsive website building. Right-To-Left (RTL) support. It also has built in support for BuddyPress, BBpress and eCommerce (WooCommerce, JigoShop and WPeCommerce).
- Twitter's Bootstrap 3 ready
- E-Commerce ( we recommend WooCommerce )
- Buddy Press
- BBPress
Demo of default install: http://demo.jbst.eu/ (some quick install notes: #34)
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 ).
JBST has a build in customizer and LESS editor.
Also read: Integrate LESS in JBST WordPress Theme.
LESS implementation build in with WP LESS to CSS which relies on less.php.
Add your mixins, variables and function with the editor Appearance > WP LESS to CSS. Check the plugin documentation for advanched options.
Optional add LESS code to library/assets/less/custom.less (less/custom.less for child themes) or wpless2css/wpless2css.less (backup when updating the theme!).
Modify the build in Twitter's Boostrap Code: Don't edit wpless2css/bootstrap/variables.less but overwrite the variables in the editor mentioned above.
Note: Edit and add LESS code with the editor, unless you understand what you're doing. Modifications with the editor are saved in the database and not over written or lost when you update your theme. Changing less/custom.less in your child theme will also be save. Cause CSS is valid LESS you could also add CSS code to the LESS editor.
Use the built-in compiler to:
- set any Bootstrap variable or use Bootstrap's mixins:
-
@navbar-default-color: blue; - create a custom button:
.btn-custom { .button-variant(white; red; blue); } - set any built-in LESS variable: for example
@footer_bg_color: black;sets the background color of the footer to black - use built-in mixins: - add a custom font:
.include-custom-font(@family: arial,@font-path, @path: @custom-font-dir, @weight: normal, @style: normal);
Other notes and examples Customization and LESS
The theme will ask for your FTP credentials when saving your LESS settings or using the customizer. Sending your credentials over a non-secure (http) connection will be a bad idea always. Add your credentials to your wp-config.php to make this file saving easy and secure. Do not forget to chmod your wp-config.php to 0600. More about all this: Using wp_filesystem in Plugins to store customizer settings
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: Extra small (xs) grid for Phones (<768px), Small/Medium grid for Tablets (>=;768px), the Medium grid for Laptops (>=992px) and the Large grid for Desktops. The row class prefixes for these grid are “.col-xs”, “.col-sm-”,“.col-md-“ and “.col-lg-”. The Large grid will stacks below 1200px pixels screen width. So does the Medium grid below 992px pixels and the small below 768px. The extra small 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 phones and col-xs-* will never stack). The new grid classes are add to the settings now.
For a non responsive website set the default grid in the customizer to "Extra Small" and set the Max container width.
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.
The default language for the theme is English (US). Translation into Dutch and Frensh has been started Help us Translate Localization workflow is managed on http://poeditor.com/
JBST is a11y ready by default. When building your site by changing the settings or creating a child theme a11y checks can be broken. Color settings should check for contrast. Also other installed plugins or settings can influence the accessibility of your site. JBST helps you to meet the a11y standard but you also have to check your site after changing it. Condsider to install WP Accessibility and check your color settings on GrayBit. Also see Bootstrap a11y theme.
After installing the number of possible submenu levels is set to 1. Bootstrap 3 support only 1 sub level for navigation. See also: issue #20. JBST implements infinite submenu levels, set in the customizer.
Use JBST to create child themes for WordPress build on Twitter's Bootstrap 3. We provide you a Boilerplate JBST Child Theme and an example of a Webshop based on Twitter Bootstrap Webshop Template with vertical menu. Download this Demo Webshop E-commerce Template or try the Demo.
Edit less/custom.less to add or modify your LESS/CSS code. Or use the LESS editor. You have to use the save function of the LESS editor after changing less/custom.less too. The save function generate new CSS from your LESS files.
Complete list of action hooks, filters, built-in Less variables and mixins, and predefined settings, and Download the Instruction Guide for building Child Themes with JBST.
Relative color design is designing by relative visual weight, or designing with color schemes. 1pxdeep brings that concept to Bootstrap and the JBST 1pxdeep Theme brings it to WordPress. Also JBST 1pxdeep Theme is a child theme of JBST.
Build your homepage like a mason fitting stones in a wall: JBST Masonry Theme. Based on Masonry, a JavaScript grid layout library and Boostrap 3.
JBST doesn't integrate Twitter's Bootstrap Shortcodes since version 1.1. In stead of integration we offer support for plugins which provide this functionality. We support these plugins:
- Twitter's Bootstrap Shortcodes Ultimate Add-on, recommended!
- Easy Bootstrap Shortcode
- Bootstrap WP Plugin
Download the plugin and activate it. Troubles? Post an issue.
Text direction is automatic detected based on the language by WordPress. If you use a RTL language or switch to one you will need to recompile the CSS with the build in LESS compiler.
JBST offers support for the plugin shown below. Slider plugin are not bundled you will have to install them your self.
- Twitter Bootstrap Slider,recommended!
- Royal Slider
- Flex Slider
- WordPress SEO Plugin
- WooCommerce, with WooCommerce Twitter's Bootstrap Plugin
- Stimulate correct headings Plugin for accessibility and seo
- WP Defer Loading, Defer loading javascript for WordPress, see: https://developers.google.com/speed/docs/insights/BlockingJS
- Twitter Bootstrap Galleries Plugin, Wraps the content of a WordPress media gallery in a Twitter's Bootstrap grid. And make it full responsive.
- Twitter Bootstrap Slider responsive image slide show (slider component)
- Drag & Drop Featured Image Drag & Drop Featured Image is a plugin that replaces the default "Set featured image" metabox with a drop zone for faster uploads.
- Options Framework A framework for building theme options.
- WP Retina 2x Make your website look beautiful and smooth on Retina (high-DPI) displays such as the MacBook Pro Retina and the iPad.
- WP Accessibility WP Accessibility provides fixes for common accessibility issues in your WordPress site.
- WP Code Prettify This plugin enable syntax highlighting of code snippets in your post using Google Code Prettify.
- JBST FitVids for WordPress This plugin makes videos responsive using the FitVids jQuery plugin on WordPress.
NB only install plugins you really need! And remove the ones you don't use.
In 2014 we opened a marketplace for JBST child themes. Take a look if you don't want to build a child theme you self and still want to profit from all the JBST features. Are you theme developer? We will happy to sell your theme too! Send us a message
Designers, we could convert psd to JBST for you, so you can sell your designs too.
Find answers to faq and other tips and tricks in our Knowledge base. You will find answers and tips for s.a. LightBox2 integration and using JBST with a Jumbotron.
JBST Expo is a project to showcase the absolute best projects built on JBST.
The JBST Expo is all hosted on GitHub, meaning recommending new sites is as easy as opening a new issue. It also keeps the primary JBST repo focused on code and documentation, and not dozens of extraneous images.
We are always happy to help you. If you have any question regarding this code. Send us a message or contact us on twitter @jbstthemes
- Matt Jones of Rocket Farmer
- WordPress
- Bootstrap
- jQuery
- Less.js
- less.php
- Options Framework
- Bootstrap a11y theme, Make web accessibility (a11y) easier for Bootstrap Developers
