GlobalGiving Living Styleguide

2.1 #permalink Grid

We use a 12-column grid with the ability to change layouts based on four viewport sizes:

Size	Reference Device	Class Prefix	Minimum Size
Default	Mobile	n/a	n/a
Small	Mobile	sm	23em (368px at 16px/em)
Medium	Mobile landscape / tablet	md	35.5em (568px at 16px/em)
Medium-Large	Tablet landscape / desktop	ml	48em (768px at 16px/em)
Large	Desktop	lg	64em (1024px at 16px/em)
X-Large	Widescreen desktop	xl	80em (1280px at 16px/em)

Resize your window to see the columns adapt.

We (attempt to) achieve all our layout needs using display:inline-block and position:absolute instead of the float property. One immediate consequence is that since grid elements are inline-block, they have small spaces between them. To see why, think of these inline-block elements like words. The DOM lays them out sequentially, left-to-right, and since there's whitespace in the markup between them, space is inserted (just like there's space inserted between words in text). Therefore we need to use the class grid-parent for an element which contains grid elements. This class decreases the letter-spacing property and magically makes everything work out.

Example

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Dolor Sit Amet

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

Proident laborum

In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Praesent consectetur

Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.

Seven Columns

Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl.

Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla.

Five Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis.

Markup

<div class="grid-parent">
   <div class="grid-12 grid-md-6 grid-lg-3">
      <div class="box-padded">
         <h3>Lorem Ipsum</h3>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
         </p>
      </div>
   </div>
   <div class="grid-12 grid-md-6 grid-lg-3">
      <div class="box-padded">
         <h3>Dolor Sit Amet</h3>
         <p>
            Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
         </p>
      </div>
   </div>
   <div class="grid-12 grid-md-6 grid-lg-3">
      <div class="box-padded">
         <h3>Proident laborum</h3>
         <p>
            In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
         </p>
      </div>
   </div>
   <div class="grid-12 grid-md-6 grid-lg-3">
      <div class="box-padded">
         <h3>Praesent consectetur</h3>
         <p>
            Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.
         </p>
      </div>
   </div>
   <div class="grid-12">
      <img class="img-cover" src="https://s3.amazonaws.com/ooomf-com-files/wjNV6gWuQkqeuH8txHc9_sylwiabartyzel_unsplash_tatry_03.jpg" alt="By Sylwia Bartyzel from unsplash.com">
   </div>
   <div class="grid-7">
      <div class="box-padded">
         <h3>Seven Columns</h3>
         <p>
            Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl.
         </p>
         <p>
            Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla.
         </p>
      </div>
   </div>
   <div class="grid-5">
      <div class="box-padded">
         <h3>Five Columns</h3>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis.
         </p>
      </div>
   </div>
</div>

Source: layout/grid_gg.less, line 4