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

{% highlight html %} {% endhighlight %}

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:

{% highlight html %} Title {% endhighlight %}

Add Components

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

First, We include a title bar and toolbar:

{% highlight html %}

Back

Title

{% endhighlight %}

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

{% highlight html %}

旅途的山

发表于 2015/01/15

此处是内容...

赞更多

旅途的山

发表于 2015/01/15

此处是内容...

赞更多

... {% endhighlight %}

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.

{% include footer.html %}