CSS framework Examples Post using to Blogger ~ Easy HTML Tricks for Blogging

Yeah!! Milligram is amazing.

Unordered list item 1
Unordered list item 2

Ordered list item 1
Ordered list item 2

Description list item 1: Description list item 1.1

Name Age Range Comment

Send a copy to yourself

Name	Age	Height	Location
Stephen Curry	27	1,91	Akron, OH
Klay Thompson	25	2,01	Los Angeles, CA

.column

.column column-50 column-offset-25

10%

20%

25%

33%

40%

50%

60%

67%

75%

80%

90%

100%

the code

<link rel="apple-touch-icon" href="images/apple-touch-icon.png" sizes="180x180"><link rel="icon" href="images/favicon-32x32.png" sizes="32x32"><link rel="icon" href="images/favicon-16x16.png" sizes="16x16"><link rel="manifest" href="manifest.json"><link rel="image_src" href="images/thumbnail.png"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css">
<blockquote>
  <p><em>Yeah!! Milligram is amazing.</em></p>
</blockquote>

<a class="button" href="#">Default Button</a>


<button class="button button-outline">Outlined Button</button>


<input class="button button-clear" type="submit" value="Clear Button">

<ul>
  <li>Unordered list item 1</li>
  <li>Unordered list item 2</li>
</ul>


<ol>
  <li>Ordered list item 1</li>
  <li>Ordered list item 2</li>
</ol>


<dl>
  <dt>Description list item 1</dt>
  <dd>Description list item 1.1</dd>
</dl>

<form>
  <fieldset>
    <label for="nameField">Name</label>
    <input type="text" placeholder="CJ Patoilo" id="nameField">
    <label for="ageRangeField">Age Range</label>
    <select id="ageRangeField">
      <option value="0-13">0-13</option>
      <option value="14-17">14-17</option>
      <option value="18-23">18-23</option>
      <option value="24+">24+</option>
    </select>
    <label for="commentField">Comment</label>
    <textarea placeholder="Hi CJ …" id="commentField"></textarea>
    <div class="float-right">
      <input type="checkbox" id="confirmField">
      <label class="label-inline" for="confirmField">Send a copy to yourself</label>
    </div>
    <input class="button-primary" type="submit" value="Send">
<br>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Height</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Stephen Curry</td>
      <td>27</td>
      <td>1,91</td>
      <td>Akron, OH</td>
    </tr>
    <tr>
      <td>Klay Thompson</td>
      <td>25</td>
      <td>2,01</td>
      <td>Los Angeles, CA</td>
    </tr>
  </tbody>
</table>
  </fieldset>
</form>
<br>

<div class="container">

  <div class="row">
    <div class="column">.column</div>
    <div class="column">.column</div>
    <div class="column">.column</div>
    <div class="column">.column</div>
  </div>

  <div class="row">
    <div class="column">.column</div>
    <div class="column column-50 column-offset-25">.column column-50 column-offset-25</div>
  </div>

</div>

<br></br>
<div class="container">

  <div class="row">
    <div class="column column-10">10%</div>
  </div>

  <div class="row">
    <div class="column column-20">20%</div>
  </div>

  <div class="row">
    <div class="column column-25">25%</div>
  </div>

  <div class="row">
    
    <div class="column column-33">33%</div>
  </div>

  <div class="row">
    <div class="column column-40">40%</div>
  </div>

  <div class="row">
    <div class="column column-50">50%</div>
  </div>

  <div class="row">
    <div class="column column-60">60%</div>
  </div>

  <div class="row">
    
    <div class="column column-67">67%</div>
  </div>

  <div class="row">
    <div class="column column-75">75%</div>
  </div>

  <div class="row">
    <div class="column column-80">80%</div>
  </div>

  <div class="row">
    <div class="column column-90">90%</div>
  </div>

  <div class="row">
    <div class="column">100%</div>
  </div>
</div>