Skip to content

Latest commit

 

History

History
25 lines (22 loc) · 1.21 KB

File metadata and controls

25 lines (22 loc) · 1.21 KB

Simple Inline Grid System

Really simple grid system that allows you to control the width of any alement without having to worry about the parent element lile bootstrap

Example for the simplified version:

  <div class="whatever-hell-you-want">
  	<span class="gridr l-14 m-12 s-11">Something nice</span>
  	<span class="gridr l-34 m-12 s-11">Something nicer</span>
  </div>

Example for the default version:

  <div class="whatever-hell-you-want">
    <span class="inline-grid xl-1-7 l-1-5 m-1-4 s-1-1">inline-grid xl-1-7 l-1-5 m-1-4 s-1-1</span>
    <span class="inline-grid xl-1-7 l-1-5 m-1-4 s-1-1">inline-grid xl-1-7 l-1-5 m-1-4 s-1-1</span>
    <span class="inline-grid xl-1-7 l-1-5 m-1-4 s-1-1">inline-grid xl-1-7 l-1-5 m-1-4 s-1-1</span>
    <span class="inline-grid xl-1-7 l-1-5 m-1-4 s-1-1">inline-grid xl-1-7 l-1-5 m-1-4 s-1-1</span>
    <span class="inline-grid xl-1-7 l-1-5 m-1-3 s-1-1">inline-grid xl-1-7 l-1-5 m-1-3 s-1-1</span>
    <span class="inline-grid xl-1-7 l-1-2 m-1-3 s-1-1">inline-grid xl-1-7 l-1-2 m-1-3 s-1-1</span>
    <span class="inline-grid xl-1-7 l-1-2 m-1-3 s-1-1">inline-grid xl-1-7 l-1-2 m-1-3 s-1-1</span>
  </div>

Example page provided as well, check out the file index.html!