Light

Minimal Framework

INSTALLATION

There are a few ways to install Light, such as simply adding a link tag in the header of your project or installing the npm package.

CDN
                   
                     <link
                     rel="stylesheet"
                     href="https://unpkg.com/light-css-framework"
                     /> 
                   
               
NPM
                   
                       $ npm install --save light-css-framework
                   
               

GUIDE

The following is a guide on how to use the light.css framework and all of its different components.

LAYOUT

The main content should be placed within a container class for the best alignment.


                    <div  class="container"> Content Here </div>
                    
                    

Paragraph text should be placed in a content class for best results.


                       <p  class="content"> Place paragraph text here </p>
                    
                    

TYPOGRAPHY

Styles are based on rem and em units, preserving even spacing thoughtout your page.

h1

h2

h3

h4

h5
h6

paragraph

bold

italic

links

GRID

Light uses a minimal 12 column grid system with common names.

1

2

3

4

               
    <div class="row"> 
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
    </div>
               
            

You can expand to the following col-1 to col-12 classes.

NAVIGATION

Split navigation options and links.

            
    <div class="nav">    
        <div class="nav-logo">
            <h4>light</h4>
        </div>
        <div class="nav-links left">
            <a class="nav-item"href="#">account</a>
            <a class="nav-item"href="#">links</a>
            <a class="nav-item"href="#">contact</a>
        </div>
    </div>
           
            

Navigation links can we aligned left, centered, or right to the logo and fixed to the top.

CARDS

Cards are simple to use and implement.

Here is some content which serves to demonstrate how this card can look. This is the default card.

Here is some content which serves to demonstrate how this card can look. This is the light card.

                
        <div class="cards"> 
                <div class="card"> 
                    <div class="card-content"><p>Content</p></div> 
                    <div class="card-footer"><a>Header</a> 
                     <a href="#">Link</a></div>
                </div> 
                <div class="card light"> 
                    <div class="card-content"><p>Content</p></div> 
                    <div class="card-footer"><h3>Header</h3> 
                     <a href="#">Link</a></div>
                </div>
         </div>
                
            

BUTTONS

Light uses three main buttons styles, filled, outline, and light.

This is the default button, available with:

<button> Filled </button>

The outline button is available using the outline class:

<button class='outline'> Outline </button>

The light button is also available using the light class:

<button class='light'> Light </button>

FORMS

Forms are designed clean and with minimal style.



                
 <form> 
        <input type="text" placeholder="John Doe"/> 
        <input type="text" placeholder="Comments"/> 
        <textarea placeholder="details ... "></textarea>
 </form>
                
            

With light class added



                
 <form> 
        <input class="light" type="text" placeholder="John Doe"/> 
        <input class="light" type="text" placeholder="Comments"/> 
        <textarea  class="light" placeholder="details ... "></textarea>
 </form>
                
            

CUSTOMS

Light comes with a few simple utilities which can be used to customize your page.

.hero - Front page banner.

.content - For text content.

.container - To align and place main content.

.gap - Adds a 1rem gap.

.center - Centers items.

.text-center - Align text to the center.

.text-right - Align text to the right.

.text-left - Align text to the left.

.justify-center - Align flex justify center.

.justify-column - Align flex justify column.

.justify-column-between - Align flex justify column space between.

.m to .m4 - Margin of 1rem to 4rem.

.mt to .mt-4 - Margin-top of 1rem to 4rem.

.m to .mb-4 - Margin-bottom of 1rem to 4rem.

.p to .p4 - Padding of 1rem to 4rem.

.pb to .pb-4 - Padding-bottom of 1rem to 4rem.

.pt to .pt-4 - Padding-top of 1rem to 4rem.