Rasti CSS is a web UI Framework full of reusable building blocks. It's built using LESS as a CSS preprocessor and jQuery for component behaviour. We ♥ Bootstrap, and most of this framework is based on it, but with several differences and more components, to make modern websites with modern patterns. Created by @santiquiss.
"Every line of code should appear to be written by a single person, no matter the number of contributors."
It's very important to start with the conventions and help everyone involved in the project to follow them. Sometimes we even forget to follow our own conventions. That's why we establish the guidelines used in this framework before anything else.
The following rules refer to HTML, CSS, JS and LESS (If you are not familiar with LESS, we recommend reading the documentation before continuing).
- Rasti CSS follows this excellent guidelines written by @mdo.
- JS code should follow this guidelines written by @rwaldron (and others).
Base html elements like h1, h2, p, input, etc, have a default style defined on the framework via normalize.css to deal with browser inconsistencies. Any other additional styles to this elements is applied via a class. div and span elements should never be directly styled.
IDs are prohibited, they have no advantage over classes. Broken behavior due to ID collisions are hard to track down and annoying.
We follow the BEM (block, element, modifier) naming methodology. Why? Because it helps to identify the purpose of a class by just looking at the name. Further reading in the Smashing Book #3.
/* Block */
.main-menu
/* Element */
.main-menu__item
/* Modifier */
.main-menu__item--disabledHTML Structure
<ul class="main-menu">
<li class="main-menu__item">
<a class="main-menu__link">
<span class="main-menu__text"></span>
</a>
<a class="main-menu__link--disabled">
<span class="main-menu__text"></span>
</a>
</li>
</ul>All the CSS declarations must be in the same level.
.main-menu {}
.main-menu__item {}
.main-menu__link {}
.main-menu__link--disabled {}
.main-menu__text {}