Skip to content

Commit

Permalink
Merge pull request #211 from buzzfeed/SOLID-208-improve-block-grid
Browse files Browse the repository at this point in the history 
change block grid to use calc
  • Loading branch information
@samthurman
samthurman committed Aug 25, 2015
2 parents 7fe1229 + 03a9915 commit 20aac8c
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 118 deletions.
198 changes: 87 additions & 111 deletions layout/block-grid.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,145 +4,121 @@

<p class="xs-mb2">The block grid is useful when you have a variable number of alike items that you need to present in a grid of various row lengths. The grid blocks are aligned vertically to the top of their rows. To achieve the layout, you use a <code class="js-highlight">block-grid xs-block-grid-n</code> wrapper (n goes from 1-6), and then give each inner block a class of <code class="js-highlight">block-grid-item</code>. Here's an example.</p>

<ul class="block-grid xs-block-grid-3 xs-mb4">

<li class="block-grid-item">
<div class="fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-06/27/11/campaign_images/webdr10/which-animal-matches-your-personality-2-22744-1435420255-2_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">Which Animal Matches Your Personality?</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, 3 weeks ago</p>
</div>
<div class="block-grid xs-block-grid-3 xs-mb4">

<div class="block-grid-item fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-06/27/11/campaign_images/webdr10/which-animal-matches-your-personality-2-22744-1435420255-2_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">Which Animal Matches Your Personality?</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, 3 weeks ago</p>
</div>
</li>
<li class="block-grid-item">
<div class="fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-07/7/19/campaign_images/webdr02/the-sorting-hat-quiz-hogwarts-2-16400-1436310166-16_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">This Quiz Is The Closest You'll Get To Putting On The Sorting Hat</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, One week ago</p>
</div>
</div>
<div class="block-grid-item fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-07/7/19/campaign_images/webdr02/the-sorting-hat-quiz-hogwarts-2-16400-1436310166-16_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">This Quiz Is The Closest You'll Get To Putting On The Sorting Hat</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, One week ago</p>
</div>
</li>
<li class="block-grid-item">
<div class="fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-06/27/11/campaign_images/webdr10/which-animal-matches-your-personality-2-22744-1435420255-2_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">Which Animal Matches Your Personality?</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, 3 weeks ago</p>
</div>
</div>
<div class="block-grid-item fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-06/27/11/campaign_images/webdr10/which-animal-matches-your-personality-2-22744-1435420255-2_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">Which Animal Matches Your Personality?</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, 3 weeks ago</p>
</div>
</li>
<li class="block-grid-item">
<div class="fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-07/7/19/campaign_images/webdr02/the-sorting-hat-quiz-hogwarts-2-16400-1436310166-16_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">This Quiz Is The Closest You'll Get To Putting On The Sorting Hat</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, One week ago</p>
</div>
</div>
<div class="block-grid-item fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-07/7/19/campaign_images/webdr02/the-sorting-hat-quiz-hogwarts-2-16400-1436310166-16_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">This Quiz Is The Closest You'll Get To Putting On The Sorting Hat</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, One week ago</p>
</div>
</li>
<li class="block-grid-item">
<div class="fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-06/27/11/campaign_images/webdr10/which-animal-matches-your-personality-2-22744-1435420255-2_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">Which Animal Matches Your Personality?</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, 3 weeks ago</p>
</div>
</div>
<div class="block-grid-item fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-06/27/11/campaign_images/webdr10/which-animal-matches-your-personality-2-22744-1435420255-2_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">Which Animal Matches Your Personality?</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, 3 weeks ago</p>
</div>
</li>
<li class="block-grid-item">
<div class="fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-07/7/19/campaign_images/webdr02/the-sorting-hat-quiz-hogwarts-2-16400-1436310166-16_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">This Quiz Is The Closest You'll Get To Putting On The Sorting Hat</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, One week ago</p>
</div>
</div>
<div class="block-grid-item fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-07/7/19/campaign_images/webdr02/the-sorting-hat-quiz-hogwarts-2-16400-1436310166-16_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">This Quiz Is The Closest You'll Get To Putting On The Sorting Hat</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, One week ago</p>
</div>
</li>
</ul>
</div>
</div>

<div class="xs-mb4 xs-pb4">

<pre><code class="html"><%='<ul class="block-grid xs-block-grid-3">'%>
<%='<li class="block-grid-item">Content goes here.</li>'%>
<%='<li class="block-grid-item">Content goes here.</li>'%>
<%='<li class="block-grid-item">Content goes here.</li>'%>
<%='</ul>'%></code></pre>
<pre><code class="html"><%='<div class="block-grid xs-block-grid-3">'%>
<%='<div class="block-grid-item">Content goes here.</div>'%>
<%='<div class="block-grid-item">Content goes here.</div>'%>
<%='<div class="block-grid-item">Content goes here.</div>'%>
<%='</div>'%></code></pre>

</div>

<h2 class="bold xs-mb1">Responsive Block Grid</h2>

<p class="xs-mb2">You can make the block grid responsive by simply adding our responsive breakpoint prepends to the <code class="js-highlight">xs-block-grid-n</code> class. So, for instance, if you wanted your grid to be four across at large, three across at medium and two across the rest of the way to mobile, you'd give your block grid container classes of <code class="js-highlight">block-grid xs-block-grid-2 md-block-grid-3 lg-block-grid-4</code>. With a result of:</p>

<ul class="block-grid xs-block-grid-2 md-block-grid-3 lg-block-grid-4 xs-mb4">
<div class="block-grid xs-block-grid-2 md-block-grid-3 lg-block-grid-4 xs-mb4">

<li class="block-grid-item">
<div class="fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-06/27/11/campaign_images/webdr10/which-animal-matches-your-personality-2-22744-1435420255-2_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">Which Animal Matches Your Personality?</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, 3 weeks ago</p>
</div>
<div class="block-grid-item fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-06/27/11/campaign_images/webdr10/which-animal-matches-your-personality-2-22744-1435420255-2_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">Which Animal Matches Your Personality?</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, 3 weeks ago</p>
</div>
</li>
<li class="block-grid-item">
<div class="fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-07/7/19/campaign_images/webdr02/the-sorting-hat-quiz-hogwarts-2-16400-1436310166-16_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">This Quiz Is The Closest You'll Get To Putting On The Sorting Hat</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, One week ago</p>
</div>
</div>
<div class="block-grid-item fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-07/7/19/campaign_images/webdr02/the-sorting-hat-quiz-hogwarts-2-16400-1436310166-16_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">This Quiz Is The Closest You'll Get To Putting On The Sorting Hat</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, One week ago</p>
</div>
</li>
<li class="block-grid-item">
<div class="fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-06/27/11/campaign_images/webdr10/which-animal-matches-your-personality-2-22744-1435420255-2_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">Which Animal Matches Your Personality?</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, 3 weeks ago</p>
</div>
</div>
<div class="block-grid-item fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-06/27/11/campaign_images/webdr10/which-animal-matches-your-personality-2-22744-1435420255-2_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">Which Animal Matches Your Personality?</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, 3 weeks ago</p>
</div>
</li>
<li class="block-grid-item">
<div class="fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-07/7/19/campaign_images/webdr02/the-sorting-hat-quiz-hogwarts-2-16400-1436310166-16_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">This Quiz Is The Closest You'll Get To Putting On The Sorting Hat</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, One week ago</p>
</div>
</div>
<div class="block-grid-item fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-07/7/19/campaign_images/webdr02/the-sorting-hat-quiz-hogwarts-2-16400-1436310166-16_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">This Quiz Is The Closest You'll Get To Putting On The Sorting Hat</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, One week ago</p>
</div>
</li>
<li class="block-grid-item">
<div class="fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-06/27/11/campaign_images/webdr10/which-animal-matches-your-personality-2-22744-1435420255-2_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">Which Animal Matches Your Personality?</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, 3 weeks ago</p>
</div>
</div>
<div class="block-grid-item fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-06/27/11/campaign_images/webdr10/which-animal-matches-your-personality-2-22744-1435420255-2_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">Which Animal Matches Your Personality?</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, 3 weeks ago</p>
</div>
</li>
<li class="block-grid-item">
<div class="fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-07/7/19/campaign_images/webdr02/the-sorting-hat-quiz-hogwarts-2-16400-1436310166-16_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">This Quiz Is The Closest You'll Get To Putting On The Sorting Hat</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, One week ago</p>
</div>
</div>
<div class="block-grid-item fill-white xs-border">
<img src="http://s3-static-ak.buzzfed.com/static/2015-07/7/19/campaign_images/webdr02/the-sorting-hat-quiz-hogwarts-2-16400-1436310166-16_wide.jpg">
<div class="xs-p1">
<h5 class="bold xs-mb1">This Quiz Is The Closest You'll Get To Putting On The Sorting Hat</h5>
<p class="text-6 text-gray--lighter">Javier Moreno, One week ago</p>
</div>
</li>
</ul>
</div>
</div>

<p class="xs-mb2">And the code:</p>

<div class="xs-mb4 xs-pb4">

<pre><code class="html"><%='<ul class="block-grid xs-block-grid-2 md-block-grid-3 lg-block-grid-4">'%>
<%='<li class="block-grid-item">Content goes here.</li>'%>
<%='<li class="block-grid-item">Content goes here.</li>'%>
<%='<li class="block-grid-item">Content goes here.</li>'%>
<%='</ul>'%></code></pre>
<pre><code class="html"><%='<div class="block-grid xs-block-grid-2 md-block-grid-3 lg-block-grid-4">'%>
<%='<div class="block-grid-item">Content goes here.</div>'%>
<%='<div class="block-grid-item">Content goes here.</div>'%>
<%='<div class="block-grid-item">Content goes here.</div>'%>
<%='</div>'%></code></pre>

</div>

Expand Down
18 changes: 11 additions & 7 deletions lib/block-grid/_block-grid.scss
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
.block-grid {
font-size: 0;
margin: 0 -.5rem;
margin: -.5rem;
padding: 0;
}

.block-grid-item {
display: inline-block;
font-size: 1rem;
padding: .5rem;
vertical-align: top;
margin: .5rem;
}

@function calc-margin($block-grid-width) {
@return calc(#{$block-grid-width} - 1rem);
}

@include generate-breakpoint-prefixes {
&block-grid-1 .block-grid-item { width: 100%; }
&block-grid-2 .block-grid-item { width: percentage(1/2); }
&block-grid-3 .block-grid-item { width: percentage(1/3); }
&block-grid-4 .block-grid-item { width: percentage(1/4); }
&block-grid-5 .block-grid-item { width: percentage(1/5); }
&block-grid-6 .block-grid-item { width: percentage(1/6); }
&block-grid-2 .block-grid-item { width: calc-margin(percentage(1/2)); }
&block-grid-3 .block-grid-item { width: calc-margin(percentage(1/3)); }
&block-grid-4 .block-grid-item { width: calc-margin(percentage(1/4)); }
&block-grid-5 .block-grid-item { width: calc-margin(percentage(1/5)); }
&block-grid-6 .block-grid-item { width: calc-margin(percentage(1/6)); }
}

0 comments on commit 20aac8c

Please sign in to comment.