Minimal and responsive CSS framework for fast building websites

<section class="container small section" id="containers">
    <h2>Containers</h2>
    <p>You can choose from three container sizes, that are centered horizontaly by left and right padding and shrinks with the browser. Any content without a container will span full browser width.</p>
    <table>
      <thead>
        <tr>
          <th>Small</th>
          <th>Medium</th>
          <th>Large</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>800px</td>
          <td>1000px</td>
          <td>120px</td>
        </tr>
      </tbody>
    </table>
  </section>

  <section class="container small section" id="grid">
    <h2>Grid</h2>
    <p>Grid system is based on <strong>Flexbox</strong>. Simply add columns you want in a row, and they'll evenly take up the available space. Do not forget to wrap columns in <code>row</code> container!</p>
    <div class="row">
      <div class="column"><span class="column-demo">.column</span></div>
    </div>
    <div class="row">
      <div class="column"><span class="column-demo">.column</span></div>
      <div class="column"><span class="column-demo">.column</span></div>
      <div class="column"><span class="column-demo">.column</span></div>
      <div class="column"><span class="column-demo">.column</span></div>
    </div>
  </section>

  <section class="container small section" id="typography">
    <h2>Typography</h2>
    <p>Font size is based on <code>rem</code> unit which stands for <i>"root em"</i> - it is relative to <code>html</code> element. Lemon define <code>html</code> elements font size as 62.5% which gives us 10px.
      Thanks for that You can easily build layout based on <code>rem</code> unit - 1rem is equal to 10px.
      Lemon use <a href="https://fonts.google.com/specimen/Open+Sans">Open Sans</a> font.</p>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    <a href="#">Anchor</a>
    <em>Emphasis</em>
    <small>Small</small>
    <strong>Strong</strong>
    <u>Underline</u>
    <p>Paraghaph</p>
  </section>

  <section class="container small section" id="blockquotes">
    <h2>Blockquotes</h2>
    <p>Blockquote is set to have a left border. A cite will be right aligned and italicized.</p>
    <blockquote>
      <p>Luck is preparation waiting for an opportunity.</p>
      <cite>Ross Brawn</cite>
    </blockquote>
  </section>

  <section class="container small section" id="buttons">
    <h2>Buttons</h2>
    <p>Button elements, links with a <code>.btn</code> class, and input elements should all render exactly the same.
      You can choose from two styles: basic and outlined (with
      <code>.outline</code> class).</p>
    <div>
      <button>Button</button>
      <a href="#" class="btn">Link</a>
      <input type="button" value="Input">
      <input type="submit" value="Submit">
      <button disabled="">Disabled</button>
    </div>
  <div>
    <button class="outline">Button</button>
    <a href="#" class="btn outline">Link</a>
    <input type="button" class="outline" value="Input">
    <input type="submit" class="outline" value="Submit">
    <button class="outline" disabled="">Disabled</button>
  </div>
  </section>

  <section class="container small section" id="code">
    <h2>Code</h2>
    <p>To represent fragment of computer code wrap it in <code>code</code> element to look like this.
    If You want to place blocks of preformatted code wrap <code>code</code> in <code>pre</code> element.</p>
  </section>

  <section class="container small section" id="forms">
    <h2>Forms</h2>
    <p>Default forms will have full-width, block level labels, inputs, selects, and textareas.</p>
    <form>
      <label for="name">Name</label>
      <input type="text" placeholder="Enter Your name" id="name">
      <label for="age">Age</label>
      <select id="age">
        <option value="0-13">0-13</option>
        <option value="14-17">14-17</option>
        <option value="18-23">18-23</option>
        <option value="24+">24+</option>
      </select>
      <label for="message">Message</label>
      <textarea placeholder="Enter Your message" id="message"></textarea>
      <div class="mb">
        <input type="checkbox" id="confirmField">
        <label class="label-inline" for="confirmField">Send a copy to yourself</label>
      </div>
      <input class="button-primary" type="submit" value="Send">
    </form>
  </section>

  <section class="container small section" id="lists">
    <h2>Lists</h2>
    <p>You can choose from three types of lists: unordered list use
    <code>ul</code> element will be marked with a outline circles, the ordered list use <code>ol</code> element and your items will be marked with numbers,
    the description list use <code>dl</code> element and your items will not be marking, only spacings.</p>
    <div class="row">
      <div class="column">
        <ul>
          <li>List item one
            <ul>
              <li>Nested list item</li>
            </ul>
          </li>
          <li>List item two</li>
          <li>List item three</li>
        </ul>
      </div>
      <div class="column">
        <ol>
          <li>List item one
            <ul>
              <li>Nested list item</li>
            </ul>
          </li>
          <li>List item two</li>
          <li>List item three</li>
        </ol>
      </div>
      <div class="column">
        <dl>
          <dt>Description list item 1</dt>
          <dd>Description list item 1.1</dd>
        </dl>
      </div>
    </div>
  </section>