Layout - Content - Presentation divide

index.html

<!-- LAYOUT -->
<ul>
  <li>
    <button></button>
  </li>
  <li>
    <button></button>
  </li>
  <li>
    <button></button>
  </li>
  <li>
    <button></button>
  </li>
  <li>
    <button></button>
  </li>
  <li>
    <button></button>
  </li>
  <li>
    <button></button>
  </li>
  <li>
    <button></button>
  </li>
  <li>
    <button></button>
  </li>
</ul>

<!-- CONTENT -->
<ul>
  <li>
    <button type="button" title="Add Form">Add Form</button>
  </li>
  <li>
    <button type="button" title="Add Branch">Add Branch</button>
  </li>
  <li>
    <button type="button" title="Add Document">Add Document</button>
  </li>
  <li>
    <button type="button" title="Add Email">Add Email</button>
  </li>
  <li>
    <button type="button" title="Add Phone">Add Phone</button>
  </li>
  <li>
    <button type="button" title="Copy Last">Copy Last</button>
  </li>
  <li>
    <button type="button" title="Add Paywall">Add Paywall</button>
  </li>
  <li>
    <button type="button" title="Add Link">Add Link</button>
  </li>
  <li>
    <button type="button" title="Add Page">Add Page</button>
  </li>
</ul>

<!-- PRESENTATION -->
<ul class="select-grid">
  <li class="select-item">
    <button type="button" title="Add Form">
      <i class="fa fa-file"></i>
      <span class="sr-only">Add Form</span>
    </button>
  </li>
  <li class="select-item">
    <button type="button" title="Add Branch">
      <i class="fa fa-odnoklassniki"></i>
      <span class="sr-only">Add Branch</span>
    </button>
  </li>
  <li class="select-item">
    <button type="button" title="Add Document">
      <i class="fa fa-file-text"></i>
      <span class="sr-only">Add Document</span>
    </button>
  </li>
  <li class="select-item">
    <button type="button" title="Add Email">
      <i class="fa fa-envelope"></i>
      <span class="sr-only">Add Email</span>
    </button>
  </li>
  <li class="select-item">
    <button type="button" title="Add Phone">
      <i class="fa fa-phone"></i>
      <span class="sr-only">Add Phone</span>
    </button>
  </li>
  <li class="select-item">
    <button type="button" title="Copy Last">
      <i class="fa fa-clipboard"></i>
      <span class="sr-only">Copy Last</span>
    </button>
  </li>
  <li class="select-item">
    <button type="button" title="Add Paywall">
      <i class="fa fa-dollar"></i>
      <span class="sr-only">Add Paywall</span>
    </button>
  </li>
  <li class="select-item">
    <button type="button" title="Add Link">
      <i class="fa fa-chain"></i>
      <span class="sr-only">Add Link</span>
    </button>
  </li>
  <li class="select-item">
    <button type="button" title="Add Page">
      <i class="fa fa-file-o"></i>
      <span class="sr-only">Add Page</span>
    </button>
  </li>
</ul>