Getting Started

It's very simple to use Light7 to create a WebApp:

Create Layout HTML

1. Install / Download

First of all, you should download jQuery or Zepto. You can get zepto.js on http://zeptojs.com/, and jQuery on http://jquery.com/. It's recommand to use jQuery instead of Zepto.

Then, you should install Light7. It's recommand to install Light7 with npm - npm install light7.

It's recommand to clone light7 on github and compile by yourself, if you don't want to use npm. You can change to build branch if you don't want to build by yourself, there are all compiled files in dist folder. Or, you can just click Here to download.

2. Include Static Files

<link rel="stylesheet" href="css/light7.min.css">
<script type='text/javascript' src='js/jquery.min.js' charset='utf-8'></script>
<script type='text/javascript' src='js/light7.min.js' charset='utf-8'></script>
<!--Mybe you will use extends components-->
<link rel="stylesheet" href="css/light7-swiper.min.css">
<script type='text/javascript' src='js/light7-swiper.min.js' charset='utf-8'></script>

3. Debug

The "min" in file name means it's compressed. You should include light7.js instead of light7.min.js if you want to debug the code.

4. Init Layout

The init Layout:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Title</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="css/light7.min.css">
    <link rel="stylesheet" href="css/light7-swiper.min.css">

    <link rel="stylesheet" href="/your-css-file.css">
  </head>
  <body>
    <!-- Here is your HTML code-->
    <script type='text/javascript' src='js/jquery.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='js/light7.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='js/light7-swiper.min.js' charset='utf-8'></script>

    <script src="/your-js-file.js"></script>
  </body>
</html>

Add Components

Now we have a empty layout, and we can include some components now.

First, We include a title bar and toolbar:

<div class="page">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-left" href="/demos/card" data-transition='slide-out'>
      <span class="icon icon-left"></span>
      Back
    </a>
    <h1 class="title">Title</h1>
  </header>
  <nav class="bar bar-tab">
    <a class="tab-item active" href="#">
      <span class="icon icon-home"></span>
      <span class="tab-label">Home</span>
    </a>
    <a class="tab-item" href="#">
      <span class="icon icon-me"></span>
      <span class="tab-label">Me</span>
    </a>
    <a class="tab-item" href="#">
      <span class="icon icon-star"></span>
      <span class="tab-label">Fav</span>
    </a>
    <a class="tab-item" href="#">
      <span class="icon icon-settings"></span>
      <span class="tab-label">Setting</span>
    </a>
  </nav>
  <div class="content">
    <!-- Content of page -->
  </div>
</div>

And then, we add some cards into the page content:

  <div class="card">
    <div style="background-image:url(//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250.3.0q60.jpg)" valign="bottom" class="card-header color-white no-border">旅途的山</div>
    <div class="card-content">
      <div class="card-content-inner">
        <p class="color-gray">发表于 2015/01/15</p>
        <p>此处是内容...</p>
      </div>
    </div>
    <div class="card-footer">
      <a href="#" class="link"></a>
      <a href="#" class="link">更多</a>
    </div>
  </div>
  <div class="card">
    <div style="background-image:url(//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250.3.0q60.jpg)" valign="bottom" class="card-header color-white no-border">旅途的山</div>
    <div class="card-content">
      <div class="card-content-inner">
        <p class="color-gray">发表于 2015/01/15</p>
        <p>此处是内容...</p>
      </div>
    </div>
    <div class="card-footer">
      <a href="#" class="link"></a>
      <a href="#" class="link">更多</a>
    </div>
  </div>
  ... 

Here is the complete demo

It's a very simple demo to show how to use Light7, see Examples for examples with more components please.