Colors

Box

default
primary
success
info
warning
danger
light
dark

Debug

span span span

div
div
div

Typography

Font

big
header
body
caption

Header

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Paragraph

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Lists

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Code


.header {
    display: block;
    width: 300px;
    height: 80px;
}

Text

text left
text center
text right

Icon



Font awesome
Material design check edit home
Ionic
Octicons

Size

Close








Controls

Button

<a>
<div>
<span>

Block

<a>
<div>
<span>

Colors

Round

Outline

Outline & thick

Outline, round & thick

Flat

Clear

Reset radius (reset-radius, reset-left-radius, reset-right-radius)

Active (on focus)

Size

Width

























Icon & text



Icon spin & pulse



Only icon

Square



Circle





Misc

Social







Button & big



Button & 2x, 3x, 4x, 5x

Disabled (disabled, outline, flat, clear)







Mix style with shadow





Label







Input

Size







Width























Transparent

Color





Border thick







Type









Label & Input









Icon addon











Link

link

Group

Button group











Label group

Label1 Label2 Label3

Input group

http://












Info:


Reset radius (reset-right-radius & reset-left-radius)

Reset radius and group



Vertical

Vertical & block



Group in grid

Checkbox

(label + input)

(label > input & span)

Radio



Select

Textarea

Tag

Default Primary Success Info Warning Danger Light Dark

Badge

Default Primary Success Info Warning Danger Light Dark



Popup

Popup

Alert

Default: Description...
Primary: Description...
Success: Description...
Info: Description...
Warning: Description...
Danger: Description...
Light: Description...
Dark: Description...

Alert with buttons

Lorem: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur atque enim iure magni nostrum nulla qui sed. Cum doloremque doloribus esse in natus praesentium, quia quo saepe velit voluptates Link

Tables

A B C
1 2 3
4 5 6

Hover

A B C
1 2 3
4 5 6

Border

A B C
1 2 3
4 5 6

Striped

A B C
1 2 3
4 5 6
7 8 9
10 11 12
13 14 15

All

A B C
1 2 3
4 5 6
7 8 9
10 11 12
13 14 15

Colors

A B C
1 2 3
4 5 6
7 8 9
10 11 12
13 14 15

Complex tables

User E-mail Description Status Options
John Doe john@example.com Description... info
John Doe john@example.com Description... warning
John Doe john@example.com Description... danger
Table footer....


User E-mail Description Status Options
John Doe john@example.com Description... primary success

Table with panel

Header
A B C
1 2 3
4 5 6
Footer

Tiles (experimental - todo)

Tree DOM structure

A
B
C
D
E

Flat DOM structure

A
B
C
D
E
F
G
H
I
J
K
L

Cards

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, est in iste nobis odio possimus ratione rerum sit. Blanditiis dicta dignissimos distinctio nam non omnis quaerat quam quibusdam unde voluptate.

Link Link Link
Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet animi asperiores aut blanditiis commodi cum earum eveniet fugit impedit, ipsa ipsum itaque laborum maiores nihil, nisi odio similique. Blanditiis?

Link Link Link
Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, est in iste nobis odio possimus ratione rerum sit. Blanditiis dicta dignissimos distinctio nam non omnis quaerat quam quibusdam unde voluptate.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, est in iste nobis odio possimus ratione rerum sit. Blanditiis dicta dignissimos distinctio nam non omnis quaerat quam quibusdam unde voluptate.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, est in iste nobis odio possimus ratione rerum sit. Blanditiis dicta dignissimos distinctio nam non omnis quaerat quam quibusdam unde voluptate.

Link Link Link

Panel

only content

Header

Header
content...
Header
content...
Header
content...
Header
content...
Header
content...
Header
content...
Header
content...
Header
content...

Size

Header
content...
Header
content...
Header
content...
Header
content...
Header
content...

With icons

Info
content...

Header & footer

Header
content...
Footer
Header
content...
Footer

Grid & responsive

Header
content...
Header
content...
Header
content...
Header
content...

Panel with nav

Title
content...

Form

http://

Responsive

Navigation

Simple row and gutter

Option1
Option2
Option3
Right

Nav (default)

My colors

Size

Justify content

With controls, group & is-gap

Box (nav, is-box)

My colors

Size

Flat (nav, is-flat)

With is-bottom-border

My colors

Size

Tabs (nav, is-tab)

My colors

Active Border

My colors with border

Border

My colors with border

Border and thick

Size

Reset radius

Submenu














Vertical nav (is-vertical)

Submenu

Navbar (flexbox container)

Gedeonix UI

Complex


Is gutter

No gutter

Pagination




With group









Breadcrumbs






Hero

Hero

Hero

Modal

Info

Info
Simple example

Warning

Warning
Simple example

Danger

Danger
Simple example

Form

Form

Containers

Default with gutter

content container...

Container without gutter

content container...

Fluid container

Default with gutter

content container...

Container without gutter

content container...

Flex grid

Simple

Simple (row, no-gutter, col)

1
2
2
3
3
3

1
2
2
3
3
3

Max limit (row-x)

1
1
1
1
1

1
1
1
1
1

Offsets (offset-x)

1
1
1
1
1

1
1
1
1
1

Columns (col-x)

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12

Auto width

auto
auto
1
auto
2
auto
3
auto
4
auto
5
auto
6
auto
7
auto
8
auto
9
auto
10
auto
11
12

auto
auto
1
auto
2
auto
3
auto
4
auto
5
auto
6
auto
7
auto
8
auto
9
auto
10
auto
11
12

Mix column (row-x & col-x)

auto
auto
auto
auto
auto
auto
auto
8
auto
auto
1
2
5
auto

auto
auto
auto
auto
auto
auto
auto
8
auto
auto
1
2
5
auto

Justify content (row, is-left, is-center, is-right)

auto
A
B
C
A
B
C
A
B
C
auto

Nested (row > col > row > col)

1
1
1
A
B
C
X
Y
Z

1
1
1
A
B
C
X
Y
Z

Responsive

Responsive in rows (xs sm md lg)

mobile <=40em 40em <= tablet < 64em 64em <= desktop < 90em 90em <= widescreen
prefix col-mobile- col-tablet- col-desktop- col-widescreen-
gutter with 0.25rem 0.50rem 0.75rem 1rem

Columns in row mobile (row mobile-x)

auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto

Columns in row tablet (row tablet-x)

auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto

Columns in row desktop (row desktop-x)

auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto

Columns in row widescreen (row widescreen-x)

auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto

Mix (row & mobile-1 tablet-2 desktop-3 widescreen-4)

auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto

Mix (row & mobile-4 tablet-3 desktop-2 widescreen-1)

auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto

Responsive in cols (mobile tablet desktop widescreen)

Columns (col mobile-3 tablet-3 desktop-3 widescreen-3)

mobile-3
mobile-3
mobile-3
mobile-3
tablet-3
tablet-3
tablet-3
tablet-3
desktop-3
desktop-3
desktop-3
desktop-3
widescreen-3
widescreen-3
widescreen-3
widescreen-3

Columns (col mobile-4 tablet-4 desktop-4 widescreen-4)

mobile-4
mobile-4
mobile-4
tablet-4
tablet-4
tablet-4
desktop-4
desktop-4
desktop-4
widescreen-4
widescreen-4
widescreen-4

Mix columns (col mobile-12 tablet-6 desktop-4 widescreen-3)

col
col
col
col
col
col
col
col
col
col
col
col

Mix columns (col mobile-12 tablet-6)

col
col
col
col
col
col
col
col
col
col
col
col

Table grid (todo)

1
2
3
4
5
6
7