A minimalistic css framework to let your projects flourish.

# Bower
$ bower install bloomcss

# NPM
$ npm install bloomcss
Typography
Headings

Header A small description for this header

Header A small description for this header

Header A small description for this header

Header A small description for this header

Header A small description for this header
Header A small description for this header

Header Small description

Header Small description

Header Small description

Header Small description

Header Small description
Header Small description
Paragraphs

Aenean at nunc sed erat consequat posuere eu euismod elit. Donec vitae interdum mauris, sed semper diam. Nam et lectus non magna egestas pretium in eu felis. Mauris vel neque felis. Integer et bibendum ex. Mauris rhoncus a quam sed dapibus.

Maecenas mi ante, pharetra ac odio sed, porta vehicula orci. Mauris vel neque felis. Integer et bibendum ex. Mauris rhoncus a quam sed dapibus.


Maecenas mi ante, pharetra ac odio sed, porta vehicula orci. Mauris vel neque felis. Integer et bibendum ex. Mauris rhoncus a quam sed dapibus.


Maecenas mi ante, pharetra ac odio sed, porta vehicula orci. Mauris vel neque felis.


...

Address
Address Tag
PO Box 1187523
City, State 9878687
United States

Address Tag
PO Box 1187523
City, State 9878687
United States
Lists
  • list item 1
    • list item 2
    • list item 2
      • list item 3
      • list item 3
    • list item 2
  • list item 1

  • list item 1
    • list item 2
    • ...
  1. ordered list item 1
    1. ordered list item 2
    2. ordered list item 2
      1. ordered list item 3
      2. ordered list item 3
    3. ordered list item 2
  2. ordered list item 1

  1. ordered list item 1
    1. ordered list item 2
Description name
Description value
Description name
Description value

Description name
Description value
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Source

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Source
Inline tags
Link <a> small <small>
CSS <abbr> Cite <cite>
Code tag <code> Sample tag <samp>
Variable tag <var> Mark text <mark>
Shortcut <kbd> Deleted <del>
Italic <i> Emphasis <em>
Highlighted <strong> Bold <b>
xsuperscript <sup> xsubscript <sub>

Link     small
Cite       CSS
Code tag   Sample tag
Variable tag Mark text
Shortcut     Deleted
Italic           Emphasis
Bold             Highlighted
xsup         xsub
Preformatted text
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tables
First Name Email Github
Jon Doe jd@gmail.com @jd
Eva G. eg@gmail.com @eg
Hugw Grant hg@gmail.com @hg
Stiv Mors sm@gmail.com @sm
Total Accounts 4

First Name Email Github
Jon Doe jd@gmail.com @jd
Total Accounts 4
Images
Farm
A caption text.

A caption text.
Farm


Buttons

Link






Link
Sizes






Hollow

Link



Colors






Icons





Groups


...
...
Icons Powered by Font Awesome








Animated





Sizes






Alerts
Incididunt ut labore et dolore magna
Incididunt ut labore et dolore magna
Incididunt ut labore et dolore magna
Incididunt ut labore et dolore magna
Incididunt ut labore et dolore magna

...
...
...
...
...
Forms
Some help text
Some help text
Some help text
Some help text


Some help text
Some help text
Some help text
Fieldset
Fieldset form

Fieldset form ...
Disabled state




Sizes








Loading Inspired by SemanticUI
Some help text

...
States
Some help text
Some help text
Some help text

...
...
Panels

Header A small description for this header

Maecenas mi ante, pharetra ac odio sed, porta vehicula orci. Mauris vel neque felis. Integer et bibendum ex. Mauris rhoncus a quam sed dapibus.



...

...

Grid Powered by Foundation
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
5
7
4
8
3
9
3
6
3
5
4
3

...
4
4
4
6
6
4
8
3
9
Mixed grid
:)
:)

:)
:)
Responsive sizes
Extra small (< 480px)
Prefix -xsmall- Size 320px
Columns 12 Gutter 20px (10px each side)
Small (≥ 480px)
Prefix -small- Size 480px
Columns 12 Gutter 20px (10px each side)
Medium (≥ 768px)
Prefix -medium- Size 768px
Columns 12 Gutter 20px (10px each side)
Large (≥ 960px)
Prefix -large- Size 960px
Columns 12 Gutter 20px (10px each side)
Extra large (≥ 1200px)
Prefix -xlarge- Size 1200px
Columns 12 Gutter 30px (15px each side)
Visibility Powered by Foundation