<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="initial-scale=1, minimum-scale=1, user-scalable=no, maximum-scale=1, width=device-width" name="viewport">
    <meta content="telephone=no" name="format-detection">
    <title>Title</title>
    
    <!--  Insert here JavaScript/CSS resources  -->
    <link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" />
    
    <link rel="icon" href="xxx.png" type="image/png">
    <style>
      [class^='col-']{
        background-color:#ddd;
        border: 1px solid rgba(86,61,124,.2);
      }
    </style>
  </head>
  
  <body>
    <div id="wrapper">
      <header>
        <div class="my-t-grid">
          <div class="col-12">
            HEADER .col-12
          </div>
        </div>
      </header>
      <section>
        <div class="my-t-grid">
          <div class="row">
            <div class="col-l-1">.col-1</div>
            <div class="col-l-1">.col-1</div>
            <div class="col-l-1">.col-1</div>
            <div class="col-l-1">.col-1</div>
            <div class="col-l-1">.col-1</div>
            <div class="col-l-1">.col-1</div>
            <div class="col-l-1">.col-1</div>
            <div class="col-l-1">.col-1</div>
            <div class="col-l-1">.col-1</div>
            <div class="col-l-1">.col-1</div>
            <div class="col-l-1">.col-1</div>
            <div class="col-l-1">.col-1</div>
          </div>
          <div class="row">
            <div class="col-l-2">.col-2</div>
            <div class="col-l-2">.col-2</div>
            <div class="col-l-2">.col-2</div>
            <div class="col-l-2">.col-2</div>
            <div class="col-l-2">.col-2</div>
            <div class="col-l-2">.col-2</div>
          </div>
          <div class="row">
            <div class="col-l-3">.col-3</div>
            <div class="col-l-3">.col-3</div>
            <div class="col-l-3">.col-3</div>
            <div class="col-l-3">.col-3</div>
          </div>
          <div class="row">
            <div class="col-l-4">.col-4</div>
            <div class="col-l-4">.col-4</div>
            <div class="col-l-4">.col-4</div>
          </div>
          <div class="row">
            <div class="col-l-6">.col-6</div>
            <div class="col-l-6">.col-6</div>
          </div>
          <div class="row">
            <div class="col-l-1">.col-1</div>
            <div class="col-l-11">
              <div class="col-l-10">a</div>
              <div class="col-l-2">b</div>
            </div>
          </div>
          <div class="row">
            <div class="col-l-2">.col-1</div>
            <div class="col-l-10">.col-11</div>
          </div>
          <div class="row">
            <div class="col-l-3">.col-1</div>
            <div class="col-l-9">.col-11</div>
          </div>
          <div class="row">
            <div class="col-l-4">.col-1</div>
            <div class="col-l-8">.col-11</div>
          </div>
          <div class="row">
            <div class="col-l-5">.col-1</div>
            <div class="col-l-7">.col-11</div>
          </div>
          <div class="row">
            <div class="col-l-6">.col-1</div>
            <div class="col-l-6">.col-11</div>
          </div>
          <div class="row">
            <div class="col-l-7">.col-1</div>
            <div class="col-l-5">.col-11</div>
          </div>
          <div class="row">
            <div class="col-l-8">.col-1</div>
            <div class="col-l-4">.col-11</div>
          </div>
          <div class="row">
            <div class="col-l-9">.col-1</div>
            <div class="col-l-3">.col-11</div>
          </div>
          <div class="row">
            <div class="col-l-10 col-m-6">.col-1</div>
            <div class="col-l-2 col-m-6">.col-11</div>
          </div>
          <div class="row">
            <div class="col-l-11 col-m-11">.col-1</div>
            <div class="col-l-1 col-m-1">.col-11</div>
          </div>
        </div>
      </section>
      <footer>
        <div class="my-t-grid">
          <div class="col-12">
            FOOTER .col-12
          </div>
        </div>
      </footer>
    </div>
    <!--  Insert here JavaScript resources  -->
  </body>
</html>