Hello world - REPL

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

xxxxxxxxxx
 
            {
                "breakPoints": {
                    "sm": "@media(min-width:750px)",
                    "md": "@media(min-width:1000px)",
                    "lg": "@media(min-width:1200px)"
                },
                "custom": {
                    "arial": "Arial, sans-serif"
                },
                "classNames": []
            }
            

css

​x
 
/** Generated Atomic CSS */.Bdrs\(15px\) {  border-radius: 15px;}.Bg\(\#0280ae\) {  background: #0280ae;}.C\(\#fff\) {  color: #fff;}.Ff\(arial\) {  font-family: Arial, sans-serif;}.Lh\(1\.3\) {  line-height: 1.3;}.Mx\(a\) {  margin-left: auto;  margin-right: auto;}.My\(10px\) {  margin-top: 10px;  margin-bottom: 10px;}.Mt\(3rem\) {  margin-top: 3rem;}.P\(20px\) {  padding: 20px;}.Ta\(c\) {  text-align: center;}@media(min-width:750px) {  .W\(30\%\)--sm {    width: 30%;  }}​