A project by Adi Purdila. Made for a Tuts+ course.
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> <!-- end col-quarter -->
<div class="col-quarter">
<div class="demo-col">.col-quarter</div>
</div> <!-- end col-quarter -->
<div class="col-half">
<div class="demo-col">.col-half</div>
</div> <!-- end col-half -->
</div> <!-- end row -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quo nihil architecto, qui modi at, accusantium optio laudantium consequuntur delectus facere non alias natus perspiciatis esse officiis eum hic nam tenetur enim ratione reiciendis eos quam. Facere minima porro, modi assumenda est inventore.
Eaque tempore nam, quam ipsa ducimus dolores quibusdam sint! Voluptate nobis nesciunt aspernatur alias expedita excepturi culpa atque dicta corrupti sed vitae deleniti labore nam cum, maiores dolorum amet sint veritatis, facilis iure dignissimos officia. Magni facilis amet blanditiis, laborum consectetur corrupti quia odit nobis minima maxime natus, quibusdam veritatis nostrum aut voluptates possimus vero ab! Fugiat.
.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. Numquam, natus?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque officia dicta omnis ipsam quos ad dolorem quisquam ratione. Voluptate, molestiae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi alias beatae cupiditate mollitia ullam facere illum, sed quos error, veritatis neque natus voluptatem facilis officiis harum esse, fuga quod ipsa.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, fuga.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam magni ducimus architecto laudantium placeat natus atque quia, ullam veniam necessitatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis nostrum amet ducimus tenetur, minus perferendis dolorem obcaecati odio, expedita molestias dolor, aliquid enim tempore harum doloribus. Rem, itaque perferendis voluptates.