Merge pull request #412 from DFurnes/container-block

Container... block!
DoSomethingArchive · Jan 29, 2015 · e17121c · e17121c
2 parents 653657c + 6893295
commit e17121c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/scss/_regions/_container.scss b/scss/_regions/_container.scss
@@ -1,5 +1,5 @@
 // Standard container for centered 12-column layouts. Collapses to full-width on mobile.
-// Modifier classes can be applied to the required `container__body` to use different
+// Modifier classes can be applied to the required `container__block` to use different
 // preset layouts. Optionally, the `container__row` class can be used to align into rows.
 //
 // Apply `.-padded` modifier to add extra bottom padding to a container.
@@ -24,7 +24,7 @@
       @include push(2);
     }
 
-    .container__body {
+    .container__block {
       // When inside a container wrapper, increase top/bottom padding
       // on the container body.
       padding: $base-spacing gutters();
@@ -50,7 +50,8 @@
 
   // Use container body for all container content, with optional modifiers
   // to span either half or three-quarters width.
-  .container__body {
+  .container__block {
+    @include clearfix;
     padding: gutters();
   }
 }

diff --git a/styleguide/index.erb b/styleguide/index.erb
@@ -656,11 +656,11 @@
     <% styleguide_block  'Container' do %>
       <div class="container">
         <div class="wrapper">
-          <div class="container__body $modifier_class">
+          <div class="container__block $modifier_class">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus condimentum aliquet. Maecenas suscipit commodo dui, eu venenatis nisl volutpat vitae.</p>
           </div>
 
-          <div class="container__body $modifier_class">
+          <div class="container__block $modifier_class">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus condimentum aliquet. Maecenas suscipit commodo dui, eu venenatis nisl volutpat vitae.</p>
           </div>
         </div>

diff --git a/styleguide/inventory.erb b/styleguide/inventory.erb
@@ -1,7 +1,7 @@
 
 <div class="container">
   <div class="wrapper">
-    <div class="container__body -narrow">
+    <div class="container__block -narrow">
       <h1>Styleguide Inventory</h1>
       <p>This is <a href="https://www.github.com/dosomething/neue">Neue</a>, our interface framework and pattern library. It defines a set of base styles and common patterns shared throughout our website. It's a strong foundation for building beautiful interfaces.</p>
 
@@ -19,7 +19,7 @@
 
 <div class="container">
   <div class="wrapper">
-    <div class="container__body -narrow">
+    <div class="container__block -narrow">
       <h2>Heading Beta</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend faucibus rutrum. Cras congue tortor nec velit rutrum pharetra in porta dui. Aliquam sit amet enim aliquet orci lobortis scelerisque non quis urna. Nam rutrum, erat vel aliquet auctor, justo nulla bibendum purus, mollis venenatis lectus nisi nec lacus. Fusce et augue convallis, laoreet libero sed, aliquam turpis. Donec volutpat sed ex vel consequat. Aliquam dictum lectus a elit sagittis, non venenatis leo imperdiet. Phasellus nibh sapien, interdum ultricies euismod ut, rutrum non purus.</p>
 
@@ -37,7 +37,7 @@
 
 <div class="container">
   <div class="wrapper">
-    <div class="container__body -narrow">
+    <div class="container__block -narrow">
       <h2>Heading Beta</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend faucibus rutrum. Cras congue tortor nec velit rutrum pharetra in porta dui. Aliquam sit amet enim aliquet orci lobortis scelerisque non quis urna. Nam rutrum, erat vel aliquet auctor, justo nulla bibendum purus, mollis venenatis lectus nisi nec lacus. Fusce et augue convallis, laoreet libero sed, aliquam turpis. Donec volutpat sed ex vel consequat. Aliquam dictum lectus a elit sagittis, non venenatis leo imperdiet. Phasellus nibh sapien, interdum ultricies euismod ut, rutrum non purus.</p>
     </div>
@@ -47,19 +47,19 @@
 <div class="container">
   <h2 class="heading -banner"><span>Step 1: Know It</span></h2>
   <div class="wrapper">
-    <div class="container__body -half">
+    <div class="container__block -half">
       <h1>Cats and dogs are popular pets in the U.S.</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend faucibus rutrum. Cras congue tortor nec velit rutrum pharetra in porta dui.</p>
     </div>
 
-    <div class="container__body -half">
+    <div class="container__block -half">
       <img src="http://placekitten.com/g/600/350">
     </div>
   </div>
 </div>
 
 <div class="container">
-  <div class="container__body">
+  <div class="container__block">
     <ul class="gallery -featured">
       <li>
       <article class="tile">
@@ -174,7 +174,7 @@
 
 <div class="container">
   <div class="wrapper">
-    <div class="container__body -narrow">
+    <div class="container__block -narrow">
       <h2>Facts About Animals</h2>
       <ul>
         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend faucibus rutrum.</li>
@@ -197,7 +197,7 @@
 <div class="container">
   <h2 class="heading -banner"><span>Step 4: Prove It</span></h2>
   <div class="wrapper">
-    <div class="container__body -narrow">
+    <div class="container__block -narrow">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend faucibus rutrum. Cras congue tortor nec velit rutrum pharetra in porta dui. Aliquam sit amet enim aliquet orci lobortis scelerisque non quis urna. Nam rutrum, erat vel aliquet auctor, justo nulla bibendum purus, mollis venenatis lectus nisi nec lacus. Fusce et augue convallis, laoreet libero sed, aliquam turpis. Donec volutpat sed ex vel consequat. Aliquam dictum lectus a elit sagittis, non venenatis leo imperdiet. Phasellus nibh sapien, interdum ultricies euismod ut, rutrum non purus.</p>
     </div>
   </div>