Body copy

Lorem ipsum dolor sit amet sapien pede bibendum a, mauris. Lorem ipsum dolor nulla, auctor velit. Mauris nunc ac turpis faucibus vestibulum. Etiam tempor pede ac ornare eu, luctus et lorem. Cras dignissim. Morbi sodales wisi a lacus. Maecenas blandit risus dolor fermentum odio. Morbi accumsan, dolor id eros. Suspendisse diam. Suspendisse vitae sagittis eget, enim. Maecenas tortor et malesuada ultricies.

Headings

Heading 1
New line

Heading 2
New line

Heading 3
New line

Heading 4
New line

Heading 5
New line

Heading 6
New line

Lists

Unordered:

Orange
Apple
Appricot
Lorem ipsum dolor sit amet sapien pede bibendum a, mauris. Lorem ipsum dolor nulla, auctor velit. Mauris nunc ac turpis faucibus vestibulum. Etiam tempor pede ac ornare eu, luctus et lorem. Cras dignissim. Morbi sodales wisi a lacus. Maecenas blandit risus dolor fermentum odio. Morbi accumsan, dolor id eros. Suspendisse diam. Suspendisse vitae sagittis eget, enim. Maecenas tortor et malesuada ultricies.

Ordered:

First
Second
Third

Nested:

Orange
1. First
2. Second
3. Third
Apple
Appricot

Definition:

fruit: orange
vegetable: carrot
sweets: chocolate

Definition (inline):

fruit: orange
vegetable: carrot
sweets: chocolate

PRE & CODE

Integer tincidunt turpis egestas. Aenean mollis ultrices, velit nec sapien eros, varius felis neque, vitae lorem odio non sem. Quisque in neque odio eu.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/daylook.css">
    </head>
</html>

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/daylook.css">
    </head>
</html>

Icons

Font Awesome icon font is already included:

Buttons

Default button Default button with icon Default button with right icon

Empty button Empty button with icon

Wide button

Small button Small button with icon

Forms

Field label

Field hint

Field label

Field error

Field hint

Field label

Field hint

Field label

Field hint

Field label

Field hint

Lorem ipsum dolor sit amet sapien pede bibendum a, mauris. Lorem ipsum dolor nulla, auctor velit. Mauris nunc ac turpis faucibus vestibulum. Etiam tempor pede ac ornare eu, luctus et lorem. Cras dignissim. Morbi sodales wisi a lacus. Maecenas blandit risus dolor fermentum odio. Morbi accumsan, dolor id eros. Suspendisse diam. Suspendisse vitae sagittis eget, enim. Maecenas tortor et malesuada ultricies.

Field hint

Fieldsets

Use .look-fieldset to group related form fields together:

Log in

Username

Username hint

Password

Password hint

.look-fieldset can be used also without fieldset tag:

Test

Lorem ipsum dolor sit amet sapien pede bibendum a, mauris. Lorem ipsum dolor nulla, auctor velit. Mauris nunc ac turpis faucibus vestibulum. Etiam tempor pede ac ornare eu, luctus et lorem. Cras dignissim. Morbi sodales wisi a lacus. Maecenas blandit risus dolor fermentum odio. Morbi accumsan, dolor id eros. Suspendisse diam. Suspendisse vitae sagittis eget, enim. Maecenas tortor et malesuada ultricies.

Segments

Lorem ipsum dolor sit amet sapien pede bibendum a, mauris.

Balloons

Lorem ipsum dolor sit amet sapien pede bibendum a, mauris. Lorem ipsum dolor nulla, auctor velit. Mauris nunc ac turpis faucibus vestibulum. Etiam tempor pede ac ornare eu, luctus et lorem. Cras dignissim. Morbi sodales wisi a lacus. Maecenas blandit risus dolor fermentum odio. Morbi accumsan, dolor id eros. Suspendisse diam. Suspendisse vitae sagittis eget, enim. Maecenas tortor et malesuada ultricies.

Comments

Lorem ipsum dolor sit amet sapien pede bibendum a, mauris. Lorem ipsum dolor nulla, auctor velit. Mauris nunc ac turpis faucibus vestibulum. Etiam tempor pede ac ornare eu, luctus et lorem. Cras dignissim. Morbi sodales wisi a lacus. Maecenas blandit risus dolor fermentum odio. Morbi accumsan, dolor id eros. Suspendisse diam. Suspendisse vitae sagittis eget, enim. Maecenas tortor et malesuada ultricies.

Cubes

Utilities

Text alignment & transformation:

Left

Center

Right

TEXT LOWERCASE

text uppercase

text capitalize

Color classes:

Other:

float left & right: _float-left & _float-right
reset margin & padding: _margin-reset & _padding-reset
add default margin & padding: _margin-default & _padding-default
add default margin & padding (x-axis): _margin-default-x & _padding-default-x
add default margin & padding (y-axis): _margin-default-y & _padding-default-y
add default border radius: _border-radius
grayscale filter: _grayscale

Look

Body copy

Headings

Heading 1
New line

Heading 2
New line

Heading 3
New line

Heading 4
New line

Heading 5
New line

Heading 6
New line

Lists

PRE & CODE

Icons

Font Awesome icon font is already included:

Buttons

Forms

Fieldsets

Segments

Balloons

Comments

Cubes

Utilities

Table of contents

Look

Body copy

Headings

Heading 1New line

Heading 2New line

Heading 3New line

Heading 4New line

Heading 5New line

Heading 6New line

Lists

PRE & CODE

Icons

Font Awesome icon font is already included:

Buttons

Forms

Fieldsets

Segments

Balloons

Comments

Cubes

Utilities

Table of contents

Heading 1
New line

Heading 2
New line

Heading 3
New line

Heading 4
New line

Heading 5
New line

Heading 6
New line