Toggle Debug Mode

rawr!

design for dinosaurs

get rawr from github

a framework by ian jennings

About rawr

Rawr is a less framework that helps engineering type people create good looking websites quickly. Rawr uses the power of standardized margins to create a consistent and pixel perfect look.

Rawr includes the following features:

The Box Model

Every element in HTML can be thought of as a box. It really doesn't matter what element we're talking about, everything from a p to a img is treated like a box when working with rawr:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec blandit felis. Praesent luctus eros eu ipsum commodo varius. Donec odio lacus, ornare at vehicula eu, pharetra ut arcu. Vestibulum rutrum, quam non dictum luctus, lacus ipsum interdum urna, eget congue risus eros sed odio. Nulla facilisi. Sed eu odio sem.

an image

As you can see, ever element has the same margins and the same padding. Keeping every element consistent makes design very predictable. We use standardized and equal margins to make every element look good without much work at all!

The key to keeping things standard is a feature of CSS known as margin collapse. When vertical margins collide, they collapse into each other and only the larger margin value is used. With rawr, every element has the same standardized margins by default.

Click on the "Toggle Debug" botton on the right side of the screen to see the margins of this page (and yours too!) at anytime.

Mixing It Up

Rawr includes two classes to scale the margins (and in some cases padding) of elements.

  • .small cuts spacing in half
  • .large doubles spacing.

Once we understand that all elements have the same margins, we can use a few tricks to bring attention to special elements.

  1. Big elements grab attention

    Bigger elements take up more real estate and are easy to notice
    an image

  2. Elements that are close together form groups

    The less distance between elements the more related they are
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image
    • an image

  3. We can use visual cues for everything else

    Treating other elements the same helps focus on the visual differences
    • an image
    • an image
    • an image

These tricks come from a set of visual perception theories called the Gestalt Principles.

Gestalt is a psychology term which means "unified whole". It refers to theories of visual perception developed by German psychologists in the 1920s. These theories attempt to describe how people tend to organize visual elements into groups or unified wholes when certain principles are applied.

Grid System Rows and columns

Common Grid Layouts

.span5
.span11
.span4
.span6
.span6
.span8
.span8
.span-one-third
.span-one-third
.span-one-third
.span-one-third
.span-two-thirds

Code

Two Equal Columns Layout
<div class="row">
    <div class="span8">
    <div class="solid box">8</div>
    </div>
    <div class="span8">
    <div class="solid box">8</div>
    </div>
    </div>

Notes

  • Rawr uses a 16 column span with .spanX style classes
  • A .rowis a horizontal groupings of .spanX containers. It is OK if they exceed 16 units, they'll just wrap
  • .rows can be nested within .spanX classes, but not within any element that has padding.

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Code

<h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

Paragraphs And Content

A witty .title A .small witty subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet diam eu sapien consectetur id consectetur justo consequat. Quisque commodo, purus ut dignissim fringilla, enim odio feugiat arcu, eu vestibulum leo nibh eget velit. Phasellus dictum gravida faucibus. Vestibulum eleifend ligula non eros iaculis eu ultricies lectus varius. Phasellus accumsan iaculis lectus ac ultrices. Quisque a urna mauris. Nam turpis justo, volutpat non rhoncus id, viverra quis orci. Phasellus laoreet fringilla nibh, in commodo massa tristique nec. .

Code

<h3 class="title">
    A witty .title 
    <small>
    A .small witty subtitle
    </small>
    </h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet diam eu sapien consectetur id consectetur justo consequat. Quisque commodo, purus ut dignissim fringilla, enim odio feugiat arcu, eu vestibulum leo nibh eget velit. Phasellus dictum gravida faucibus. Vestibulum eleifend ligula non eros iaculis eu ultricies lectus varius. Phasellus accumsan iaculis lectus ac ultrices. Quisque a urna mauris. Nam turpis justo, volutpat non rhoncus id, viverra quis orci. Phasellus laoreet fringilla nibh, in commodo massa tristique nec. .</p>

Header, Nav, and HGroup

Heading 1 (in hgroup)

Heading 2 (in hgroup)

Code

<header>
    <hgroup>
    <h1>Heading 1 (in hgroup)</h1>
    <h2>Heading 2 (in hgroup)</h2>
    </hgroup>
    <nav>
    <ul>
        <li>
            <a href="#">
                navigation item #1
            </a>
            </li>
        <li>
            <a href="#">
                navigation item #2
            </a>
            </li>
        <li>
            <a href="#">
                navigation item #3
            </a>
        </li>
    </ul>
    </nav>
    </header>

Text

Address: somewhere, world

The a element example
The a.invert element example
The .muted with link example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The img element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The var element example
The u element example

Code

<address>Address: somewhere, world</address>
    <p>
    The <a href="#">a element</a> example<br>
    The <a href="#" class="invert">a.invert element</a> example<br>
    <span class="muted">The .muted <a href="#">with link</a> example</span> <br>
    The <abbr>abbr element</abbr> and <abbr title="Title text">abbr element with title</abbr> examples<br>
    The <b>b element</b> example<br>
    The <cite>cite element</cite> example<br>
    The <code class="prettyprint">code element</code> example<br>
    The <del>del element</del> example<br>
    The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples<br>
    The <em>em element</em> example<br>
    The <i>i element</i> example<br>
    The img element <img src="http://placekitten.com/16/16" alt=""> example<br>
    The <ins>ins element</ins> example<br>
    The <kbd>kbd element</kbd> example<br>
    The <mark>mark element</mark> example<br>
    The <q>q element <q>inside</q> a q element</q> example<br>
    The <s>s element</s> example<br>
    The <samp>samp element</samp> example<br>
    The <small>small element</small> example<br>
    The <span>span element</span> example<br>
    The <strong>strong element</strong> example<br>
    The <sub>sub element</sub> example<br>
    The <sup>sup element</sup> example<br>
    The <var>var element</var> example<br>
    The <u>u element</u> example
    </p>

Dividers

A witty .title

Code

<h3 class="title">A witty .title </h3>
    <hr class="large space" />
    <hr />
    <hr class="space" />
    <hr class="small space" />

Invisible Box

Dinosaur History

Origins

Dinosaurs diverged from their archosaur ancestors approximately 230 million years ago during the Middle to Late Triassic period, roughly 20 million years after the Permian–Triassic extinction event wiped out an estimated 95% of all life on Earth.

Evolution

Dinosaur evolution after the Triassic follows changes in vegetation and the location of continents. In the Late Triassic and Early Jurassic, the continents were connected as the single landmass Pangaea, and there was a worldwide dinosaur fauna mostly composed of coelophysoid carnivores and prosauropod herbivores.

Code

<article>
    <h3>Dinosaur History</h3>
    <section>
    <h4>Origins</h4>
    <p>Dinosaurs diverged from their archosaur ancestors approximately 230 million years ago during the Middle to Late Triassic period, roughly 20 million years after the Permian–Triassic extinction event wiped out an estimated 95% of all life on Earth.</p>
    </section>
    <section>
    <h4>Evolution</h4>
    <p>Dinosaur evolution after the Triassic follows changes in vegetation and the location of continents. In the Late Triassic and Early Jurassic, the continents were connected as the single landmass Pangaea, and there was a worldwide dinosaur fauna mostly composed of coelophysoid carnivores and prosauropod herbivores.</p>
    </section>
    </article>

Solid Box

Dinosaur History

Origins

Dinosaurs diverged from their archosaur ancestors approximately 230 million years ago during the Middle to Late Triassic period, roughly 20 million years after the Permian–Triassic extinction event wiped out an estimated 95% of all life on Earth.

Evolution

Dinosaur evolution after the Triassic follows changes in vegetation and the location of continents. In the Late Triassic and Early Jurassic, the continents were connected as the single landmass Pangaea, and there was a worldwide dinosaur fauna mostly composed of coelophysoid carnivores and prosauropod herbivores.

Code

<div class="large solid box">
    <article>
    <h3>Dinosaur History</h3>
    <section>
        <h4>Origins</h4>
        <p>Dinosaurs diverged from their archosaur ancestors approximately 230 million years ago during the Middle to Late Triassic period, roughly 20 million years after the Permian–Triassic extinction event wiped out an estimated 95% of all life on Earth.</p>
    </section>
    <section>
        <h4>Evolution</h4>
        <p>Dinosaur evolution after the Triassic follows changes in vegetation and the location of continents. In the Late Triassic and Early Jurassic, the continents were connected as the single landmass Pangaea, and there was a worldwide dinosaur fauna mostly composed of coelophysoid carnivores and prosauropod herbivores.</p>
    </section>
    </article>
    </div>

Groups

Ordered List

  1. list item 1
  2. list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1

Code

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

Unordered List

  • list item 1
  • list item 1
    • list item 2
    • list item 2
      • list item 3
      • list item 3
    • list item 2
    • list item 2
  • list item 1
  • list item 1

Code

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

Unstyled List

  • list item 1
  • list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  • list item 1
  • list item 1

Code

<ul class="unstyled">
    <li>list item 1</li>
    <li>list item 1
    <ol>
        <li>list item 2</li>
        <li>list item 2
            <ol>
                <li>list item 3</li>
                <li>list item 3</li>
            </ol>
        </li>
        <li>list item 2</li>
        <li>list item 2</li>
    </ol>
    </li>
    <li>list item 1</li>
    <li>list item 1</li>
    </ul>

Description List

Description name
Description value
Description name
Description value
Description value
Description name
Description name
Description value

Code

<dl>
    <dt>Description name</dt>
    <dd>Description value</dd>
    <dt>Description name</dt>
    <dd>Description value</dd>
    <dd>Description value</dd>
    <dt>Description name</dt>
    <dt>Description name</dt>
    <dd>Description value</dd>
    </dl>

Paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

Code

<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.
    </p>

Preformatted Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.

Code

<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</pre>

Code (with prittyprint)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.

Code

<pre><code class="prettyprint">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</code></pre>

Blockquote

Even better philosophical quote marked up with just a <blockquote> element.

Code

<blockquote>
    Even better philosophical quote marked up with just a &lt;blockquote> element.
    </blockquote>

Blockquote with Paragraph

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

Code

<blockquote>
    <p>
    Some sort of famous witty quote marked up with a &lt;blockquote> and a child &lt;p> element.
    </p>
    </blockquote>

Spaced List

  • an image
  • an image
  • an image

Code

<ul class="unstyled spaced dinos">
    <li>
    <img src="static/images/2.png" class="inline normal dino" />
    </li>
    <li>
    <img src="static/images/3.png" class="inline normal dino" />
    </li>
    <li>
    <img src="static/images/4.png" class="inline normal dino" />
    </li>
    </ul>

Gallery

  • an image
  • an image
  • an image
  • an image
  • an image
  • an image
  • an image
  • an image
  • an image

Code

<ul class="dinos gallery">
    <li>
    <img src="static/images/1.png" class="normal dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="normal dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="normal dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="normal dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="normal dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="normal dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="normal dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="normal dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="normal dino" />
    </li>
    </ul>

Small Gallery

  • an image
  • an image
  • an image
  • an image
  • an image
  • an image
  • an image
  • an image
  • an image
  • an image
  • an image
  • an image

Code

<ul class="small dinos gallery">
    <li>
    <img src="static/images/1.png" class="small dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="small dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="small dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="small dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="small dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="small dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="small dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="small dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="small dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="small dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="small dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="small dino" />
    </li>
    </ul>

Inline Gallery

Dinos!

  • an image
  • an image
  • an image
  • an image
  • an image
  • an image

View All Dinos

Code

<h3>Dinos!</h3>
    <ul class="inline dinos gallery">
    <li>
    <img src="static/images/1.png" class="normal dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="normal dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="normal dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="normal dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="normal dino" />
    </li>
    <li>
    <img src="static/images/1.png" class="normal dino" />
    </li>
    </ul>
    <p>
    <a href="#">View All Dinos</a>
    </p>

Pill List

Code

<ul class="unstyled spaced">
    <li>
    <a href="#" class="inline selected pill">
        Home
    </a>
    </li>
    <li>
    <a href="#" class="inline pill">
        Profile
    </a>
    </li>
    <li>
    <a href="#" class="inline pill">
        Friends
    </a>
    </li>
    </ul>

Pills Gallery List

Code

<ul class="gallery">
    <li>
    <a href="#" class="selected pill">
       Home
    </a>
    </li>
    <li>
    <a href="#" class="pill">
        Profile
    </a>
    </li>
    <li>
    <a href="#" class="pill">
        Friends
    </a>
    </li>
    </ul>

Button List

Code

<ul class="buttons spaced unstyled">
    <li>
    <a href="#" class="inline commit button">
        Commit
    </a> 
    &#8212; save something</li>
    <li>
    <a href="#" class="inline discard button">
        Discard
    </a> 
    &#8212; remove something
    </li>
    <li>
    <a href="#" class="inline explain button">
        Explain
    </a>
    &#8212; explain something
    </li>
    <li>
    <a href="#" class="inline action button">
        Action
    </a>
    &#8212; do something like "sign up" or "create new post"
    </li>
    <li>
    <a href="#" class="inline button">
        Default
    </a> 
    &#8212; do something else
    </li>
    </ul>

Buttons Gallery List

Code

<ul class="gallery">
    <li>
    <a href="#" class="commit button">
        Create
    </a>
    </li>
    <li>
    <a href="#" class="discard button">
        Delete
    </a>
    </li>
    <li>
    <a href="#" class="explain button">
        Help
    </a>
    </li>
    <li>
    <a href="#" class="action button">
        View
    </a>
    </li>
    <li>
    <a href="#" class="button">
        Close
    </a>
    </li>
    </ul>

Inline Button

Follow Me On Twitter!

Keep up to date with the latest on rawr by following me on twitter!

Follow @meetjennings On Twitter

Code

<div class="solid box">
    <h4>Follow Me On Twitter!</h4>
    <p>
    Keep up to date with the latest on <strong>rawr</strong> by following me on twitter!
    </p>
    <p>
    <a href="http://twitter.com/meetjennings" class="inline button action">Follow @meetjennings On Twitter</a>
    </p>
    </div>

Sign in or Create Account

You should probably Sign In or Create an Account

Code

<p>
    You should probably <a href="#" class="inline button">Sign In</a> or <a href="#" class="inline commit button">Create an Account</a>
    </p>

Left Right Alignment

Forgot Password?

Code

<div class="left-right">
    <div class="left">
    <p>
        <a href="#">Forgot Password?
    </a>
    </p>
    </div>
    <div class="right">
    <ul class="buttons gallery float-right">
        <li>
            <a href="#" class="action button">
                Sign In
            </a>
        </li>
        <li>
            <a href="#" class="button">
                Close
            </a>
        </li>
    </ul>
    </div>
    </div>

Sign In

Sign In

Code

<div class="solid box">
    <form class="wide">
    <p>
        <label for="ic">Username</label>
        <input id="username" type="text">
    </p>
    <p>
        <label for="in">Password</label>
        <input id="password" type="password">
    </p>
    <p>
        <label class="muted">Lets Go!</label>
        <a href="#" class="inline button action">Sign In</a>
    </p>
    </form>
    </div>

Media

Image

Code

<img src="http://placekitten.com/100/100" alt="">

Media Image

Code

<a href="#">
    <img src="http://placekitten.com/100/100" alt="" class="media">
    </a>

Media Image Gallery

Code

<ul class="gallery">
    <li>
    <a href="#">
        <img src="http://placekitten.com/100/100" alt="" class="media">
    </a>
    </li>
    <li>
    <a href="#">
        <img src="http://placekitten.com/100/100" alt="" class="media">
    </a>
    </li>
    <li>
    <a href="#">
        <img src="http://placekitten.com/100/100" alt="" class="media">
    </a>
    </li>
    <li>
    <a href="#">
        <img src="http://placekitten.com/100/100" alt="" class="media">
    </a>
    </li>
    <li>
    <a href="#">
        <img src="http://placekitten.com/100/100" alt="" class="media">
    </a>
    </li>
    <li>
    <a href="#">
        <img src="http://placekitten.com/100/100" alt="" class="media">
    </a>
    </li>
    <li>
    <a href="#">
        <img src="http://placekitten.com/100/100" alt="" class="media">
    </a>
    </li>
    <li>
    <a href="#">
        <img src="http://placekitten.com/100/100" alt="" class="media">
    </a>
    </li>
    </ul>
    </div>

Hidden Elements

Code

<p>
    <p hidden>This should be hidden in all browsers, apart from IE6</p>
    </p>

SVG

Code

<svg width="100px" height="100px">
    <circle cx="100" cy="100" r="100" fill="#ff0000" />
    </svg>

Audio

Code

<div class="example box">
    <audio controls></audio>
    </div>

Video

Code

<div class="example box">
    <video controls></video>
    </div>

Figure & Figcaption

Figcaption content

Code

<figure>
    <img src="http://placekitten.com/400/200" alt="">
    <figcaption>Figcaption content</figcaption>
    </figure>

Table

Jimi Hendrix - albums
Album Year Price
Album Year Price
Are You Experienced 1967 $10.00
Axis: Bold as Love 1967 $12.00
Electric Ladyland 1968 $10.00
Band of Gypsys 1970 $12.00

Code

<table>
    <caption>Jimi Hendrix - albums</caption>
    <thead>
    <tr>
        <th>Album</th>
        <th>Year</th>
        <th>Price</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>Album</th>
        <th>Year</th>
        <th>Price</th>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td>Are You Experienced</td>
        <td>1967</td>
        <td>$10.00</td>
    </tr>
    <tr>
        <td>Axis: Bold as Love</td>
        <td>1967</td>
        <td>$12.00</td>
    </tr>
    <tr>
        <td>Electric Ladyland</td>
        <td>1968</td>
        <td>$10.00</td>
    </tr>
    <tr>
        <td>Band of Gypsys</td>
        <td>1970</td>
        <td>$12.00</td>
    </tr>
    </tbody>
    </table>

Forms

Form

A Form

Code

<form>
    <fieldset>
    <legend>A Form</legend>
    <p>
        <label for="ic">
            Color input
        </label> 
        <input type="color" id="ic" value="#000000">
    </p>
    <p>
        <label for="in">
            Number input
        </label>
        <input type="number" id="in" min="0" max="10" value="5">
    </p>
    <p>
        <label for="ir">
            Range input
        </label>
        <input type="range" id="ir" value="10">
    </p>
    <p>
        <label for="idd">
            Date input
        </label>
        <input type="date" id="idd" value="1970-01-01">
    </p>
    <p>
        <label for="idm">
            Month input
        </label>
        <input type="month" id="idm" value="1970-01">
    </p>
    <p>
        <label for="idw">
            Week input
        </label>
        <input type="week" id="idw" value="1970-W01">
    </p>
    <p>
        <label for="idt">
            Datetime input
        </label>
        <input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
    </p>
    <p>
        <label for="idtl">
            Datetime-local input
        </label>
        <input type="datetime-local" id="idtl" value="1970-01-01T00:00">
    </p>

    <p>
        <label for="irb">
            Radio input
        </label>
        <input type="radio" id="irb" name="rad">
    </p>
    <p>
        <label for="icb">
            Checkbox input
        </label>
        <input type="checkbox" id="icb">
    </p>
    <p>
        <input type="radio" id="irb2" name="rad">
        <label for="irb2">
            Radio input
        </label>
    </p>
    <p>
        <input type="checkbox" id="icb2">
        <label for="icb2">
            Checkbox input
        </label>
    </p>

    <p>
        <label for="s">
            Select field
        </label>
        <select id="s">
            <option>Option 01</option>
            <option>Option 02</option>
        </select>
    </p>
    <p>
        <label for="t">
            Textarea
        </label>
        <textarea id="t" cols="30" rows="5" >
            Textarea text
        </textarea>
    </p>
    </fieldset>
    </form>

Wide Form

Inputs as siblings of labels

Code

<form class="wide">
    <fieldset>
    <legend>Inputs as siblings of labels</legend>
    <p>
        <label for="ic">
            Color input
        </label> 
        <input type="color" id="ic" value="#000000">
    </p>
    <p>
        <label for="in">
            Number input
        </label> 
        <input type="number" id="in" min
        ="0" max="10" value="5">
    </p>
    <p><label for="ir">
        Range input
    </label> 
    <input type="range" id="ir" value="10">
    </p>
    <p>
        <label for="idd">
            Date input
        </label> 
        <input type="date" id="idd" value="1970-01-01">
    </p>
    <p>
        <label for="idm">
            Month input
        </label> 
        <input type="month" id="idm" value="1970-01">
    </p>
    <p>
        <label for="idw">
            Week input
        </label> 
        <input type="week" id="idw" value="1970-W01">
    </p>
    <p>
        <label for="idt">
            Datetime input
        </label> 
        <input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
    </p>
    <p>
        <label for="idtl">
            Datetime-local input
        </label> 
        <input type="datetime-local" id="idtl" value="1970-01-01T00:00">
    </p>

    <p>
        <label for="irb">
            Radio input
        </label> 
        <input type="radio" id="irb" name="rad">
    </p>
    <p>
        <label for="icb">
            Checkbox input
        </label> 
        <input type="checkbox" id="icb">
    </p>

    <p>
        <label for="s">
            Select field
        </label> 
        <select id="s"><option>Option 01</option><option>Option 02</option></select>
    </p>
    <p>
        <label for="t">
            Textarea
        </label> 
        <textarea id="t" cols="30" rows="5" >Textarea text</textarea>
    </p>
    </fieldset>
    </form>

Buttons

Clickable inputs and buttons

Code

<fieldset>
    <legend>Clickable inputs and buttons</legend>
    <p>
    <input class="inline" type="image" src="http://placekitten.com/90/24" alt="Image (input)">
    </p>
    <p>
    <input class="inline" type="reset" value="Reset (input)">
    </p>
    <p>
    <input class="inline" type="button" value="Button (input)">
    </p>
    <p>
    <input class="inline" type="submit" value="Submit (input)">
    </p>

    <p>
    <button class="inline" type="reset">Reset (button)</button>
    </p>
    <p>
    <button class="inline" type="button">Button (button)</button>
    </p>
    <p>
    <button class="inline" type="submit">Submit (button)</button>
    </p>
    </fieldset>

About

Rawr was developed during the creation of Hacker League by Ian Jennings.

Major credit goes to Johan Ronsse for this awesome talk he gave that inspired the project. Other major influences are Twitter Bootstrap and the 960.gs.

Cross browser styles supplied by Less Elements and everything acts normal thanks to normalize.css.