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 strappingcd 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'Appuse'/strapping' Strappingoptions;Applisten3000;
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:
Just make sure to disable Strapping in production!