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.
What does that mean?
View the different components on GitHub:
* WP Roostrap – https://github.com/skyshab/wp-rootstrap
* Roostrap Library – https://github.com/skyshab/rootstrap-library
* Rootstrap Gulp Plugin – https://github.com/skyshab/less-plugin-rootstrap
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.