Oxwall Bootstrap – Oxwall Plugin

Adds bootstrap framework to your Oxwall site. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Some themes or plugin will require this.

Oxwall Bootstrap – Oxwall Plugin

Oxwall Bootstrap plugin lets you include the latest Twitter Bootstrap CSS and Javascript libraries in your Oxwall and Skadate site.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Some themes or plugin will require this.

This plugin is FREE and we have made it available for you to download from the Oxwall store.

What is Bootstrap?

It’s a CSS and Javascript framework that helps boost your site design and functionality quickly.

We have been using Bootstrap on most of our websites. We love it. So we thought we could find a way to quickly link the latest Bootstrap CSS and Javascript to all pages, regardless of the Oxwall theme or plugin.

Oxwall Bootstrap – Oxwall Plugin

With this plugin, now you can!

  • Works with any Oxwall Theme without ever editing Theme files and NO programming needed.
  • **Add your own custom CSS reset file**
  • **Option to add JavaScript to the [HEAD] (defaults to end of [BODY] as is good practice)**
  • and more..

Items marked with asterisks is either new or coming soon.

Why use Bootstrap?

It’s good practice to have a core, underlying CSS definition so that your website appears and acts consistently across all browsers as far as possible.

This plugin does this extremely well.

From Bootstrap:

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more

The Oxwall Bootstrap plugin lets you harness the power of Bootstrap from within your Oxwall site.

No more:

  • Manually editing your Oxwall themes & plugins
  • Downloading the Twitter Bootstrap libraries each time they’re updated
  • Manually writing HTML to make use of Bootstrap components.

The problem?

Oxwall themes stylesheet usually loads first, before plugin styles. This will cause bootstrap CSS to override theme CSS. So we take another approach and inject the CSS as the very FIRST items in the HTML HEAD section. This way, no other CSS interferes first so you can be sure these bootstrap file can be used as a foundation/reset CSS. Not interfering with your custom styles.

The CSS is only part of the solution. Bootstrap also have Javascript libraries to complement their Bootstrap CSS. These may also be added to your site with the option to add them to the HEAD of your site – by default they are added to the end of the BODY.

We also wanted the option to alternatively include YUI “reset.css” and “normalize.css”. These both form related roles to bootstrap, but are lighter.

You could look at the difference between the styles as:

  • reset.css – used to strip/remove the differences and reduce browser inconsistencies. It is typically generic and will not be any use alone. It is to be treated as a starting point for your styling.
  • normalize.css – aims to make built-in browser styling consistent across browsers and adds basic styles for modern expectations of certain elements. E.g. H1-6 will all appear bold.
  • bootstrap.css – is a level above normalize where it adds much more styling but retains consistency across modern browsers. It makes site and web application development much faster.

Why you need Oxwall Bootstrap Plugin

  • Keep your site automatically ‘up-to-date’ . We release a new updates as soon as new versions of the libraries are available.
  • Speed up your site for visitors – this plugin lets you deliver both the Twitter Bootstrap and JQuery Javascript libraries using Cloudflare’s high-speed CDNJS service.
  • Optimize for how YOU need it – Many Oxwall plugins don’t let you choose exactly how to use their components. With our plugins, you can always select features you want enabled, when you want them. E.g. You can disable minify library files, add Responsive CSS if you want, include Bootstrap Javascript if you want etc.
  • Optional CSS libraries – Not only can you use Bootstrap, you can also use Normalize CSS, and, even include a CSS file of YOUR choosing!

Oxwall Bootstrap References:

Bootstrap, from Twitter: http://getbootstrap.com/2.3.2/

Yahoo Reset CSS, YUI 2: http://developer.yahoo.com/yui/2/

Normalize CSS: http://necolas.github.com/normalize.css/