ionic-team · maximilianhurl · Aug 14, 2013 · Aug 15, 2013 · Aug 15, 2013 · Aug 15, 2013
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 *.pyc
 *.sw*
 *.DS_Store
+
+env/*
diff --git a/README.md b/README.md
@@ -8,3 +8,45 @@ Graphite is a curated set of nice, simple, and clean jQuery Mobile themes based
 We've included a modified jQuery Mobile base theme that we use to generate the "Graphite" set of themes. This theme has a few changes made to the default theme.
 
 Created by [Ben Sperry](http://bensperry.com/) and [Max Lynch](http://maxlynch.com/) creators of [Codiqa, the jQuery Mobile interface builder](http://codiqa.com/), and Joe Nelson of [Bendyworks](http://bendyworks.com/) in Madison, Wisconsin.
+
+---
+
+## Creating a custom color scheme
+
+#### .1 Define your customized colors 
+
+To generate a new color scheme using you're own custom colors you first need tp create a new config  file (in Yaml format). You can use the configs stored in `/themes/` as your base.
+
+The most basic version looks something like this.
+
+	name: candy
+	'source-theme': 'res/jqm/1.3.2/jquery.mobile-1.3.2.graphite.blue.css'
+	'jqm-version': '1.3.2'
+
+	base_color: &BASE_COLOR '#f75548'
+	secondary_color: &SECONDARY_COLOR '#ff6b5f'
+	highlight_border_color: &HIGHLIGHT_COLOR '#a9281e'
+
+You then need to add your new theme file to the `Makefile` in side the `generate` function.
+
+	generate:
+		@python helper/painter.py themes/aloe.yaml
+		@python helper/painter.py themes/candy.yaml
+		...
+		@python helper/painter.py <<your theme location>>.yaml
+
+#### .2 Generating your theme
+
+To generate your new theme you need to call `generate` in the Makefile. This will call a Python script that will create the files needed for your theme.
+
+Before calling this Python script you need to install Python and the other dependices using the following method.
+
+*Note - this method assumes you have Python, PIP and  Virtualenv installed. For a guide on installing and using PIP and Virutalenv visit [http://dabapps.com/blog/introduction-to-pip-and-virtualenv-python/](http://dabapps.com/blog/introduction-to-pip-and-virtualenv-python/)*
+
+1. In terminal `cd` into the root directory of Graphite
+2. Now create a new virutalenv by inputting `virutalenv env` into your terminal window
+3. Activate your new virutalenv `source env/bin/activate`
+4. Install any requirements `pip install -r requirements.txt`
+5. Now you can call the makefile using `make Makefile generate`
+6. Your newly generated theme will be stored at `/generated/<<name at top of theme.yaml>>`
+
diff --git a/blue.yaml b/blue.yaml
@@ -1,7 +1,7 @@
 # Meta
 name: blue
-'source-theme': 'res/jqm/1.2.0/jquery.mobile-1.2.0.graphite.blue.css'
-'jqm-version': '1.2.0'
+'source-theme': 'res/jqm/1.3.2/jquery.mobile-1.3.2.graphite.blue.css'
+'jqm-version': '1.3.2'
 
 # Core
 'global-radii-blocks': '0.2em'

diff --git a/generated/aloe/index.html b/generated/aloe/index.html
@@ -1,15 +1,15 @@
-<!DOCTYPE html> 
-<html> 
-<head> 
-  <title>My Page</title> 
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My Page</title>
   <meta name="viewport" content="initial-scale=1.0">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <link rel="stylesheet" href="jquery.mobile-1.3.1.css" />
+  <link rel="stylesheet" href="jquery.mobile-1.3.2.css" />
   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
-  <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
-</head> 
-<body> 
+  <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
+</head>
+<body>
 
 <div data-role="page">
 
@@ -18,8 +18,8 @@
     <h1>My Title</h1>
   </div><!-- /header -->
 
-  <div data-role="content"> 
-    <p>This is a <a href="#">link</a></p>    
+  <div data-role="content">
+    <p>This is a <a href="#">link</a></p>
     <ul data-role="listview" data-inset="true">
       <li data-role="list-divider">Divider</li>
       <li><a href="#">Item 1</a></li>
@@ -30,7 +30,7 @@ <h1>My Title</h1>
     <select name="flip-1" id="flip-1" data-role="slider">
       <option value="off">Off</option>
       <option value="on">On</option>
-    </select> 
+    </select>
     <a href="#" data-role="button">Click me</a>
     <fieldset data-role="controlgroup">
       <legend>Choose a pet:</legend>
@@ -54,7 +54,7 @@ <h1>My Title</h1>
 
           <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
           <label for="checkbox-2a">Doritos</label>
-          
+
           <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
           <label for="checkbox-3a">Fritos</label>
 
@@ -85,7 +85,7 @@ <h3>I'm a themed collapsible with a themed content</h3>
           <select name="switch-c" id="switch-c" data-role="slider">
             <option value="off">Off</option>
             <option value="on">On</option>
-          </select> 
+          </select>
         </div>
 
         <div data-role="fieldcontain">
@@ -104,7 +104,7 @@ <h3>I'm a themed collapsible with a themed content</h3>
           <label for="checkbox-7c"><em>i</em></label>
 
           <input type="checkbox" name="checkbox-8c" id="checkbox-8c" class="custom" />
-          <label for="checkbox-8c">u</label>    
+          <label for="checkbox-8c">u</label>
           </fieldset>
         </div>