A SCSS micro-framework for developing performant sites with stunning typography, Embrace was designed from the get-go for speed, utility & accessibility.
Embrace tries to be as transparent as possible, applying baseline typographic styles directly to html elements and then providing optional CSS patterns, or modules, to style your site. Disable any styles your project does not need and ship only the code you use.
Thanks for checking out Embrace (issue №1). This is an early beta so if you see anything wrong please Open an issue or Create a pull request. Contributions are always welcome.
☞ Key Features
- A consistent baseline, automagically. Embrace uses the Lobotomised Owl Selector to apply a margin, equal to the default line-height, to all elements. Embrace’s type-sizing mixin ensures that vertical rhythym is always maintained.
- OpenType® font-feature settings, based on Normalize-OpenType.css. If your font includes them you can enable typographic niceities like ligatures, alternate figures, small caps, lining numerals, etc., with a single variable.
- Modular scales for type sizing, as described in Composing the New Canon: Music, Harmony, Proportion, to take the guesswork out of setting type sizes.
- Elegant typographical presets, including built-in support for small caps, abbreviations, awesome ampersands, quotes, hanging punctuation, and much more.
- Responsive type sizing. Everything in Embrace is sized in Em so all type can just scale proportionally, with increasing viewport, by just adjusting the html font-size.
- Incredibly lightweight. Out-of-the-box, with all features enabled, Embrace’s compiled CSS weighs in at 15.9KB, 4.4KB after gzipping!