skip to main content


The Rootstrap UI front end framework is the result of an experimental approach to generating responsive website layouts. Rootstrap starts with the simplest unit of information on the page, the text. Calculations are made based on font size and line height to establish a vertical rhythm. Images are sized by their relationship to the surrounding content, and behave in a way that doesn’t disrupt the flow of the text. Breakpoints for changes in the layout are based on optimal presentation of the content rather than arbitrary device sizes.

This means that no matter what screen size or type of device the content is being displayed on, it will adapt to be presented in an appropriate way.

Rootstrap is built in Less and is meant as a tool for front end developers to be able to rapidly and concisely create the styles and behavior for both the overall layout, and individual elements within a page. Rather than starting with a large pool of pre-compiled styles that require you to add classes to the markup, Rootstrap allows you to generate only the styles you need for a particular project.

Where Roostrap got it’s roots

Rootstrap evolved as the front end framework for Taproot, the custom WordPress theme that I used as a base for client projects at Taproot Studios. I discovered Less in 2010, and the ability to use variables revolutionized color management in my projects. I realized that much of the work I was doing when building a site had somewhat predictable parameters, and could be automated using Less mixins.

At some point I had heard about “Twitter Bootstrap,” but had no idea what it was. I wasn’t an avid Twitter user at the time and had no interest in customizing my twitter page. By the time I realized what Bootstrap was, I had built quite a collection of my own mixins. Many were very similar to Bootstrap’s, due to their obvious utility in outputting cross browser styles, etc. I ultimately incorporated some of Bootstrap’s mixins into the Roostrap library for things like forms and tables.

When I decided to break off the front end part of the Taproot theme into its own project, the name Rootstrap was too obvious to pass up.

Project Status

Rootstrap is currently going through a rebirth. I have adapted some of the key concepts into an expansion of the original project, called ‘WP Roostrap.’ The new incarnation loads through a Gulp plugin, and shares a configuration file with PHP and Javascript components within a Composer module.

What does that mean?

This means that you can quickly and easily add Rootstrap to your WordPress theme or plugin project via npm and composer modules. The shared configuration file means that you set your responsive device size parameters in a single place, which you can then access in your Less, PHP, and Javascript environments.

View the different components on GitHub:
* WP Roostrap –
* Roostrap Library –
* Rootstrap Gulp Plugin –

The Rootstrap Less library will remain independent of the ‘WP Rootstrap’ components, being useful for web projects beyond the scope of WordPress. Since the core functionality of Rootstrap, screen management, has been redesigned in the new version, the other legacy components for page layouts and image behavior will need to also be rebuilt. For now, the new Rootstrap consists of just two core mixins: .screen() and .set();

.screen() allows you to easily add a group of styles to a particular media query using simple, descriptive parameters.

.set() is an enhanced logic control for determining the style output based on conditionals.

I hope to add more mixins in the future.