Breakpoint: X 1 2 3 4 5 6

DEMO FOR CUSTOM CSS DESIGN

"Light V2"

This is a ".uniform-row .break3" which wraps two ".uniform-container .w50 .space1" containers.

Here space1 describes that the margin between the containers Link1 is 1 element-value and w50 describes that each container has 50% width.

Loading...

INPUT TYPES

A normal button:

A button w100 in all its colors:



The ripple effect is always centered.

Round buttons:

Tooltips:

This is a tooltip!

Tooltips are centered:

+

Pure CSS Modals:

Modals to display images:

Alerts example:

An input field rd25 w100:

A checkbox in all its colors:

Check: Check: Check: Check: Check:

An inline input field rd25 w100 with a submit button:

An inline select dropdown w100 with a prefix field rd25:

Select Value:

An inline button w100 with a prefix field rd25:

Select Value:

ROW-GRID DESIGN

This row wraps it's containers automatically due to the "break" class.

Text inside p

No text not inside p

Text and button inside p:

LABELS

What they do and how to use them.

A label is used to allow styling of a checkbox. It can also be used as a title for a field.



Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
Check1
Check2

Check3

HEAD

Subtitle

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

REMOVING CONTENT

Removal of the content of containers results in empty space.

HEAD This is a ribbon!

Subtitle

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

BORDER

Here the class .border was used on the head element.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

REMOVING CONTAINERS

Removal of an entire container results in extra space filling between the other containers

THIS IS A TABLE

In this case the table has 2 columns.

Name Value
Design > 9000
Responsiveness 90 %
Usability good
CSS advanced
Work a lot
Bootstrap none
Lightweight true
This is a badge A badge can be used in a Text
They come in 5 colors Blue Red Green Yellow Purple

FIT HEIGHT

A container can made to fit it's content height by using the .fit class!

HEAD TOP-LINE

lol

ROW-GRID DESIGN

Gradient button style

ROW-GRID DESIGN

This row wraps it's containers automatically due to the "break" class.




IMAGE IN A card-box rd25

img
img

HEADING AT THE BOTTOM

This head is placed under the image!

HEAD TOP-LINE

img
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
img