<main role="main" class="container">

​

  <h1 class="heading">

    Heading and text: Lorem ipsum dolor sit amet

  </h1>

​

  <p>

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim recusandae expedita, maxime veritatis dicta velit veniam in quo ut culpa, commodi omnis est laborum error eveniet autem minus vitae.

  </p>

​

  <p>

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim recusandae expedita, maxime veritatis dicta velit veniam in quo ut culpa, commodi omnis est laborum error eveniet autem minus vitae.

  </p>

  <h2>Layout</h2>

​

  <ul class="layout">

    <li class="layout-col">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>

    <li class="layout-col">Dolorum enim recusandae expedita, maxime veritatis dicta velit veniam in quo ut culpa</li>  

  </ul>

​

  <h2>Buttons</h2>  

​

  <p><button class="button size-sm">Button <em>(small size)</em></button></p>

  <p><button class="button">Button <em>(default size)</em></button></p>

  <p><button class="button size-lg">Button <em>(large size)</em></button></p>

  <h2>Smaller font-size</h2>

  <div class="size-sm">

    <p>

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, reiciendis autem quam minima magni! Consectetur delectus totam maiores! Laudantium, mollitia saepe, esse explicabo impedit magnam veritatis minima fuga ad nemo.

    </p>    

    <p><button class="button">Button <em>(default size)</em></button></p>      

  </div>

</main>  

/* root measure: percentage unit */

​

html {

  font-size: 125%; /* 18px */

}

​

/* document measure: rem unit */

​

body {

  margin: 1rem;

  padding: 0;

}

​

p { margin-bottom: 1rem; }

h1 { font-size: 2rem; }

h2 { font-size: 1.5rem; }

​

.container {

  max-width: 30rem;

  margin-left: auto;

  margin-right: auto;

}

​

/* responsive typography: vw unit */

​

.heading {

  font-size: calc(2rem + 2vw);

}

​

.layout {

  list-style-type: none;

  padding: 0;

}

​

.layout-col {

  padding: 0;

  margin-bottom: 1rem;

}

​

/* media queries: em unit */

​

@media screen and (min-width: 30em) {

  .layout {

    display: flex;

  }    

  /* layout: percentage */

  .layout-col {

    width: 50%;

    padding-left: 1rem;

  }  

  .layout-col:first-child {

    padding-left: 0;

    border-right: 1px solid lightgrey;

  }

}

​

/* fluid components: em unit */

​

.button {

  background: #ccc;

  padding: 1em;

  display: inline-block;

}

​

.size-sm { font-size: .75em }

.size-lg { font-size: 1.25em }