Atomizer
Web
– Web app for Atomizer
What is Atomic CSS?
Syntax
<!-- Paste your HTML markup here. Alternatively, configure the default options by clicking on the gear icon --> <div class="D(f) Jc(c) Ai(c) H(100%) Fz(20vh) Ff(m)"> Preview </div>
{ "breakPoints": { "sm": "@media(min-width:750px)", "md": "@media(min-width:1000px)", "lg": "@media(min-width:1200px)" }, "custom": { "1": "1px solid #000", "foo": "2px dotted #f00" }, "classNames": [] }
/** * Generated using Atomizer build v3.2.1. * Copyright (c) 2015, Yahoo Inc. * All rights reserved. **/ .D\(f\) { display: flex; } .Ai\(c\) { align-items: center; } .Jc\(c\) { justify-content: center; } .Ff\(m\) { font-family: Monaco, "Courier New", monospace; } .Fz\(20vh\) { font-size: 20vh; } .H\(100\%\) { height: 100%; }