Skip to content

Instantly share code, notes, and snippets.

@lukewatts
Last active December 23, 2015 04:51
Show Gist options
  • Save lukewatts/257161a52615f42e6890 to your computer and use it in GitHub Desktop.
Save lukewatts/257161a52615f42e6890 to your computer and use it in GitHub Desktop.
Mastering Sass: Chapter 03 - Columns. Generated by SassMeister.com.
.newspaper-article {
text-align: justify;
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-width: 15em;
-webkit-column-width: 15em;
column-width: 15em;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
column-gap: 2em;
-moz-column-rule: 1px solid #cccccc;
-webkit-column-rule: 1px solid #cccccc;
column-rule: 1px solid #cccccc;
}
<article class="newspaper-article">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat augue nibh, et lacinia neque rutrum et. Nunc vitae tellus in sem rhoncus feugiat eu vel nisl. Sed volutpat nibh non maximus aliquet. Vivamus porta, diam sed malesuada tincidunt, justo felis aliquam ligula, eget ornare est magna ut enim. Vestibulum eu lorem et augue eleifend placerat. Aliquam lacinia velit orci, id pellentesque quam aliquet ut. Fusce luctus scelerisque magna quis scelerisque. Suspendisse potenti. Sed aliquam dapibus tortor imperdiet ultrices. Nam tempor euismod nisi, quis congue metus sodales quis.</p>
<p>Nam ut auctor odio, a consectetur arcu. Pellentesque commodo auctor vehicula. Sed pulvinar, nibh nec porta condimentum, sapien enim finibus metus, vel egestas mi tortor eget leo. Duis suscipit ipsum massa, ut mattis libero laoreet interdum. Maecenas elementum faucibus vulputate. Sed ac convallis dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer velit ligula, mollis id pretium sagittis, feugiat quis felis. Nulla eget consequat mi. Fusce dapibus leo tellus, vitae auctor lectus commodo id. In hac habitasse platea dictumst. Duis porta nibh ac turpis blandit lobortis. Ut dui ex, lobortis quis massa quis, rutrum aliquet turpis.</p>
<p>In convallis dui eu euismod tempus. Cras commodo porttitor luctus. Praesent sed lorem massa. Curabitur pellentesque metus sed justo lobortis dapibus ut convallis nisl. Proin id dolor vel purus laoreet feugiat non at ipsum. Fusce a pharetra felis. Proin accumsan molestie dui, pretium ornare ipsum vulputate placerat. Cras et pharetra dolor.</p>
<p>Quisque et nibh at est varius euismod. Aliquam ut lectus elit. Sed venenatis tortor eu felis volutpat, at suscipit ex luctus. Fusce mollis ex lectus, eget ullamcorper ante ornare vitae. Cras tristique viverra elit, a dictum odio porttitor vel. Mauris scelerisque tellus vel urna porttitor, et rhoncus mi imperdiet. Phasellus elit libero, porta ut facilisis quis, sollicitudin et eros. Duis aliquam urna quis bibendum lacinia.</p>
<p>Aliquam dictum ornare finibus. Duis quis nisl et felis condimentum convallis at nec nunc. Aliquam ut porttitor ex. Mauris malesuada justo eu sapien posuere hendrerit. Cras consequat consequat aliquet. Praesent ultrices ex non sapien scelerisque scelerisque. Curabitur elementum facilisis elementum. Nullam velit massa, rhoncus sed quam nec, dictum rutrum massa. Maecenas ex lorem, sagittis et metus id, congue pellentesque neque. </p>
</article>
article.newspaper-article
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat augue nibh, et lacinia neque rutrum et. Nunc vitae tellus in sem rhoncus feugiat eu vel nisl. Sed volutpat nibh non maximus aliquet. Vivamus porta, diam sed malesuada tincidunt, justo felis aliquam ligula, eget ornare est magna ut enim. Vestibulum eu lorem et augue eleifend placerat. Aliquam lacinia velit orci, id pellentesque quam aliquet ut. Fusce luctus scelerisque magna quis scelerisque. Suspendisse potenti. Sed aliquam dapibus tortor imperdiet ultrices. Nam tempor euismod nisi, quis congue metus sodales quis.
p Nam ut auctor odio, a consectetur arcu. Pellentesque commodo auctor vehicula. Sed pulvinar, nibh nec porta condimentum, sapien enim finibus metus, vel egestas mi tortor eget leo. Duis suscipit ipsum massa, ut mattis libero laoreet interdum. Maecenas elementum faucibus vulputate. Sed ac convallis dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer velit ligula, mollis id pretium sagittis, feugiat quis felis. Nulla eget consequat mi. Fusce dapibus leo tellus, vitae auctor lectus commodo id. In hac habitasse platea dictumst. Duis porta nibh ac turpis blandit lobortis. Ut dui ex, lobortis quis massa quis, rutrum aliquet turpis.
p In convallis dui eu euismod tempus. Cras commodo porttitor luctus. Praesent sed lorem massa. Curabitur pellentesque metus sed justo lobortis dapibus ut convallis nisl. Proin id dolor vel purus laoreet feugiat non at ipsum. Fusce a pharetra felis. Proin accumsan molestie dui, pretium ornare ipsum vulputate placerat. Cras et pharetra dolor.
p Quisque et nibh at est varius euismod. Aliquam ut lectus elit. Sed venenatis tortor eu felis volutpat, at suscipit ex luctus. Fusce mollis ex lectus, eget ullamcorper ante ornare vitae. Cras tristique viverra elit, a dictum odio porttitor vel. Mauris scelerisque tellus vel urna porttitor, et rhoncus mi imperdiet. Phasellus elit libero, porta ut facilisis quis, sollicitudin et eros. Duis aliquam urna quis bibendum lacinia.
p Aliquam dictum ornare finibus. Duis quis nisl et felis condimentum convallis at nec nunc. Aliquam ut porttitor ex. Mauris malesuada justo eu sapien posuere hendrerit. Cras consequat consequat aliquet. Praesent ultrices ex non sapien scelerisque scelerisque. Curabitur elementum facilisis elementum. Nullam velit massa, rhoncus sed quam nec, dictum rutrum massa. Maecenas ex lorem, sagittis et metus id, congue pellentesque neque.
// ----
// Sass (v3.4.20)
// Compass (v1.0.3)
// ----
@import "compass"
.newspaper-article
text-align: justify
+column-count(4)
+column-width(15em)
+column-gap(2em)
+column-rule(1px solid darken(#fff, 20%))
@import "compass";
.newspaper-article {
text-align: justify;
@include column-count(4);
@include column-width(15em);
@include column-gap(2em);
@include column-rule(1px solid darken(#fff, 20%));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment