Fork me on GitHub

ilove.css

Grid

Grid divided in 6 columns, default width size is 960px, default column size is 960px/6

column1
column2
column3
column2
column2
column5
column1 
<div class="row">
   <div class="column5">
      ...
   </div>
   <div class="column1">
      ...
   </div>
</div>

Typography

Default font family is Helvetica Neue, Helvetica, Arial, the font-size is 12px, the line-height is 12px*1.3

Title h1

Title h2

Title h3

Title h4

Title h5
Title h6

I love css

by Pruteanu Alexandru

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

I love typography

by Pruteanu Alexandru

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum, mollit anim id est laborum, mollit anim id est laborum, mollit anim id est laborum, mollit anim id est laborum. 

<h1>...</h1>
<h2>...</h2>
   ...
<h5>...</h5>
<h6>...</h6>

<div class="column3 box">
   <h3>...</h3>
   <p>
      <em>by</em>
      <a href="#">P.Alex</a>
   </p>
   <p>
      Lorem ipsum ...
   </p>
</div>

<div class="column3 box gray">
   <h3>...</h3>
   <p>
      <em>by</em>
      <a href="#">P.Alex</a>
   </p>
   <p>
      Lorem ipsum ...
   </p>
</div>

Buttons

Normal

Press me Press me Press me Press me

Small

Press me Press me Press me Press me 
<a href="#" class="button">Press me</a>
<a href="#" class="button green">Press me</a>
<a href="#" class="button red">Press me</a>
<a href="#" class="button black">Press me</a>

<a href="#" class="button small">Press me</a>
<a href="#" class="button green small">Press me</a>
<a href="#" class="button red small">Press me</a>
<a href="#" class="button black small">Press me</a>

3D

Press me Press me Press me Press me

Round

Press me Press me Press me Press me 
<a href="#" class="button d3">Press me</a>
<a href="#" class="button green d3">Press me</a>
<a href="#" class="button red d3">Press me</a>
<a href="#" class="button black d3">Press me</a>

<a href="#" class="button round">Press me</a>
<a href="#" class="button green round">Press me</a>
<a href="#" class="button red round">Press me</a>
<a href="#" class="button black round">Press me</a>

Big

Press me Press me Press me Press me 
<a href="#" class="button big">Press me</a>
<a href="#" class="button green big">Press me</a>
<a href="#" class="button red big">Press me</a>
<a href="#" class="button black big">Press me</a>