Themestrap: Lightweight Theme Kit for Bootstrap 3
Bootstrap provides a great foundation for UI, but every site is different and the (let's face it) the default Bootstrap "look" is a little too familiar around the web. Creating and maintaining a rich customization of the Bootstrap framework can be a little bit tricky, especially when it comes time to upgrade to a new Bootstrap release.
We'd like to make things a little easier for the Bootstrap 3 era, so today we're happy to announce Themestrap. Themestrap is a simple, lightweight "starter kit" for creating Bootstrap 3 themes that are small, nimble and, most importantly, easily maintained as new releases come out.
Here's all it takes to get started creating a theme with Themestrap:
git clone https://github.com/divshot/themestrap.git bootstrap-theme-YOUR_THEME_NAME cd bootstrap-theme-YOUR_THEME_NAME npm install bower install grunt watch # run `npm install -g grunt-cli` if you don't already have Grunt
Once you've done that, just open up
examples/kitchen-sink.html in your browser and refresh as you
make modifications to the included LESS files. Don't forget to rename your theme in
A Lightweight Theme Philosophy
We believe that themes should be layered as unobtrusively as possible over the framework. To that
end, Themestrap provides just two files as a start: variables.less and theme.less. The variables
file is a copy of the default Bootstrap variable file and is ready to be modified, and theme is simply
a blank stylesheet that includes
bootstrap.less into which you can layer additional styles before/after
Themestrap uses Bower to install a local copy of Bootstrap for the theme, and updating the Bootstrap
release is as simple as modifying
bower.json. In addition, if your theme requires more extensive
modification you need only create a file in your theme's
less directory with the same name as one
less files. At compile time the modified version will automatically be given preference
over the default.
We would love to see a proliferation of open-source themes for Bootstrap 3. I'd like to personally thank Thomas Park for his fantastic work curating Bootswatch and providing so many themes to the community for free. If you release something that used Themeswatch, please let us know!
Our First Theme: White Plum
What would a theme framework be without themes? We've created a theme called White Plum using the Themestrap framework. Simple, clean, and a little bit purple, we think White Plum gives a nice change of pace from the Bootstrap default and we hope you enjoy it.
Of course, this theme is also available today for use in your Divshot Bootstrap 3 projects. Check it out!
The Themestrap Gallery
Last but not least, we've created the Themestrap Gallery which will be a single gathering place for all of the open-source Bootstrap themes that are creating using Themestrap. We hope that you'll share your themes with us as you create them and add them to the gallery so that the whole community can benefit. Enjoy!