Check out the demo


Check out the demo

Strapping! is a GUI for working with Bootstrap. Bootstrap provides a valuable set of default styles and components for the web, but customizing it can be a pain.

Strapping allows you to build and preview customized Bootstrap themes. You can change the default color schemes, import new fonts from Google Fonts, and mess with any of the variables provided by Bootstrap's variables.less

When you're done, you can preview your theme right in your browser, and you can copy the generated CSS into your project.

You can use the demo above to generate custom CSS for your project, or your can install Strapping! as a node module that lets you customize your bootstrap installation on the fly.

npm install strapping
cd node_modules/strapping && bower install
var Strapping = require('strapping');
var Express = require('express');
var App = Express();
var options =  {
  basePath: '/strapping',
  output: {
    styles: __dirname + '/static/css/bootstrap.css',
    settings: __dirname + '/static/css/config.json',
App.use('/strapping', Strapping(options));

After starting the server, you'll see the editor running at localhost:3000/strapping/editor. Any edits you make in the GUI will change the CSS in the styles file, and the settings file will store your bootstrap configuration.

This means that any page which points to the styles CSS file will immediately reflect your changes:

<link rel="stylesheet" href="/css/bootstrap.css">

Just make sure to disable Strapping in production!