Pure Framework Tutorials

Pure Grid System

Pure is one of the popular front end framework. It only provides responsive css modules for your websites not js files.

Link of css file is http://yui.yahooapis.com/pure/0.5.0/pure-min.css.

Content

1. Grid System
2. Form
3. Button
4. Table
5. Menus
6. Creating Pure Template

1. Grid

Pure girds provide powerful and responsive grid using pure-g and pure-u-* classes. Based on size, pure grid classisfied in three types such as three column grid, 5ths-Based Units and 24ths-Based Units.

Grid With Three Columns

Code

<div class="pure-g" style="border:groove;">
 <div class="pure-u-1-3"><p>Thirds</p></div>
 <div class="pure-u-1-3"><p>Thirds</p></div>
 <div class="pure-u-1-3"><p>Thirds</p></div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-1-3" style="border:groove;">One</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-2-3" style="border:groove;">Two</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-3-3" style="border:groove;">Three</div>
</div>

Thirds

One

Two

Three

5ths Based units

Code

<div class="pure-g">
  <div class="grids-unit-bar pure-u-1-5" style="border:groove;">One</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-2-5" style="border:groove;">Two</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-3-5" style="border:groove;">Three</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-4-5" style="border:groove;">Four</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-5-5" style="border:groove;">Five</div>
</div>

One

Two

Three

Four

Five

24ths Based units

Code

<div class="pure-g">
  <div class="grids-unit-bar pure-u-1-24" style="border:groove;">1</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-2-24" style="border:groove;">2</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-3-24" style="border:groove;">3</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-4-24" style="border:groove;">4</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-5-24" style="border:groove;">5</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-6-24" style="border:groove;">6</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-7-24" style="border:groove;">7</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-8-24" style="border:groove;">8</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-9-24" style="border:groove;">9</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-10-24" style="border:groove;">10</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-11-24" style="border:groove;">11</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-12-24" style="border:groove;">12</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-13-24" style="border:groove;">13</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-14-24" style="border:groove;">14</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-15-24" style="border:groove;">15</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-16-24" style="border:groove;">16</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-17-24" style="border:groove;">17</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-18-24" style="border:groove;">18</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-19-24" style="border:groove;">19</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-20-24" style="border:groove;">20</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-21-24" style="border:groove;">21</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-22-24" style="border:groove;">22</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-23-24" style="border:groove;">23</div>
</div>
<div class="pure-g">
  <div class="grids-unit-bar pure-u-24-24" style="border:groove;">24</div>
</div>

2. Forms

Pure offers powerful form layout using pure-form class. By using Pure, we can create different style form like default form, stacked form, aligned form and multi-column form.

Pure form has different element properties suchas grouped inputs, input sizing, required inputs, disabled inputs, read-only inputs, rounded inputs, checkboxes and radio buttons.

Default Form

Code

<form class="pure-form">
  <fieldset>
    <legend>A compact inline form</legend>

    <input id="user" type="text" placeholder="Username">
    <input type="password" placeholder="Password">

    <label for="remember">
       <input id="remember" type="checkbox"> Remember me
    </label>
       <button type="submit" class="pure-button pure-button-primary">Login</button>
  </fieldset>
</form>

Stacked Form

Code

<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>A Stacked Form</legend>

		<label for="user">User Name</label>
        <input id="user" type="text" placeholder="Username">
		
        <label for="email">Email</label>
        <input id="email" type="email" placeholder="Email">

        <label for="password">Password</label>
        <input id="password" type="password" placeholder="Password">

        <label for="state">State</label>
        <select id="state">
            <option>Tamil Nadu</option>
            <option>Delhi</option>
            <option>Kerala</option>
        </select>
        <button type="submit" class="pure-button pure-button-primary">Register</button>
    </fieldset>
</form>

Multi Column Grid

Code

<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>Legend</legend>

        <div class="pure-g">
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="first-name">First Name</label>
                <input id="first-name" type="text">
            </div>

            <div class="pure-u-1 pure-u-md-1-3">
                <label for="last-name">Last Name</label>
                <input id="last-name" type="text">
            </div>
			
			<div class="pure-u-1 pure-u-md-1-3">
            <label for="name">Username</label>
            <input id="name" type="text" placeholder="Username">
			</div>
			
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="email">E-Mail</label>
                <input id="email" type="email" required>
            </div>

            <div class="pure-u-1 pure-u-md-1-3">
                <label for="city">City</label>
                <input id="city" type="text">
            </div>

            <div class="pure-u-1 pure-u-md-1-3">
                <label for="state">State</label>
                <select id="state" class="pure-input-1-3">
                    <option>Tamil Nadu</option>
                    <option>Delhi</option>
                    <option>Kerala</option>
                </select>
            </div>
        </div>

        <button type="submit" class="pure-button pure-button-primary">Submit</button>
    </fieldset>
</form>

Grouped Inputs

Code

<form class="pure-form">
    <fieldset class="pure-group">
        <input type="text" class="pure-input-1-3" placeholder="Username">
        <input type="text" class="pure-input-1-3" placeholder="Password">
        <input type="email" class="pure-input-1-3" placeholder="Email">
    </fieldset>

    <fieldset class="pure-group">
        <input type="text" class="pure-input-1-3" placeholder="Another Group">
        <input type="text" class="pure-input-1-3" placeholder="More Stuff">
    </fieldset>

    <button type="submit" class="pure-button pure-input-1-3 pure-button-primary">Sign in</button>
</form>

Input Sizing

Code

<form class="pure-form">
    <input class="pure-input-1" type="text" placeholder=".pure-input-1"><br>
    <input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br>
    <input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3"><br>
</form>

Checkboxes and Radios

Code

<form class="pure-form">
  <label for="option-one" class="pure-checkbox">
      <input id="option-one" type="checkbox" value="">
      Checkbox Option 
  </label>

  <label for="option-two" class="pure-radio">
      <input id="option-two" type="radio" name="optionsRadios" value="option1" checked>
      Radio Option 1
  </label>

  <label for="option-three" class="pure-radio">
       <input id="option-three" type="radio" name="optionsRadios" value="option2">
       Radio Option 2
  </label>
</form>

Input Properties

1. Required Inputs

Code

<form class="pure-form">
    <input type="email" placeholder="Requires an email" required>
</form>

2. Disabled Inputs

Code

<form class="pure-form">
    <input type="text" placeholder="Disabled input here..." disabled>
</form>

3. Read-Only Inputs

Code

<form class="pure-form">
    <input type="text" value="Readonly input here..." readonly>
</form>

4. Rounded Inputs

Code

<form class="pure-form">
    <input type="text" class="pure-input-rounded">
    <button type="submit" class="pure-button">Search</button>
</form>

3. Buttons

Pure Framework allows user to create buttons with different styles. It gives different styles like disabled buttons, active buttons, different colors and different sizes.

Code

<b id="dft-btn">Default Buttons</b>

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

<b id="disabled-btn">Disabled Buttons</b>

<a class="pure-button pure-button-disabled" href="#">Disabled Button</a>
<button class="pure-button pure-button-disabled">Disabled Button</button>

<b id="active-btn">Active Buttons</b>

<a class="pure-button pure-button-active" href="#">Active Button</a>
<button class="pure-button pure-button-active">Active Button</button>

<b id="primary-btn">Primary Buttons</b>

<a class="pure-button pure-button-primary" href="#">Primary Button</a>
<button class="pure-button pure-button-primary">Primary Button</button>

Default Buttons
Default Button
Disabled Buttons
Disabled Button
Active Buttons
Active Button
Primary Buttons
Primary Button
Button Colors

Code

<div>
    <style scoped>

        .button-success,
        .button-error,
        .button-warning,
        .button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }

        .button-success {
            background: rgb(28, 184, 65); /* this is a green */
        }

        .button-error {
            background: rgb(202, 60, 60); /* this is a maroon */
        }

        .button-warning {
            background: rgb(223, 117, 20); /* this is an orange */
        }

        .button-secondary {
            background: rgb(66, 184, 221); /* this is a light blue */
        }

    </style>


	<button class="button-success pure-button">Success Button</button>
    <button class="button-error pure-button">Error Button</button>
    <button class="button-warning pure-button">Warning Button</button>
    <button class="button-secondary pure-button">Secondary Button</button>
</div>

Button Sizes

Code

<div>
    <style scoped>

        .button-xsmall {
            font-size: 70%;
        }

        .button-small {
            font-size: 85%;
        }

        .button-large {
            font-size: 110%;
        }

        .button-xlarge {
            font-size: 125%;
        }

    </style>

    <button class="button-xsmall pure-button">Extra Small Button</button>
	<br /> <br />
    <button class="button-small pure-button">Small Button</button>
	<br /> <br />
    <button class="pure-button">Regular Button</button>
	<br /> <br />
    <button class="button-large pure-button">Large Button</button>
	<br /> <br />
    <button class="button-xlarge pure-button">Extra Large Button</button>
</div>

4. Tables

Pure allows user to create styled tables using pure-table class. This class gives padding and border to tables.

Default Table

Code

<div>
    <style scoped>

        .button-xsmall {
            font-size: 70%;
        }

        .button-small {
            font-size: 85%;
        }

        .button-large {
            font-size: 110%;
        }

        .button-xlarge {
            font-size: 125%;
        }

    </style>

    <button class="button-xsmall pure-button">Extra Small Button</button>
	<br /> <br />
    <button class="button-small pure-button">Small Button</button>
	<br /> <br />
    <button class="pure-button">Regular Button</button>
	<br /> <br />
    <button class="button-large pure-button">Large Button</button>
	<br /> <br />
    <button class="button-xlarge pure-button">Extra Large Button</button>
</div>

S.No.	Name	Age	Gender
1	Nazur	23	Male
2	Hussain	25	Male
3	Vasim	27	Male

Bordered Table

Code

<table class="pure-table pure-table-bordered">
    <thead>
        <tr>
            <th>S.No.</th>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>Nazur</td>
            <td>23</td>
            <td>Male</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Hussain</td>
            <td>25</td>
            <td>Male</td>
        </tr>

        <tr>
            <td>3</td>
            <td>Vasim</td>
            <td>27</td>
            <td>Male</td>
        </tr>
    </tbody>
</table>

S.No.	Name	Age	Gender
1	Nazur	23	Male
2	Hussain	25	Male
3	Vasim	27	Male

Table with Horizontal Borders

Code

<table class="pure-table pure-table-horizontal">
    <thead>
        <tr>
            <th>S.No.</th>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>Nazur</td>
            <td>23</td>
            <td>Male</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Hussain</td>
            <td>25</td>
            <td>Male</td>
        </tr>

        <tr>
            <td>3</td>
            <td>Vasim</td>
            <td>27</td>
            <td>Male</td>
        </tr>
    </tbody>
</table>

S.No.	Name	Age	Gender
1	Nazur	23	Male
2	Hussain	25	Male
3	Vasim	27	Male

Striped Table

Code

<table class="pure-table">
    <thead>
        <tr>
            <th>S.No.</th>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
        </tr>
    </thead>

    <tbody>
        <tr class="pure-table-odd">
            <td>1</td>
            <td>Nazur</td>
            <td>23</td>
            <td>Male</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Hussain</td>
            <td>25</td>
            <td>Male</td>
        </tr>

        <tr class="pure-table-odd">
            <td>3</td>
            <td>Vasim</td>
            <td>27</td>
            <td>Male</td>
        </tr>
    </tbody>
</table>

S.No.	Name	Age	Gender
1	Nazur	23	Male
2	Hussain	25	Male
3	Vasim	27	Male

Menus in pure is created by pure-menu. pure-menu-horizontal class creates menus in horizontally.

Default Menus

Code

<pre class="prettyprint">
 </pre>
<div class="pure-menu pure-menu-open pure-menu-horizontal">
    <ul>
        <li class="pure-menu-selected"><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About US</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Contact US</a></li>
    </ul>
</div>

Menu with Headings

Code

<div class="pure-menu pure-menu-open pure-menu-horizontal">
  <a href="#" class="pure-menu-heading">Website Name</a>
    <ul>
        <li class="pure-menu-selected"><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About US</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Contact US</a></li>
    </ul>
</div>

Vertical Menu

Code

<div class="pure-g">
  <div class="grids-unit-bar pure-u-1-6">

<div class="pure-menu pure-menu-open">
  <a href="#" class="pure-menu-heading">IEATCSS</a>
    <ul>
        <li class="pure-menu-selected"><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About US</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Contact US</a></li>
		<li class="pure-menu-heading">More!</li>
        <li><a href="#">Chats</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Games</a></li>
    </ul>
</div>
</div>
</div>

Output

Menu with Disabled Items

Code

<div class="pure-menu pure-menu-open pure-menu-horizontal">
    <a href="#" class="pure-menu-heading">Site Title</a>

    <ul>
        <li class="pure-menu-selected"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Faq</a></li>
        <li class="pure-menu-disabled"><a href="#">Contact</a></li>
    </ul>
</div>

6. Creating Pure Template

Steps to create this template.

Step 1: Creating Navbar
Step 2: Creating body
Step 3: Creating Sidebar
Step 4: Creating footer

Next Lesson > Creating Pure Template

Pure Grid System

Content

1. Grid

Code

Code

Code

2. Forms

Code

Code

Multi Column Grid

Code

Code

Code

Code

Input Properties

Code

Code

Code

Code

3. Buttons

Code

Code

Code

4. Tables

Code

Code

Code

Code

5. Menus

Code

Code

Code

Output

Code

6. Creating Pure Template