Merge pull request #487 from GradyD/docs

Added getting started doc

index.html

@@ -144,6 +144,7 @@
         <nav class="col-xs-3 menu">
           <ul>
             <li class="active withripple" data-target="#about">Material Design for Bootstrap</li>
+            <li class="withripple" data-target="#getting-started">Getting Started</li>
             <li><a href="http://fezvrasta.github.com/bootstrap-material-design/bootstrap-elements.html" target="_blank">Bootstrap elements <i class="mdi-action-open-in-new"></i></a></li>
             <li class="withripple" data-target="#material-colors">Material Colors</li>
             <li class="withripple" data-target="#checkbox">Checkbox</li>
@@ -233,6 +234,87 @@
               <pre><code>bower install bootstrap-material-design</code></pre>
 
 
+            </div>
+            <div class="well page" id="getting-started">
+              <h1 class="header">Getting Started</h1>
+              <h3>Download</h3>
+              <hr>
+              <h4>Install with NPM - Coming Soon</h4>
+              <p>You can also install and manage Material Bootstrap using NPM</p>
+              <pre><code>npm install</code></pre>
+              <h4>Install with Bower</h4>
+              <p>You can also install and manage Material Bootstrap using Bower</p>
+              <pre><code>bower install bootstrap-material-design</code></pre>
+              <h4>Install with Meteor</h4>
+              <p>You can also install and manage Material Bootstrap using Meteor</p>
+              <pre><code>meteor add fezvrasta:bootstrap-material-design</code></pre>
+              <br />
+              <h3>What's included</h3>
+              <hr>
+              <p>Material Bootstrap is downloadable in a two forms. Material.css only supports the primary shades of the material color palette and Material-fullpalette.css supports every shade of the material color palette</p>
+              <div class="panel panel-info">
+                <div class="panel-heading">
+                  <h3 class="panel-title">Required Frameworks</h3>
+                </div>
+                <div class="panel-body">
+                  <div class="list-group">
+                    <div class="list-group-item">
+                      <div class="row-action-primary">
+                        <i class="mdi-action-settings"></i>
+                      </div>
+                      <div class="row-content">
+                        <h4 class="list-group-item-heading">Bootstrap v3.0+</h4>
+                        <p class="list-group-item-text">This theme extends, styles, and modifies Bootstrap's elements and styles. Without Bootstrap this project will not display correctly. To install Bootstrap please go to <a href="http://getbootstrap.com/getting-started/" alt="Bootstrap Docs">Get Bootstrap</a></p>
+                      </div>
+                    </div>
+                    <div class="list-group-separator"></div>
+                    <div class="list-group-item">
+                      <div class="row-action-primary">
+                        <i class="mdi-action-settings"></i>
+                      </div>
+                      <div class="row-content">
+                        <h4 class="list-group-item-heading">jQuery 1.9.1+</h4>
+                        <p class="list-group-item-text">All JavaScript plugins require jQuery to be included.</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Material Bootstrap. You'll see something like this:</p>
+                <!-- This code must be aligned this way to render correctly -->
+                <pre><code class="language-bash" data-lang="bash">Material/
+├── css/
+│   ├── material.css
+│   ├── material.css.map
+│   ├── material.min.css
+│   ├── material.min.css.map
+│   ├── material-wfont.css
+│   ├── material-wfont.css.map
+│   ├── material-wfont.min.css
+│   ├── material-wfont.min.css.map
+│   ├── ripples
+│   ├── ripples.css.map
+│   ├── ripples.min.css
+│   ├── ripples.min.css.map
+├── js/
+│   ├── material.js
+│   ├── material.min.js
+│   ├── material.min.js.map
+│   ├── ripples.js
+│   ├── ripples.min.js
+│   ├── ripples.min.js.map
+└── fonts/
+    ├── Material-Design-Icons.eot
+    ├── Material-Design-Icons.svg
+    ├── Material-Design-Icons.ttf
+    ├── Material-Design-Icons.woff
+    └── ADD REMAINING GOOGLE FONT FILES HERE
+                </code>
+              </pre>
+              <p>Just copy the compiled CSS and JS files and the font files from the .zip and add them to your site.</p>
+              <br />
+              <p>Once copied you need to initialize the material javascript by adding the following javascript to your site,</p>
+              <pre><code>$.material.init()</code></pre>
             </div>
             <div class="well page" id="checkbox">
               <h1 class="header">Checkbox</h1>

package.json

@@ -26,6 +26,10 @@
     "framework"
   ],
   "homepage": "https://github.com/FezVrasta/bootstrap-material-design",
+  "dependencies": {
+    "bootstrap": ">=3.0",
+    "jquery": ">=1.9.1"
+  },
   "devDependencies": {
     "bootstrap": ">=3.0",
     "grunt": "^0.4.5",