Add customization doc, move active_material to parent to make it shor…

…ter to include

README.md

@@ -1,9 +1,14 @@
 # ActiveMaterial
 
-ActiveAdmin skin based on Google's Material Design.
+An ActiveAdmin skin based on Google's Material Design.
 
 <img src="http://i.imgur.com/kDkGzYe.png">
 
+1. [Installation](#installation)
+2. [Usage](#usage)
+3. [Customization](#customization)
+4. [Contributing](#contributing)
+
 ## Installation
 
 Add this line to your application's Gemfile:
@@ -14,17 +19,25 @@ gem "active_material", git: "[email protected]:vigetlabs/active_material.git"
 
 And then execute:
 
+```shell
     $ bundle
+```
 
 Or install it yourself as:
 
+```shell
     $ gem install active_material
+```
 
 ## Usage
 
-In `app/assets/stylesheets/active_admin.css.scss`, replace `@import "active_admin/base";` with `@import "active_material/active_material";`. If you wish to override the [default colors][1], do that *before* the `@import` statement.
+In `app/assets/stylesheets/active_admin.css.scss`, replace `@import
+"active_admin/base";` with `@import
+"active_material/active_material";`. with `@import "active_material";`
+
+## Customization
 
-[1]: https://github.com/vigetlabs/active_material/blob/master/app/assets/stylesheets/active_material/values/colors.scss
+Refer to the [Customization Guide](./docs/customization.md')
 
 ## Contributing
 

app/assets/stylesheets/active_material/active_material.scss → app/assets/stylesheets/active_material.scss

@@ -7,30 +7,30 @@
 
 /// $variables, these should always end with !default
 /// so that they can be overriden
-@import "values/colors";
-@import "values/units";
-@import "values/fonts";
-@import "values/breakpoints";
-@import "values/elevation";
-@import "values/*";
+@import "active_material/values/colors";
+@import "active_material/values/units";
+@import "active_material/values/fonts";
+@import "active_material/values/breakpoints";
+@import "active_material/values/elevation";
+@import "active_material/values/*";
 
 /// Generators describe functions, mixins, and classes
 /// intended for extension. More or less, they are "style builders"
 /// instead of "style descriptors"
-@import "generators/functions";
-@import "generators/mixins";
-@import "generators/*";
+@import "active_material/generators/functions";
+@import "active_material/generators/mixins";
+@import "active_material/generators/*";
 
 /// Atoms are individual styles to enhance reusability
-@import "atoms/*";
+@import "active_material/atoms/*";
 
 /// Foundational rules that setup the page
-@import "global/foundation";
-@import "global/*";
+@import "active_material/global/foundation";
+@import "active_material/global/*";
 
-/// Prototypes are collections of %selectors to allow for css design
+/// Prototypes are collections of mixins that allow for css design
 /// without the constraints of limiting ActiveAdmin selectors
-@import "prototypes/*";
+@import "active_material/prototypes/*";
 
 /// Components describe actual implementation within Active Admin
-@import "components/*";
+@import "active_material/components/*";

app/assets/stylesheets/active_material/values/colors.scss

@@ -7,7 +7,7 @@ $am-theme-primary: #009688 !default;
 /// containers that are already treated with primary color.
 $am-theme-primary-700: #0D3C55 !default;
 
-/// Used for your primary action button and components like switches or sliders.
+/// Used for primary action button and components like switches or sliders.
 $am-theme-accent: #cddc39 !default;
 
 /// The color treatment of error messages.

docs/customization.md

@@ -0,0 +1,26 @@
+# Customizing ActiveMaterial
+
+This document is a work in progress. As customization needs arise, it
+will be updated to provide an official answer for customizing ActiveMaterial.
+
+1. Customizing the Color Theme
+
+## Customizing the Color Theme
+
+Definitions of all colors exist in
+[a single colors.scss file](`../app/assets/stylesheets/active_material/values/colors.scss`). These
+color variables are assigned using the `!default` Sass flag, so they
+can be easily overridden.
+
+Specifically, there are a few key color variables important when
+retheming:
+
+**$am-theme-primary**: The main color. This shows itself in the
+  header, links, and other important elements.
+
+**$am-theme-primary-700**: A darker version of the primary color used for
+contrast. This shows itself within important elements that overlay
+containers that are already treated with the primary color.
+
+**$am-theme-secondary**: Used for your primary action button and
+  components like switches or sliders.

lib/active_material/version.rb

@@ -1,3 +1,3 @@
 module ActiveMaterial
-  VERSION = "0.0.1"
+  VERSION = "1.0.0"
 end