Docs till customizing

README.md

@@ -1,2 +1,9 @@
 # chota
-A really small CSS framework
+A really small CSS framework. 
+
+Full details on [master](https://github.com/jenil/chota/blob/master/README.md)
+
+To run docs locally first install Jekyll and then run:
+```
+jekyll serve
+```

doc-styles.css

@@ -3,6 +3,17 @@
     flex-direction: column;
 }
 
+code {
+  background-color: #f7f7f7;
+  color: #c62424;
+  white-space: pre-wrap;
+  padding: 0.2em 0.4em;
+}
+
+pre code {
+  background: none;
+}
+
 .logo {
     flex: 1;
     flex-direction: column;
@@ -27,7 +38,7 @@ section {
     margin: 5rem auto;
 }
 
-
+.highlight, code { background-color: #f1f5f5; }
 .highlight .c { color: #93a1a1 } /* Comment */
 .highlight .err { color: #586e75 } /* Error */
 .highlight .g { color: #586e75 } /* Generic */

index.html

@@ -22,8 +22,10 @@
       <div class="row is-center">
         <div class="col-3">
           <nav class="tabs">
-              <a href="#features">features</a>
-              <a href="#start">start</a>
+            <a href="#features">features</a>
+            <a href="#start">start</a>
+            <a href="#docs">docs</a>
+            <a href="https://github.com/jenil/chota">github</a>
           </nav>
         </div>
       </div>
@@ -42,19 +44,45 @@
     <section id="start">
       <h2>Getting Started</h2>
       <p>All you need is 1 CSS file, <code>chota.css</code> to be included in your webpage.</p>
-      <h5>Easiest way</h5>
       <p>Link this CSS in your HTML:</p>
-      {% highlight html %}
-        <link rel="stylesheet" href="https://unpkg.com/chota">
-      {% endhighlight %}
-      <p>You can download it from Github or install it from npm or yarn:</p>
-      {% highlight bash %}
-      npm install chota
-      {% endhighlight %}
+      {% highlight html %}<link rel="stylesheet" href="https://unpkg.com/chota">{% endhighlight %}
+      <br>
+      <p>You can download it from Github or install it from <code>npm</code> or <code>yarn</code>:</p>
+      {% highlight bash %} npm install chota {% endhighlight %}
+    </section>
+    <section id="docs">
+      <h2>Docs</h2>
+      <p class="catch">
+        Chota is <em>dead</em> simple to use. It doesn't require learning a lot of class names like other frameworks. It applies a few basic styles to the HTML following the <a href="https://www.w3schools.com/html/html5_semantic_elements.asp" target="_blank">HTML Semenatics</a>.
+      </p>
+      <p>Here is a <a href="https://rawgit.com/jenil/chota/master/test/index.html">demo</a>.</p>
+
+      <h3>Customizing</h3>
+      <p>Chota comes with a basic set of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSS variables</a>:</p>
+{% highlight css %}
+:root {
+    --primary-color: #1a9f60;
+    --lightGrey-color: #ddd;
+    --grid-maxWidth: 120rem;
+    --grid-gutter: 1.5rem;
+    --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+{% endhighlight %}
+    <p>To override the variables, just add them to your <code>:root</code> selector after importing <code>chota.css</code></p>
+{% highlight css %}
+@import url(chota.css)
+
+:root {
+    --primary-color: #da1d50; /* brand color */
+    --grid-maxWidth: 108rem; /* max container width 1080px */
+}
+
+/* Other styles..... */
+{% endhighlight %}
     </section>
   </div>
   <footer class="is-text-center">
-    <h5>Made by <a href="#">Jenil Gogari</a></h5>
+    <h5>Made by <a href="//jgog.in">Jenil Gogari</a></h5>
   </footer>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){