collegeman / wordpress-bootstrap Goto Github PK

##Use Twitter Bootstrap in your WordPress plugins

This namespaced version of Twitter Bootstrap is specifically for crafting awesome, responsive UI for WordPress plugins. The toolkit gives you access to the entire Twitter Bootstrap package: base CSS, responsive scaffolding, buttons, tabs, forms, and javascript plugins, so that you can design with the widest possible palette of flexible UI.

To use the toolkit with your plugin:

Copy the css, js, and images folders from our bootstrap folder into your plugin directory.

Register the css and js files in your plugin init callback:

wp_register_style('boostrap_css', plugins_url('css/bootstrap.css', __FILE__));
wp_register_style('bootstrap_responsive_css', plugins_url('css/bootstrap-responsive.css', __FILE__));
wp_register_script('bootstrap_js', plugins_url('js/bootstrap.js', __FILE__));

Then, enqueue these files any time your UI depends on them:

wp_enqueue_style('bootstrap_css');
wp_enqueue_style('boosttrap_responsive_css');
wp_enqueue_script('bootstrap_js');

Wrap the UI you want to style with Twitter Bootstrap in a namespaced container, e.g.,

<div class="wp_bootstrap">
  <!-- Twitter Bootstrap styles are applied here -->
</div>

##How did we do this?

With the power of less. Twitter Bootstrap makes use of less in its stylesheets. We simply prefixed Twitter's styles with .wp_bootstrap.

##Build bootstrap for WordPress

We have included a makefile with convenience methods for working with the Bootstrap library.

• build - make Runs the LESS compiler to rebuild the /less files and compiles the docs pages. Requires lessc and uglify-js. Read more in Twitter's docs.

• watch - make watch This is a convenience method for watching just Less files and automatically building them whenever you save. Requires the Watchr gem.

##About the Developers

Twitter Bootstrap for WordPress was forged by Joey Blake for Fat Panda. But it wouldn't have been possible without the awesome work by the Twitter guys who made Twitter Bootstrap.