Atomizer
Docs
REPL
Reference
Support
GitHub
Hello world
Site Search:
⌘
K
Search Results
Fullscreen
Download
html
<!-- Edit the HTML markup here. --> <div class="W(30%)--sm Mx(a) Mt(3rem) P(20px) Bg(#0280ae) C(#fff) Bdrs(15px) Ff(arial)"> <h1 class="Ta(c)">Hello world!</h1> <p class="My(10px) Lh(1.3)">Modify the markup by changing the code in the "html" box. As you add and remove <a href="/guides/atomizer-classes.html">Atomizer classes</a>, this preview will update live and the CSS will be auto generated in the "css" box above.</p> <p class="Lh(1.3)">You can further customize Atomizer by adding your own breakpoints or custom values. Take a look at the <a href="/configuration.html">Configuration guide</a> for more information.</p> <p>Like what you see? Use the Download button to save it locally and build your next project!</p> </div>
config
{ "breakPoints": { "sm": "@media(min-width:750px)", "md": "@media(min-width:1000px)", "lg": "@media(min-width:1200px)" }, "custom": { "arial": "Arial, sans-serif" }, "classNames": [] }
css
Atomizer