Skip to content

Latest commit

 

History

History
188 lines (135 loc) · 13.4 KB

README.md

File metadata and controls

188 lines (135 loc) · 13.4 KB
Raw

JBST

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).

Demo of default install: http://demo.jbst.eu/ (some quick install notes: #34)

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 ).

Customization and LESS

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

Security issues

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

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: Extra small (xs) grid for Phones (<768px), Small/Medium grid for Tablets (&gt=;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.

Without Responsive features

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.

Internationalizing and Localizing

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/

Accessibility / a11y

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.

Menu levels

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.

Child themes

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.

JBST 1pxdeep Theme

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.

JBST Masonry Theme

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.

Twitter's Bootstrap Shortcodes

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:

Download the plugin and activate it. Troubles? Post an issue.

Right-To-Left (RTL)

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.

Responsive image sliders

JBST offers support for the plugin shown below. Slider plugin are not bundled you will have to install them your self.

Recommended and Supported Plugins

NB only install plugins you really need! And remove the ones you don't use.

Buy and Sell JBST Child themes

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.

Knowledge base

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

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.

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 @jbstthemes

Migration Skematik to JBST

Credits

Example

ScreenShot