ThodaCSS

~Documentation

Headings and paragraphs

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Those were headings. And this is a how a paragraph is styled.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Those were headings. And this is a how a paragraph is styled.</p>

Buttons

Anchor element
Large button
Green button Blue button Red button
Large green button Large blue button Large red button
Small green button Small blue button Small red button 
<div>
    <a class="btn">Anchor element</a>
    <button class="btn">Button element</button>
    <input type="submit" class="btn" value="Submit form element">
    <input type="button" class="btn" value="Button form element">
</div>
<div>
    <a class="btn btn-large">Large button</a>
</div>
<div>
    <a class="btn btn-green">Green button</a>
    <a class="btn btn-blue">Blue button</a>
    <a class="btn btn-red">Red button</a>
</div>
<div>
    <a class="btn btn-large btn-green">Large green button</a>
    <a class="btn btn-large btn-blue">Large blue button</a>
    <a class="btn btn-large btn-red">Large red button</a>
</div>
<div>
    <a class="btn btn-small btn-green">Small green button</a>
    <a class="btn btn-small btn-blue">Small blue button</a>
    <a class="btn btn-small btn-red">Small red button</a>
</div>

Grid

1/12
11/12
2/12
10/12
3/12 (offset 2/12)
7/12
5/12
6/12 (offset 1/12)
<div class="row">
    <div class="col-1-12 text-center">1/12</div>
    <div class="col-11-12 text-center">11/12</div>
</div>
<div class="row">
    <div class="col-2-12 text-center">2/12</div>
    <div class="col-10-12 text-center">10/12</div>
</div>
<div class="row">
    <div class="col-3-12 col-offset-2-12 text-center">3/12 (offset 2/12)</div>
    <div class="col-7-12 text-center">7/12</div>
</div>
<div class="row">
    <div class="col-5-12 text-center">5/12</div>
    <div class="col-6-12 col-offset-1-12 text-center">6/12 (offset 1/12)</div>
</div>

Tables

Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9 
<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
    ...
</table>
Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9
Cell 10 Cell 11 Cell 12
Cell 13 Cell 14 Cell 15 
<table class="full-width text-center striped">
...
<table>

Forms

Inline forms

<form>
    <label>First name: <input type="text"></label>
    <label>Last name: <input type="text"></label>
    <input type="submit">
</form>

Block forms

<form class="block">
    ...
</form>

Full width forms

<form class="block full-width">
    <label>First name: <input type="text"></label>
    <label>Last name: <input type="text"></label>
    <label>Additional information:</label>
    <textarea>Hello, world!</textarea>
    <div class="text-right">
        <button class="btn-red">Cancel</button>
        <input type="submit" class="btn-blue">
    </div>
</form>

Hero Unit

A hero unit should be the immediate child of the body element. 

<div class="hero">
    <div class="hero-content">
        <h1>Page Title</h1>
        <p class="tagline">Some cool tagline.</p>
</div>

Utility classes

Clearfloat

<div class="cf">
    ...
</div>

Well

Some piece of text.

<div class="well">
    <p>Some piece of text.</p>
</div>

Floats

Float right Float left 
<div class="cf">
    <span class="well pull-right">Float right</span>
    <span class="well pull-left">Float left</span>
</div>

Text alignment

Left aligned text.

Right aligned text.

This is a really long, extremely stretched out piece of text in order for the justified text alignment to actually come into effect. Another couple of sentences should probably do the trick. This much, I hope, will be enough. Maybe one more, for good luck. Okay, fine: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pulvinar purus justo, eu sagittis quam condimentum in. Sed non leo metus. Nam varius tincidunt fringilla.

<p class="well text-left">Left aligned text.</p>
<p class="well text-right">Right aligned text.</p>
<p class="well text-justified">This is a really long ...</p>

Padding

<div class="padded">A box.</div>
<div class="padded-horizontal">Another box.</div>
<div class="padded-vertical">Another box.</div>

Width

<div class="full-width">A full width element.</div>