Almost Flat UI
Based on Foundation Framework 5.2.2

Navigation

Pagination
Sub Nav
Filter:
All
Active
Pending
Suspended

Buttons

Almost Flat Buttons
Button class="" Description
button primary Provides extra visual weight and identifies the primary action in a set of buttons
button primary-dark Provides extra visual weight and identifies the primary action in a set of buttons
button secondary Standard gray button with gradient
button highlight To highlight some extraordinary action
button highlight-dark To highlight some extraordinary action
button info Used as an alternative to the default styles
button info-dark Used as an alternative to the default styles
button success Indicates a successful or positive action
button success-dark Indicates a successful or positive action
button success-darker Indicates a successful or positive action
button success-darkest Indicates a successful or positive action
button warning Indicates caution should be taken with this action
button warning-dark Indicates caution should be taken with this action
button alert Indicates a dangerous or potentially negative action
button alert-dark Indicates a dangerous or potentially negative action
button inverse Alternate dark gray button, not tied to a semantic action or use
button inverse-dark Alternate dark gray button, not tied to a semantic action or use
Different Sizes
Button class="" Description
button tiny Tiny Button
button small Small Button
button Regular Button
button large Large Button
Different Types
Button class="" Description
button radius Radius Button
button round Round Button
button disabled Disabled Button

Forms

Fieldset
http://
.com
Invalid entry
Valid entry

Typography

Type

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header. h1.
h6. This is a tiny header. h1.

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader
h6.subheader

h1. Small segment header.

h2. Small segment header.

h3. Small segment header.

h4. Small segment header.

h5. Small segment header.
h6. Small segment header.

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap <strong> around type to make it bold!. You can also use <em> to italicize your words.

Links

Links are very standard, and the color is preset to the Foundation primary color.

Lists

Lists are helpful for, well, lists of things.

ul.disc
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.circle
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.square
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
Ordered Lists
  1. List Item 1
  2. List Item 2
    1. Nested List Item
    2. Nested List Item
    3. Nested List Item
  3. List Item 3
Definition Lists
Definition Title
Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
Blockquotes

Sometimes other people say smart things, and you may want to mention that through a blockquote callout. We've got you covered.

I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.Isaac Asimov
V-Cards

Here's a handy microformat-friendly list to address all your needs.

Labels

Regular Label
Radius Secondary Label
Round Alert Label
Success Label

CSS Components

Alert Boxes
This is a standard alert (div.alert-box). ×
This is a success alert (div.alert-box.success). ×
This is an alert (div.alert-box.alert.round). ×
This is a secondary alert (div.alert-box.secondary). ×
Panels
This is a regular panel.

It has an easy to override visual style, and is appropriately subdued.

This is a callout panel.

It's a little ostentatious, but useful for important content.

Pricing Table
  • Standard
  • $99.99
  • An awesome description
  • 1 Database
  • 5GB Storage
  • 20 Users
  • Buy Now
Progress Bars
Tables
Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Thumbnails

Javascript

Clearing

Content
Horizontal Tabs
Tab 1
Tab 2
Tab 3

First panel content goes here...

Second panel content goes here...

Third panel content goes here...

Vertical Tabs
Tab 1
Tab 2
Tab 3

First panel content goes here...

Second panel content goes here...

Third panel content goes here...

Accordion
Panel 1

Content of Panel 1.

Panel 2

Content of Panel 2.

Tooltips

"Tip-top" (hehe), "tip-left", or "tip-right"

Navigation
Buttons
Forms
Typography
CSS Components
Javascript


Download

Need a Stylish Resume?

Try my other project: HipCV

Want to hear when I write or build new stuff?

Subscribe to get my latest content by email.