Get all goods from Bootstrap, add dozens of reusable web components that are not included in Bootstrap, helper classes and extra mixins, write all of them in BEM, then add automatically rendered styleguide and a nice tool to create HTML prototypes. This is Bootsmacss. It will raise your workflow to a new level. Make your markup and styles scalable and easy to maintain, does not matter if you are working on web app, huge CMS implementation or small website.

View Bootsmacss styleguide demo

BootSMACSS is nothing else than fusion of becoming increasingly popular approaches that we liked very much:

• Bootstrap - Bootsmacss is based and fully compatible with Bootstrap library
• SMACSS - modular stylesheet approach that splits everything into components
• SASS - keeps your stylesheets's syntax clean and tidy
• BEM - stylish structure for each SASS component
• GULP - to automate various tasks and compile your work on file save
• Mustache - to render static html prototypes as a result of graphic project's implementation that can be shown to client, tested and implemented later to CMS, or deployed to production server
• KSS Styleguide - to render styleguide for your components easly
• Additional usefull stuff - Extra components, mixins, helper classes, etc.

Here are the examples of sites we created using BootSMACSS and Drupal:

• eurekanetwork.org - EUREKA Network
• eurostars-eureka.eu - Eurostars joint programme
• smartcities-infosystem.eu - Smart Cities Information System
• een.ec.europa.eu - Enterprise Europe Network

You will find a tutorial in BootSMACSS wiki pages.

You're a Drupal developer? Check Drupal port for BootSMACSS

• Michal Kokocinski
• Kris Gunciarz

Development Supported by WAAT Ltd