Used Twitter’s Bootstrap for a while and now thinking to try the fresh colors on your next app, but lacking graphic design experience?
No worries, here is tools to help you get started quickly.
PaintStrap
Bootstrap provides you with a customization tool, but it isn’t quite obvious hows certain color combination will looks like and almost impossible to experiment with a various, predefined, color schemes you can find on Adobe Kuler or COLOURlovers.
PaintStrap is the right tool for that, just do the following:
- Input a color scheme;
- Set colors to elements or leave defaults (there is preview);
- Download as CSS, LESS, etc. what ever you prefer.
BootTheme
So far so good, you’ve found nice color scheme and happy how it look in PaintStrap preview, but will that be looking good with your custom layout?
Head over to BootTheme to get the answer.
Under Design Page tab you can enter your layout, i.e. html, then go to
Generate Theme tab and import variables you occurred from PaintStrap, i.e.
variables.less file.
After some tunning you’re ready to get it back(export) and finally add into your application.
Kickstrap
The first question when you going beyond the Bootstrap defaults is “How to safely override defaults?” and that’s where Kickstrap comes to rescue.
Kickstrap is a no-install front-end framework with apps, themes, and extras.
Themes is where you will put your custom color files generated by PaintStrap and/or exported from BootTheme, see the docs for more info.
More Resources
BootstrapHero - the big badass list of useful twitter bootstrap resources.