Light

Basic web components with no Javascript. CSS Only. 3kb (Gzip).

Download Watch Star

Currently v0.3.0-alpha

Components | Demo

Basic Grid

Currently only .col-3 .col-4 .col-6 at the moment. Gutter 16px, all grids break at 420px.

.col-3
.col-3
.col-3
.col-3
.col-4
.col-4
.col-4
.col-6
.col-6
<div class="row">
    <div class="col-6">
        col-6
    </div>
    <div class="col-6">
        col-6
    </div>
</div>

Buttons

Button with .btn-light .btn-dark .btn-action .btn-disabled options.

Normal Buttons

Light Dark Action Disabled

Buttons with .more-radius

Light Dark Action Disabled

Buttons with .no-radius

Light Dark Action Disabled

Buttons with .full-radius

Light Dark Action Disabled

Labels

Add span with .label

Food Drinks Snacks
<span class="label">Food</span>
<span class="label">Drinks</span>
<span class="label">Snacks</span>

Table

Full table width (Default)

This a normal table.

Header 1 Header 2 Header 3
Description 1 Description 2 Description 3
Description 1 Description 2 Description 3
Description 1 Description 2 Description 3

Make table responsive with .responsive-table

Header 1 Header 2 Header 3 Header 4
Description 1 Description 2 Description 3 Description 4
Description 1 Description 2 Description 3
Description 1 Description 3 Description 4

Notice Bars

These are notice bars, they are like alerts but usually place at the of the navbar or in between sections.
You can also dismiss them if you like. No script needed.

I'm a normal notice. I'm still there even when you refresh.
I'm a .warning notice.
I'm a dismissible notice. X
<div id="dismiss" class="notice">
    I'm a dismissible notice.
    <a href="#dismiss" class="dismissal">X</a>
</div>

Navbars

This is a scrollable navbar. Extra navigation links is hidden by default to keep the space clean. Click on the toggle to show the full navigation bar.

<nav>
    <div class="container">
        <ul>
            <li class="brand"><a href="demo">Website Name</a></li>
        </ul>
        <ul class="navbar-right">
            <li><a class="btn-light" href="#dropnav"><span class="dropnav-button"></span></a></li>
        </ul>
    </div>
</nav>        
<nav id="dropnav" class="dropnav">
    <div class="nav-container">
        <ul>
            <li><a href="/light/">Home</a></li>
            <li><a href="#navbar">About Us</a></li>
            <li><a href="#navbar">Products</a></li>
            <li><a href="#navbar">Services</a></li>
            <li><a href="#navbar">Contact Us</a></li>
        </ul>
    </div>
</nav>

Menu

This is a menu type navigation.

Open Menu
<div id="open-menu" class="modal">
        <a href="#dismiss" class="dismissal">X</a>

        <div class="container">
            <div class="middle wide">
                <div class="row">
                    <div class="col-4">
                        <a class="menu-link" href="#menu">About</a>
                    </div>
                    <div class="col-4">
                        <a class="menu-link" href="#menu">Products</a>
                    </div>
                    <div class="col-4">
                        <a class="menu-link" href="#menu">Contact</a>
                    </div>
                </div>
                <p class="text-center">This is a menu type navigation. See the example in <a href="demo">demo</a>.</p>
            </div>
        </div>
    </div>

Image & Caption

Add caption on background image. You can use .caption-middle , .caption-bottom and .caption-overlay.
You can also add overlay filters with .image-overlay-dark for dark overlay and .image-overlay-light for light overlay.

Countdown to 2018

255 days left

.caption-middle

Countdown to 2018

255 days left

with .image-overlay-dark

Countdown to 2018

255 days left

with .image-overlay-light

.caption-bottom
This is a overlay caption.

Modal

This modal is created by reversing dismissal button. No script needed.
You can add .container inside .modal for extra padding.

Open Modal Close Modal
<a class="btn-dark" href="#open-modal">Open Modal</a>

<div id="open-modal" class="modal">
        <a href="#dismiss-modal" class="dismissal">X</a>
        <h4>Modal Header</h4>
        <p>Lorem ipsum morbi euismod faucibus orci, quis tristique sapien scelerisque id. Curabitur molestie sapien eu justo molestie placerat. Cras interdum erat ut ligula fermentum ornare. Sed eu purus fringilla, convallis erat sit amet, mattis sapien. Nunc fringilla vehicula sapien, a imperdiet purus porta vel. Phasellus dictum lorem vel ligula imperdiet, at rutrum orci imperdiet. Sed ipsum magna, aliquam non mauris nec, dictum molestie ligula.</p>
        <a class="btn-dark" href="#dismiss-modal">Close Modal</a>
</div>

Forms

Backgrounds

These are coloured backgrounds. You can use it with div.

.bg-dark
.bg-light
.bg-outline-dark
.bg-outline-light

Footer

This is a simple footer. Default colour is white. Add .dark for dark footer.

<footer class="dark">
    <div class="container">
        This is a dark footer
    </div>
</footer>