Atomic CSS is a way of writing style sheets with one property per declaration, if we put it simply. If you have coded at least one large, scalable, responsive UI you probably already know how useful this approach is:). If the concept is new for you, here is a great article that explains what about: http://www.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic-approach/ .
We have decided to share a small set of CSS helper – or utility – classes that proved to be very useful in out work with large responsive UIs. Those classes are written for Twitter Bootstrap framework, style sheet uses the same break points. But helpers can be used with any framework, in any project. You can add your own atoms, breakpoints, change naming convention, etc.
Click here for an example of how it all works Download from gitHub
Package includes SCSS file and expanded + minified resulting CSS files.
Included atom classes:
- Set of paddings from 0px to 60px. For all sides and for each of 4 sides. For base size and 4 breakpoints.
- Set of margins from 0px to 60px. For all sides and for each of 4 sides. For base size and 4 reakpoints
- Set of 1px solid borders. For all sides and for each of 4 sides. For base size and 4 breakpoints.
- Set of no borders. For all sides and for each of 4 sides. For base size and 4 breakpoints.
- Set of elements with 4 different positions. For base size and 4 breakpoints.
- Set of elements with display types inline, inline-block, block, none, table, table-cell, table-row, flex. For base size and 4 breakpoints.
- Set of rounded corner elements, radius from 0px to 24px. For all sides and for each of 4 sides. For base size and 4 breakpoints.
- Set of sharp corner elements, radius 0px. For each of 4 sides. For base size and 4 breakpoints.
NAMING CONVENTION
atm_ = prefix. To avoid conflicts with other classes. Can be changed or deleted.
– followed by
m = margin
p = padding
b = border
nob = no borders
br = border radius
nobr = no border radius (stright corner)
ed = element display
ep = element position
– followed by
in case of margins, paddings, border radius a number that signifies size of margin, or padding, etc.
– followed by
side name. I.e. -left, -right etc.
– followed by
nothing or break point name. I.e. -xs, -sm etc.
Example:
.atm_m10-left-xs class will give an element it is applied to left margin of 10 pixels, on screens of maximum 767px width.