Design
Colors
Fonts
Open Sans Light
Open Sans Regular
Open Sans Semi-Bold
Open Sans Bold
Open Sans Extra-Bold
Georgia Regular
Georgia Italic
Core
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a paragraph with an inline link.
This is a blockquote...
If I had to choose a superhero to be, I would pick Superman. He's everything that I'm not.
— Stephen Hawking
Responsive Grid
For containers, rows and columns, Frunt uses the popular bootstrap grid, for now.
Components
Alert
Solid alerts:
Muted alerts:
Block (full-width):
Dismissable (Requires alert JS):
Badge
You can have an inline badge
Or some round badges:
1 2 3
Or...
You can also have a really long badge. Good for notes, or help text.
Burger
Burger | |
Active |
Forms
Tables
Hero | Power | First Appearance |
---|---|---|
Atomic Man | Super strength | 1946 |
Inferno | Breathing flames | 1941 |
Crimson Rider | Badass cowgirl | 1939 |
Tiles
Tiles can have options: --halves, --thirds, --quarters, --fifths and --sixths. Also, the tiles will wrap automatically, no need for wrapping rows.
Thirds:
Quarters:
Quarters (padded):
You can also add -padded to any of the options for spacing between tiles.
Overlays:
Tiles can display an overlay with content on hover or with an active state.