Atto

An Atomic Flexbox CSS Framework.

Atto: A unit prefix in the metric system denoting one trillionth.

• Currently 877 bytes minified.
• Works in conjunction with Tachyons.css, no class name conflicts.
• Install via

Yet Another CSS Framework?

No, this one is just an extension of Tachyons. Full credit goes to Tachyons. I am a huge fan and I use it a lot, I just found that the flexbox module class names were verbose and hard to remember so I wanted to create my own. I also wanted something that forced me to use the 38 CSS 2.1 properties that work in all browsers, for when flexbox isn't an option. Lastly, I learned a bunch of HTML best practices from reading Heydon Pickering's “Inclusive Front-End Design Patterns” book that I wanted to incorporate into a html starter boilerplate.

In Progress...

• [x] Abbreviate classnames to smaller snippets.
• [ ] Add flex basis, grow and shrink.
• [ ] Add all CSS 2.1 properties for fallbacks.
• [ ] Add an accessible HTML starter template.
• [ ] Add an accessible colour palette.
• [ ] host on unpkg.

Fallback CSS 2.1 properties (well-supported subset)

These properties are supported in effectively all browsers (since IE6+, Firefox 2+, Chrome 1+ etc)

Includes the following:

• background-color
• background-image
• background-position (2 params)
• background-repeat (repeat | repeat-x | repeat-y | no-repeat)
• border-collapse (collapse | separate)
• border-color
• border-spacing
• border-style
• bottom
• color
• clear (none | left | right | both)
• display (none | inline | block | list-item)
• float (none | left | right)
• font-family
• font-size
• font-style (normal | italic | oblique)
• font-variant (normal | small-caps)
• font-weight
• height
• left
• line-height
• list-style
• list-style-image
• list-style-position
• margin
• overflow (visible | hidden | scroll | auto)
• padding
• position (static | relative | absolute)
• right
• text-align (left | right | center | justify)
• text-decoration (none | underline | overline | line-through)
• text-indent
• text-transform (capitalize | uppercase | lowercase | none)
• top
• width
• word-spacing
• visibility (visible | hidden)
• z-index