Support bower

README.md

@@ -1,7 +1,7 @@
 LINING.JS
 ==
 
-An easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.
+> An easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.
 
 <img src="https://travis-ci.org/zmmbreeze/lining.js.svg?branch=master"/>
 
@@ -122,3 +122,12 @@ lining.effect.js
 Your text...
 <div>
 ```
+
+INSTALL
+--
+
+[DOWNLOAD](https://github.com/zmmbreeze/lining.js/releases) or using [bower](http://bower.io/) to install like this:
+
+```sh
+$ bower install lining.js
+```

assets/index.css

@@ -418,14 +418,19 @@ a.tip:hover {
     background-color: #FFF;
 }
 
-/* download */
+/* install & download */
+.main .install {
+    margin: 4em 0;
+    text-align: center;
+}
 .download {
-    display: block;
-    margin: 2em auto;
-    padding: 0 1em;
+    display: inline-block;
+    margin: 0 18px;
+    padding: 0 18px;
     width: 200px;
     height: 50px;
     line-height: 50px;
+    vertical-align: middle;
     font-family: 'Allerta Stencil', sans-serif;
     font-size: 1.5em;
     text-decoration: none;
@@ -437,6 +442,24 @@ a.download:hover {
     text-decoration: none;
 }
 
+.install code {
+    display: inline-block;
+    margin: 0 18px;
+    padding: 0 18px 0 0;
+    height: 50px;
+    line-height: 50px;
+    vertical-align: middle;
+    color: #EEE;
+    background: #543729;
+}
+.install code span {
+    float: left;
+    width: 2em;
+    display: inline-block;
+    text-align: center;
+    color: #A9D866;
+}
+
 /* share-info */
 .main .share-info {
     margin: 0 0 6em 0;

index.html

@@ -308,7 +308,11 @@ <h2>lining.effect.js</h2>
 Your text...
 &lt;div&gt;</code></pre>
 
-        <a href="https://github.com/zmmbreeze/lining.js/releases" target="_blank" class="download">DOWNLOAD</a>
+        <p class="install">
+            <a href="https://github.com/zmmbreeze/lining.js/releases" target="_blank" class="download">DOWNLOAD</a>
+            or
+            <code><span>$</span> bower install lining.js</code>
+        </p>
         <p class="share-info">
             <a href="https://twitter.com/share" class="twitter-share-button" data-text="An easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography." data-size="large" data-hashtags="liningjs">Tweet</a>
             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>