SimpleOneCss - Documentation + Test page

Buttons

Button colors

Disabled buttons

Button size

Button tooltip

Inputs

Input colors

Input size

Input with container

Input with container - inline

Other kind of inputs

Checkboxs, radio

Tables

Table default

Alpha Beta Gamma Delta
London Medium 2.11 A
New York Small 1.19 B
Paris Small 1.92 G
Rome Big 2.2 D

Table stripped

Alpha Beta Gamma Delta
London Medium 2.11 A
New York Small 1.19 B
Paris Small 1.92 G
Rome Big 2.2 D

Table hover

Alpha Beta Gamma Delta
London Medium 2.11 A
New York Small 1.19 B
Paris Small 1.92 G
Rome Big 2.2 D

Table bordered

Alpha Beta Gamma Delta
London Medium 2.11 A
New York Small 1.19 B
Paris Small 1.92 G
Rome Big 2.2 D

Table status

Alpha Beta Gamma Delta
Default Medium 2.01 A+
London Medium 2.11 A
New York Small 1.19 B
Paris Small 1.92 G
Rome Big 2.2 D
Budapest Medium 2.23 E

Table status with hover

Alpha Beta Gamma Delta
Default Medium 2.01 A+
London Medium 2.11 A
New York Small 1.19 B
Paris Small 1.92 G
Rome Big 2.2 D
Budapest Medium 2.23 E

Menu and Navigation bar

Navtabs

Navbars

Lists

Simple list

List with border

List box

List box with hover

Responsive utilities

Responsive width - inner

outer-5 - inner-1
outer-5 - inner-2
outer-5 - inner-3
outer-5 - inner-4
outer-5 - inner-5

Responsive width - outer

outer-1 - inner-1
outer-2 - inner-1
outer-3 - inner-1
outer-4 - inner-1
outer-5 - inner-1

Responsive width - mixed

outer-1 - inner-1
outer-2 - inner-1
outer-2 - inner-1
outer-3 - inner-1
outer-3 - inner-2
outer-4 - inner-1
outer-4 - inner-3
outer-5 - inner-2
outer-5 - inner-3

Responsive width - offset

no offset
offset-1
offset-2
offset-3
offset-4

Source code:

Simple sourcecode:

function helloCode(user) { var text = "Hello World! Your name is " + user; console.log(text); } $(function() { var user = $("#user-input").val(); console.log("Starting the app!"); helloCode(user); });

Simple sourcecode with numbered rows:

function helloCode(user) { var text = "Hello World! Your name is " + user; console.log(text); } $(function() { var user = $("#user-input").val(); console.log("Starting the app!"); helloCode(user); });

Simple sourcecode with container:

function helloCode(user) { var text = "Hello World! Your name is " + user; console.log(text); } $(function() { var user = $("#user-input").val(); console.log("Starting the app!"); helloCode(user); });

Simple sourcecode with container and numbered rows:

function helloCode(user) { var text = "Hello World! Your name is " + user; console.log(text); } $(function() { var user = $("#user-input").val(); console.log("Starting the app!"); helloCode(user); });

Toggle boxes:

A content with a plenty of display. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
B content with a plenty of display. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
C content with a plenty of display. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
D content with a plenty of display. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Modal window:

Modal header

Modal body

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Breadcrumb:

Navigation:

Default

Rounded

Badges:

Default badge Primary badge Info badge Warning badge Error badge Success badge

Containers:

XS sized container

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

S sized container

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Normal sized container

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

L sized container

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

XL sized container

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Alerts:

Default alert!
Primary alert!
Info alert!
Warning alert!
Error alert!
Success alert!

Progress bar:

Normal bars

20%
40%
60%
80%
100%
50%

Stripped bars

100%
100%
100%
100%
100%
100%

Animated bars

100%
100%
100%
100%
100%
100%

Mixed bars

40%
20%
40%
40%
20%
40%
40%
20%
40%
40%
20%
40%