Skip to content

Instantly share code, notes, and snippets.

@KatieK2
Last active August 29, 2015 14:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save KatieK2/5ea39585a8a362ce71c8 to your computer and use it in GitHub Desktop.
Save KatieK2/5ea39585a8a362ce71c8 to your computer and use it in GitHub Desktop.
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
<header id="masthead" class="site-header" role="banner">
Masthead<br />
Am et dictum<br />
enim nec<br />
mollis nisl<br />
</header><!-- #masthead -->
<div id="content" class="site-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, quam eget hendrerit posuere, ligula odio dictum est, a blandit diam est tincidunt lectus. Nam pellentesque, dui eu ullamcorper gravida, risus sem ornare mi, ac blandit lorem dui vitae augue. Vivamus fringilla ante at leo luctus ultricies. Duis ligula lacus, commodo nec odio bibendum, pulvinar lacinia arcu. Nulla ut dolor pharetra, pulvinar mi laoreet, sodales ex. Mauris volutpat metus ipsum. Nulla eget mattis dui. Maecenas non purus diam. Nullam sem tellus, auctor nec aliquam non, faucibus quis odio. Fusce sollicitudin vehicula aliquet. Nam vulputate eros nec posuere hendrerit. Aenean vitae quam eget eros placerat tempus et at nisl. Nullam pellentesque porta neque, at fringilla leo commodo sed.</p>
<p>Sed ante dui, varius id faucibus non, gravida id augue. Etiam quis varius urna, fringilla malesuada erat. Nulla et pretium tortor, eu varius nulla. In dapibus accumsan massa finibus accumsan. Proin dignissim orci libero, ut dapibus eros accumsan et. Praesent in molestie ex, eu molestie neque. Donec dui tortor, condimentum condimentum velit eget, ultrices tempor metus. Aenean finibus purus sit amet nisl cursus, ut blandit ex semper. Donec accumsan luctus odio. Donec feugiat dignissim euismod. Donec finibus dui consectetur, vestibulum lorem nec, porta elit. Fusce magna purus, cursus vel nulla id, feugiat imperdiet est. </p>
</div><!-- #content -->
<div id="colophon">
<p>Am et dictum enim, nec mollis nisl. Nullam quis enim dictum lacus tempus placerat vitae sit amet tellus. In hac habitasse platea dictumst. Nullam faucibus tortor vel orci porttitor, sed rhoncus sem feugiat. </p>
</div>
</div>
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// Bourbon (v4.0.2)
// Neat (v1.6.0)
// ----
@import "bourbon/bourbon";
@import "neat/neat";
#page {
@include outer-container;
#masthead { @include span-columns(3); }
#content { @include span-columns(9); @include omega; }
#colophon { @include span-columns(12); }
a.skip-link { display:none; }
}
/* outlines */
#page { outline: solid red 1px; }
#masthead { outline: solid blue 1px; }
#content { outline: solid green 1px; }
#colophon { outline: solid yellow 1px; }
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#page {
max-width: 68em;
margin-left: auto;
margin-right: auto;
}
#page:after {
content: "";
display: table;
clear: both;
}
#page #masthead {
float: left;
display: block;
margin-right: 2.35765%;
width: 23.23176%;
}
#page #masthead:last-child {
margin-right: 0;
}
#page #content {
float: left;
display: block;
margin-right: 2.35765%;
width: 74.41059%;
margin-right: 0;
}
#page #content:last-child {
margin-right: 0;
}
#page #colophon {
float: left;
display: block;
margin-right: 2.35765%;
width: 100%;
}
#page #colophon:last-child {
margin-right: 0;
}
#page a.skip-link {
display: none;
}
/* outlines */
#page {
outline: solid red 1px;
}
#masthead {
outline: solid blue 1px;
}
#content {
outline: solid green 1px;
}
#colophon {
outline: solid yellow 1px;
}
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
<header id="masthead" class="site-header" role="banner">
Masthead<br />
Am et dictum<br />
enim nec<br />
mollis nisl<br />
</header><!-- #masthead -->
<div id="content" class="site-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, quam eget hendrerit posuere, ligula odio dictum est, a blandit diam est tincidunt lectus. Nam pellentesque, dui eu ullamcorper gravida, risus sem ornare mi, ac blandit lorem dui vitae augue. Vivamus fringilla ante at leo luctus ultricies. Duis ligula lacus, commodo nec odio bibendum, pulvinar lacinia arcu. Nulla ut dolor pharetra, pulvinar mi laoreet, sodales ex. Mauris volutpat metus ipsum. Nulla eget mattis dui. Maecenas non purus diam. Nullam sem tellus, auctor nec aliquam non, faucibus quis odio. Fusce sollicitudin vehicula aliquet. Nam vulputate eros nec posuere hendrerit. Aenean vitae quam eget eros placerat tempus et at nisl. Nullam pellentesque porta neque, at fringilla leo commodo sed.</p>
<p>Sed ante dui, varius id faucibus non, gravida id augue. Etiam quis varius urna, fringilla malesuada erat. Nulla et pretium tortor, eu varius nulla. In dapibus accumsan massa finibus accumsan. Proin dignissim orci libero, ut dapibus eros accumsan et. Praesent in molestie ex, eu molestie neque. Donec dui tortor, condimentum condimentum velit eget, ultrices tempor metus. Aenean finibus purus sit amet nisl cursus, ut blandit ex semper. Donec accumsan luctus odio. Donec feugiat dignissim euismod. Donec finibus dui consectetur, vestibulum lorem nec, porta elit. Fusce magna purus, cursus vel nulla id, feugiat imperdiet est. </p>
</div><!-- #content -->
<div id="colophon">
<p>Am et dictum enim, nec mollis nisl. Nullam quis enim dictum lacus tempus placerat vitae sit amet tellus. In hac habitasse platea dictumst. Nullam faucibus tortor vel orci porttitor, sed rhoncus sem feugiat. </p>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment