Flu.css Styleguide

Buttons

Button

button- Button stylings for default sbittons on the sitee

<button>Standard button</button>

a.button- Need to style an a link the same as a button, just add button to to the a link taf

flucss.com 
<a href="http://flucss.com" class="button">flucss.com</a>

Form Buttons Button

input[type="submit"]- Submit and Reset form buttons Live it, love it.

<input type="submit" value="Submit" />

Headings

Heading 1

h1- The main heading for all pages

A huge heading

A p with .h1 class

<h1>A huge heading</h1>
<p class="h1">A p with .h1 class</p>

Heading 2

h2

Heading 2

A p with .h2 class

<h2>Heading 2</h2>
<p class="h2">A p with .h2 class</p>

Heading 3

h3

Heading 3

A p with .h3 class

<h3>Heading 3</h3>
<p class="h3">A p with .h3 class</p>

Heading 4

h4

Heading 4

A p with .h4 class

<h4>Heading 4</h4>
<p class="h4">A p with .h4 class</p>

Heading 5

h5

Heading 5

A p with .h5 class

<h5>Heading 5</h5>
<p class="h5">A p with .h5 class</p>

Heading 6

h6

Heading 6

A p with .h6 class

<h6>Heading 6</h6>
<p class="h6">A p with .h6 class</p>

Content

Paragraph

p- The "paragraph" tag, more than likely the most used tag on a page

Rather than just a big block of lorem ipsum, I have wrote a whole lot of nothing, that makes no sense what so ever.

<p>Rather than just a big block of lorem ipsum, I have wrote a whole lot of nothing, that makes no sense what so ever.</p>

Center Text

.center

Want to just center some text, use the center class

<p class="center">Want to just center some text, use the center class</p>

a- The a link

flucss.com 
<a href="http://flucss.com">flucss.com</a>

Blockquote

blockquote- Blockquote

when this baby hit's 88mph, you're going see some serious... 
<blockquote>
  when this baby hit's 88mph, you're going see some serious...
</blockquote>

Strong

strong- Pretty much means makes something bold

I am strong 

<p>I am
  <strong>strong</strong>
</p>

sup

sup- Sup(pper)

This is Supper 

<p>This is
  <sup>Supper</sup>
</p>

sub

sub- sub(er)

This is Sub 

<p>This is
  <sub>Sub</sub>
</p>

abbr

abbr- abbr

This is an abbrivation 

<p>This is an
  <abbr>abbrivation</abbr>
</p>

Lists

Unordered Lists

ul- Unordered List

  • A simple list
<ul>
  <li>A simple list</li>
</ul>

No style

ul.nolistitem- List's with no bullet style

  • A simple list
<ul class="nolistitem">
  <li>A simple list</li>
</ul>

Dics

ul.disc- Dics list bullet

  • A simple list
<ul class="didc">
  <li>A simple list</li>
</ul>

Square

ul.square- Square list bullet

  • A simple list
<ul class="square">
  <li>A simple list</li>
</ul>

Circle

ul.circle- Cirle list bullet

  • A simple list
<ul class="circle">
  <li>A simple list</li>
</ul>

Leading Zero

ul.leadingzero- Decimal with a leading zero

  • A simple list
<ul>
  <li>A simple list</li>
</ul>

Roman

ul.roman- Going back in time

  • A simple list
<ul class="roman">
  <li>A simple list</li>
</ul>

Grid

Grid is built using the gridBuilder mixin, the width and columns are set in settings.scss

The col-# inside a row div can not be more than the $gridNo you have in your settings

Col 1
Col 2
Col 3
Col 4
Col 5
Col 5
Col 6
Col 4
Col 7
Col 3
<div class="row">
  <div class="col-1">Col 1</div>
  <div class="col-2">Col 2</div>
  <div class="col-3">Col 3</div>
  <div class="col-4">Col 4</div>
</div>
<div class="row">
  <div class="col-5">Col 5</div>
  <div class="col-5">Col 5</div>
</div>
<div class="row">
  <div class="col-6">Col 6</div>
  <div class="col-4">Col 4</div>
</div>
<div class="row">
  <div class="col-7">Col 7</div>
  <div class="col-3">Col 3</div>
</div>

ul.nav- Simple navigation styles

<ul class="nav">
  <li>
    <a href="">Home</a>
  </li>
  <li>
    <a href="">About</a>
  </li>
</ul>

ul.nav-vertical- Vertical Navigation

<ul class="nav-vertical">
  <li>
    <a href="">Home</a>
  </li>
  <li>
    <a href="">About</a>
  </li>
</ul>

Tables

Table

table- Tables get a bad name in web development, but you can not get away from them for the good tabular data outputs

Table Header Table Header
Cell Cell
Cell Cell 
<table>
  <thead>
    <tr>
      <th>Table Header</th>
      <th>Table Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

Zebra Table

table.zebra- What's better than a plain table, a zebra stripe table

Table Header Table Header
Cell Cell
Cell Cell
Cell Cell
Cell Cell 
<table class="zebra">
  <thead>
    <tr>
      <th>Table Header</th>
      <th>Table Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>