Learn Lighter

Learn how to create a responsive website using Lighter.

This Tutoriel make you understand the basics of Lighter, and let you getting started with the framework, at the end of this tutorial you will be able to create a beautiful responsive website.

  • days
  • Hours
  • Minutes
  • Seconds

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

The installation of lighter is very simple, you can install it as a file or import it as a flavor with cdn.

CDN

Use this CDN on the head section in your file HTML.

 
                    
<link rel="stylesheet" type="text/css" media="screen" href="https://gitcdn.xyz/repo/amine1107/lighter/master/lighter.min.css" />


Download

You need only a file to start your work, the minified file is too light, only has 13KB.

Download

Git

You can use Git bash for Windows or Git for MAC and Linux to use Lighter.Clone this repo to your local machine using:

NPM

You can install Lighter as a npm package, This release contains source files as well as the compiled CSS.

Running the tests

You can simply add Lighter to your file Html. add the following line inside your HTML page's :

 
                      
<link rel="stylesheet" type="text/css" media="screen" href="../css/lighter.min.css" />
# Starter Code

You can start with this simple code:

 
                      
<!DOCTYPE html>
<html>
  <head>
    <!-- The charset attribute specifies the character encoding for the HTML document -->
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen --> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Lighter Css Micro Framework</title>
    <!-- Favicon -->
    <link rel="icon" href="../favicon.png">
    <!-- Import the minfied file of Lighter --> 
    <link rel="stylesheet" type="text/css" media="screen" href="../css/lighter.min.css" /> 
  </head>
  <body>

    <!-- Your Content should be Here -->
    <h1>Hello World!</h1>

  </body>
</html>
〈 PREVIOUS PAGE