Navigation
A Front-end pattern library for webdesigners made by Peter Ahlgren. Orinated from a course by Adi Purdila at Tuts+.
Here's a few code snippets that will explain how the grid works.
<div class="row">
<div class="col-quarter">
<div class="demo-col">.col-quarter</div>
</div> <!-- .col-quarter -->
<div class="col-quarter">
<div class="demo-col">.col-quarter</div>
</div> <!-- .col-quarter -->
<div class="col-half">
<div class="demo-col">.col-half</div>
</div> <!-- .col-half -->
</div> <!-- .row -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus id ligula vitae placerat. Donec ultrices venenatis nulla, quis euismod mi convallis condimentum. Aenean in tellus nec massa hendrerit tincidunt. Vestibulum commodo, magna nec semper lobortis, arcu augue ullamcorper leo, id pellentesque erat mauris non nisl.
Proin ac dui non augue tincidunt aliquet eu a diam. Sed eu risus imperdiet, varius eros at, congue augue. Nam viverra lacinia quam, a ullamcorper mauris tempus sit amet. Phasellus elementum, ante ut efficitur suscipit, neque odio accumsan massa, eu rutrum magna ex in neque. Suspendisse non nunc ante. Nulla interdum, arcu a ullamcorper rutrum, felis eros ullamcorper neque, ut accumsan ipsum lacus nec metus. Proin interdum ipsum nisi, vitae posuere nibh feugiat id.
.row:after {
content: "";
display: table;
clear: both;
}This is a blockquote.
Circle
Rounded
Square
Default
Large
Huge
Information
This is the body of the message!
Error
This is the body of the message!
Warning
This is the body of the message!
Success
This is the body of the message!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, fuga.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet laoreet risus a vulputate. Quisque sagittis urna vitae nisl lacinia molestie.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet laoreet risus a vulputate. Quisque sagittis urna vitae nisl lacinia molestie. Praesent vel enim nec arcu mattis rhoncus vel ut dolor.
