Update documentation

ilkeryilmaz · May 28, 2017 · c776dcb · c776dcb
1 parent 146ced1
commit c776dcb
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -3,17 +3,20 @@ jQuery timeline plugin, easily creates a timeline.
 
 ![screenshoot](https://raw.githubusercontent.com/ilkeryilmaz/timelinejs/master/demo/img/example.png)
 
-Getting Started:
--------
+## Getting Started
 
+#### 1.1. Installation with Package Managers
 Timeline.js is now setup and ready to be used with [Bower](https://bower.io/) and [NPM](https://www.npmjs.com/package/timelinejs-slider) and can be installed using the following commands.
 
 ```shell
 bower install timelinejs-slider
+```
 
+```shell
 npm install timelinejs-slider
 ```
 
+#### 1.2. The Basics
 Include the jQuery library and plugin:
 
 ```html
@@ -52,7 +55,7 @@ $(function(){
 ```
 
 
-Options:
+## Options
 
 _Available options listed below._
 ```js
@@ -85,18 +88,16 @@ $('.timeline').Timeline({
 ```
 
 
-Demo
--------
+## Demo
 
 https://ilkeryilmaz.github.io/timelinejs/
 
 
-Tasks 
--------
+## Tasks 
 
 - [x] ~~Basic plugin~~
 - [x] ~~Demo page and documentation~~
 - [ ] Mouse drag and touch support
 - [ ] Mobile support
 - [ ] Next/prev button
-- [ ] Advanced features (date slider, autoplay etc.)
+- [ ] Advanced features (date slider, ~~autoplay~~.)
diff --git a/demo/css/demo.css b/demo/css/demo.css
@@ -48,6 +48,9 @@ code {
   font-size: 90%;
   background-color: #f6f8fa;
   border-radius: .25rem; }
+  code .pln,
+  code .pun {
+    color: #4A2AB2; }
 
 .header-wrapper {
   padding: 5rem 0; }
@@ -77,6 +80,8 @@ code {
   @media (min-width: 576px) {
     .section-list {
       border-radius: 1rem; } }
+  .section-list a {
+    color: #4A2AB2; }
   .section-list h2 {
     margin-bottom: 1.25rem;
     font-size: 2rem;

diff --git a/demo/css/demo.scss b/demo/css/demo.scss
@@ -64,6 +64,11 @@ code {
   font-size: 90%;
   background-color: #f6f8fa;
   border-radius: .25rem;
+
+	.pln,
+	.pun{
+		color: $color-primary;
+	}
 }
 
 // Header
@@ -106,6 +111,10 @@ code {
     border-radius: 1rem;
   }
 
+	a {
+		color: $color-primary;
+	}
+
   h2 {
 	margin-bottom: 1.25rem;
 	font-size: 2rem;

diff --git a/demo/index.html b/demo/index.html
@@ -37,6 +37,19 @@ <h2>easily creates timeline slider.</h2>
       <section class="section-list">
         <div class="container">
           <h2>Getting Started</h2>
+					<h3>1.1. Installation with Package Managers</h3>
+					<div>
+						<p>Timeline.js is now setup and ready to be used with <a href="https://bower.io/" target="_blank">Bower</a> and <a href="https://www.npmjs.com/package/timelinejs-slider" target="_blank">NPM</a> and can be installed using the following commands.
+						</p>
+						<pre class="prettyprint lang-shell">
+<code>bower install timelinejs-slider</code>
+</pre>
+						<pre class="prettyprint lang-shell">
+<code>npm install timelinejs-slider</code>
+</pre>
+					</div>
+
+					<h3>1.2. The Basics</h3>
 
           <div>
             <p>Include the jQuery library and plugin:</p>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "timelinejs-slider",
   "description": "jQuery timeline plugin, easily creates a timeline.",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "repository": "https://github.com/ilkeryilmaz/timelinejs",
   "license": "MIT",
   "devDependencies": {