FuelUX a library that extends Twitter Bootstrap

October 23, 2012 . Coding . Comments
Tags: fuelux jquery bootstrap requirejs grunt amd

Tweet

Preface

Twitter Bootstrap has helped me as a middle tier backend developer to create styled responsive websites and proof of concept apps with super ease. Recently a team of developers where I work have extended Twitter Bootstrap with more controls, grunt, AMD support, and have open sourced it for others to contribute. This post will show you how easy it was to switch to FuelUX which gives me all that Twitter Bootstrap has and some more controls.

Hooking up FuelUX

This blog was using Twitter Bootstrap natively and it still is using Bootstrap (because Bootstrap rocks) just in an extended fashion.

First add the class="fuelux" in the HTML root tag.

<!DOCTYPE html>
<html class="fuelux" lang="en">

Second change the link and script references from bootstrap to the fuelux. Since FuelUX extends Bootstrap you shouldn't have any issues and along with it get more controls. I could have also choosen to use the actual css files by downloading them from the GitHub Repo dist/css folder.

<link href="http://fuelux.exacttargetapps.com/fuelux/2.0/css/fuelux.css" rel="stylesheet" />

<link href="http://fuelux.exacttargetapps.com/fuelux/2.0/css/fuelux-responsive.css" rel="stylesheet" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

<script src="http://fuelux.exacttargetapps.com/fuelux/2.0/loader.min.js" type="text/javascript"></script>

That is it! Your site still has the Bootstrap markup and some more controls.

Additional Themes

Themes were baked in as well, if you want to see one of the themes .. alter the link and script resource links as follows:

<link href="http://fuelux.exacttargetapps.com/fuelux-imh/2.0/css/fuelux.css" rel="stylesheet" />

<link href="http://fuelux.exacttargetapps.com/fuelux-imh/2.0/css/fuelux-responsive.css" rel="stylesheet" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

<script src="http://fuelux.exacttargetapps.com/fuelux-imh/2.0/loader.min.js" type="text/javascript"></script>

Sample Starter Page

For those that aren't altering their existing website or application, you can use the sample web page below to get going with FuelUX right away.

Conclusion

It is clear that FuelUX will grow with Bootstrap and also with support of new controls along the way. It looks super polished, nicely done! I can't wait to watch this grow and see what others contribute!

See FuelUX a library that extends Twitter Bootstrap on Hacker News Hacker News link

Comments Section

Feel free to comment on the post but keep it clean and on topic.