I Love Bootstrap

Fancyboot

Customizing Bootstrap the easy way. Made for Bootstrap lovers.

Version 1.0.0

What to expect

  • Color picker to conveniently chose and preview colors.
  • See realtime preview as you customize each variable.
  • Extra variables which are not there in the official customization page.

What to expect in future

  • Exhaustive coverage of all customizable variables available.
  • Save your customizations.
  • Share your customization and access others'.
  • Ability to use either hexadecimal or {less} variables.
  • Better user interface. I'm working on one at present. I hope I get enough free time to finish it.

Points to note

  • This version of Fancyboot is designed for Bootstrap Ver. 2.2.1
  • The current version was developed to work fine only on Google Chrome (for now). Some effects might not show correctly in the preview on other browsers.
  • Not all effects will be shown in the preview. But don't worry, the final compiled bootstrap css will be perfect as originally intended by Bootstrap.
  • Some fields are left without the color picker intentionally as you might want to use {less} variables.

Credits

Thanks to the bootstrap team, @mdo and @fat for such a wonderful framework.

Please visit the official Bootstrap website at http://twitter.github.com/bootstrap/ for full documentations and downloads.

The awesome color picker (jQuery Minicolor) that's been used in this page is a jQuery plugin from "Cory LaViska for A Beautiful Site ".

Finally, thanks to myself for finally making a decent customization tool for Bootstrap. :)

Visit my site at http://designspebam.com to see my other works

Toggle all

1. Choose components

Scaffolding

JS Components

Components

Miscellaneous

Responsive

Base CSS

Toggle all

2. Select jQuery plugins

Heads up!

All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of jQuery to be included.

3. Customize variables

Heading

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Default Success Warning Important Info Inverse

Table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Pagination

Form Heading Example block-level help text here.

Misc 1

Scaffolding

Links

Sprites

Misc 2

Pagination

Other stuffs

Sample content inside a well

This is what a paragraph will look like inside a well. The color of the font is taken directly from the global font color assigned to the body markup and can't be customized separately (Bootstrap version 2.2.1). Hence you need to chose the well background color in such a way that the font color works both for body background and the well background.

Cancel Commit

Grid system

The current version does not support preview of the following variables.

Typography

Work on enabling color picker and preview still going on. Check back in a few days. Nevertheless, you can still enter the values manually and compile your bootstrap.

Hero Unit

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Tables

Forms

Unluckily, as of Bootstrap 2.2.1, the text color of the form fields has all been assigned a default value and can't be changed. What you see is the default color which might not be suitable for darker background color. You can't have any value in the form preview fields as that interfere when you finally submit the form to compile. Hence any value is cleared as soon as the field lose focus.

Buttons

Form states & alerts

Warning! Best check yo self, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Common elements between Navbar & Navbar inverse

Note: The Search field's height in the nav bar is directly taken from the @baselineHeight from the Typography tab. When you change the navbar height, Bootstrap 2.2.1 tries to align it vertically to the centre by assuming it's height to be a fixed value of 30px. Hence, it does not align properly for greater navbar heights.

Please go to the "Navbar" tab for common variables between "Navbar" and "Navbar Inverse".

Dropdowns

4. Download

Customize and Download

What's included?

Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.

Please leave your comments below