Allegretto CSS

open-source | micro-framework
Allegretto CSS micro-framework hero area
Allegretto CSS micro-framework hero area

Features

Fast and lively. With Unpkg CDN goodness.

Getting Started

All you need is 1 CSS file, retto.min.css to be linked to your webpage. I recommend using https://unpkg.com.

There’s also the full documentation with many examples.

Screenshot showing Grid CSS code examples.
Screenshot showing Grid CSS code examples.

At the core of Allegretto, is a simple flex-box-based Row & Column system similar to Bulma’s style of columns inside row containers and it automatically calculates the widths between them using Flex. Add simple divisions of 12 ( .col-4 .col-8 , for example) to quickly and easily build responsive layouts.

Building on this concept is some additional Helpers built into Allegretto to help quickly show/hide elements while wireframing but also keep or hide them from screen-readers and other accessible devices as well as provide an accessible fall-back when using SVG images for interactive elements.

Common Helpers
Allegretto-specific CSS helpers for handling failing to load SVGs and show/hide elements from screen-readers.