pusher-chameleon 1.0.3

data/docs/_layouts/page.html

@@ -0,0 +1,14 @@
+---
+layout: default
+---
+<article class="post">
+
+  <header class="post-header">
+    <h1 class="post-title">{{ page.title }}</h1>
+  </header>
+
+  <div class="post-content">
+    {{ content }}
+  </div>
+
+</article>

data/docs/_layouts/post.html

@@ -0,0 +1,15 @@
+---
+layout: default
+---
+<article class="post">
+
+  <header class="post-header">
+    <h1>{{ page.title }}</h1>
+    <p>{{ page.subtitle }}</p>
+  </header>
+
+  <main class="post-content">
+    {{ content }}
+  </main>
+
+</article>

data/docs/_plugins/chameleon_version.rb

@@ -0,0 +1,11 @@
+require 'json'
+
+module ChameleonVersion
+  class Generator < Jekyll::Generator
+    def generate(site)
+
+      site.data['chameleon_version'] = JSON.load(File.open(File.expand_path('../../../package.json', __FILE__)))['version']
+
+    end
+  end
+end

data/docs/_plugins/copy_images_directory.rb

@@ -0,0 +1,22 @@
+require 'fileutils'
+
+class MyNewCommand < Jekyll::Command
+  class << self
+
+    # As the docs get precompiled before being sent up to jekyll,
+    # and they sit inside Chameleon, the images folder needs to be
+    # copied into the docs repo.
+    if (!File.directory?('images'))
+      FileUtils.cp_r '../images', 'images'
+    end
+
+    def init_with_program(prog)
+      prog.command(:build) do |c|
+        c.action do
+          puts "hello world"
+        end
+      end
+    end
+
+  end
+end

data/docs/_plugins/ext.rb

@@ -0,0 +1,2 @@
+require "jekyll-assets"
+require "autoprefixer-rails"

data/docs/_posts/2016-03-16-getting-started.md

@@ -0,0 +1,28 @@
+---
+layout: post
+title:  "Getting Started"
+categories: chameleon
+permalink: /chameleon/getting-started
+---
+
+Chameleon is designed to work with most frameworks. If you find a language or framework doesn't seem to be working, feel free to create a pull request.
+
+## Importing with Sass
+
+Create a new `chameleon_and_globals.scss` file in your sass directory, and add the following:
+
+```scss
+@import 'chameleon';
+@include CHAMELEON-base;
+```
+
+This will bring in the core chameleon file, and the base styles (reset and box model). However to reduce bloat, not all patterns are included by default. You can now include the relevant mixins required for your project.
+
+For example, if you only required the grid, typography, and form patterns:
+
+```scss
+@include CHAMELEON-grid;
+@include CHAMELEON-typography;
+@include CHAMELEON-forms;
+...
+```

data/docs/_posts/2016-03-16-introduction.md

@@ -0,0 +1,24 @@
+---
+layout: post
+title:  "Overview"
+categories: chameleon
+permalink: /
+---
+
+Chameleon is a library of front-end patterns, variables, and helpers that when used, will Pusherify your UI!
+
+It includes our color palettes, typography, and repeated components that are used across our products.
+
+### FAQ
+
+*Why would I want to use this?*
+
+If you're working on a public facing app or project, then it's important that the visual style is kept consistent. The core aim of this library, is to help you spend less time worrying about what font-size something should be, or what the primary colour is. All of the variables are set, and many repeated patterns are here ready to drop in.
+
+*What things are in here?*
+
+Firstly, the base Sass variables. These include our colours, our typefaces, our font-weights, and our breakpoints. Certain patterns that are (or are likely to be) repeated across projects can also be found here. For example, buttons, form fields, and labels. There are also a few larger components, however for the most part, these are kept at project level.
+
+*Credits*
+
+Zurb Foundation for the the grid. Marvel for their colour naming convention.

data/docs/_posts/2016-03-17-buttons.md

@@ -0,0 +1,61 @@
+---
+layout: post
+title:  "Buttons"
+subtitle: "We have three main buttons styles: primary, secondary, and tertiary. Ideally, the primary button should only ever be used once on a page as the main call to action."
+categories: components
+permalink: /components/buttons/
+---
+
+<div class="pattern">
+  <a class="btn btn--primary">Get Started</a>
+  <a class="btn btn--primary ghosted">Get Started</a>
+</div>
+
+``` html
+<a class="btn btn--primary">Get Started</a>
+<a class="btn btn--primary ghosted">Get Started</a>
+```
+
+<div class="pattern pattern--dark">
+  <a class="btn btn--secondary">Update</a>
+  <a class="btn btn--secondary ghosted">Update</a>
+</div>
+
+``` html
+<a class="btn btn--secondary">Update</a>
+<a class="btn btn--secondary ghosted">Update</a>
+```
+
+<div class="pattern pattern--dark">
+  <a class="btn btn--tertiary">View Libraries</a>
+</div>
+
+``` html
+<a class="btn btn--tertiary">View Libraries</a>
+```
+
+## Small
+There is also a smaller button style. This is mainly used for UI elements, and in tables.
+
+<div class="pattern pattern">
+  <a class="btn btn--primary btn--small">Copy Snippet</a>
+<a class="btn btn--neutral btn--small">Test</a>
+</div>
+
+``` html
+<a class="btn btn--primary btn--small">Copy Snippet</a>
+<a class="btn btn--neutral btn--small">Test</a>
+```
+
+## Social Buttons
+These are used for linking social accounts when signing in/registering with Pusher
+
+<div class="pattern">
+  <button class="btn btn--google">Connect Google Account</button>
+  <button class="btn btn--github">Connect GitHub Account</button>
+</div>
+
+``` html
+  <button class="btn btn--google">Connect Google Account</button>
+  <button class="btn btn--github">Connect GitHub Account</button>
+```

data/docs/_posts/2016-03-17-colors.md

@@ -0,0 +1,139 @@
+---
+layout: post
+title:  "Colors"
+subtitle: "This is our new color palette. All new branded content should now be using these rather than the legacy blue/pink."
+categories: layout
+permalink: /layout/colors/
+---
+
+## Primary Colors
+
+<div class="grid grid--collapse">
+  <div class="grid__small-12 grid__medium-6 grid__columns">
+    <div class="color-block cb-primary">
+      <ul>
+        <li>$color-primary</li>
+        <li>#549eff</li>
+        <li>rgb(84, 158, 255)</li>
+        <li>Pantone Solid Uncoated 2173 U</li>
+      </ul>
+    </div>
+  </div>
+  <div class="grid__small-12 grid__medium-6 grid__columns grid--end">
+    <div class="color-block cb-developer">
+      <ul>
+        <li>$color-developer</li>
+        <li>#58d794</li>
+        <li>rgb(88, 215, 148)</li>
+        <li>Pantone Solid Uncoated 353 U</li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<div class="space-breaker"></div>
+
+## Neutral Colors
+We also have a defined palette of neutral colors, that can be used for text and borders.
+
+<div class="grid grid--collapse">
+  <div class="grid__small-12 grid__medium-4 grid__columns">
+    <div class="color-block cb-white">
+      <ul>
+        <li>$color-white</li>
+        <li>#ffffff</li>
+        <li>rgb(255, 255, 255)</li>
+      </ul>
+    </div>
+  </div>
+  <div class="grid__small-12 grid__medium-4 grid__columns">
+     <div class="color-block cb-snow">
+      <ul>
+        <li>$color-snow</li>
+        <li>#f4f8fb</li>
+        <li>rgb(244, 248, 251)</li>
+      </ul>
+    </div>
+  </div>
+  <div class="grid__small-12 grid__medium-4 grid__columns">
+    <div class="color-block cb-smoke">
+      <ul>
+        <li>$color-smoke</li>
+        <li>#d3dce7</li>
+        <li>rgb(211, 220, 231)</li>
+      </ul>
+    </div>
+  </div>
+  <div class="grid__small-12 grid__medium-4 grid__columns">
+    <div class="color-block cb-silver">
+      <ul>
+        <li>$color-silver</li>
+        <li>#8690a6</li>
+        <li>rgb(134, 144, 166)</li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="grid__small-12 grid__medium-4 grid__columns">
+    <div class="color-block cb-slate">
+      <ul>
+        <li>$color-slate</li>
+        <li>#414859</li>
+        <li>rgb(65, 72, 89)</li>
+      </ul>
+    </div>
+  </div>
+  <div class="grid__small-12 grid__medium-4 grid__columns grid--end">
+     <div class="color-block cb-black">
+      <ul>
+        <li>$color-black</li>
+        <li>#2b303b</li>
+        <li>rgb(43, 48, 59)</li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<div class="space-breaker"></div>
+
+## UI Colors
+These colors should be used to highlight elements that require action. They are mainly used on [Alerts](/alerts).
+
+<div class="grid grid--collapse">
+  <div class="grid__small-12 grid__medium-3 grid__columns">
+    <div class="color-block cb-success">
+      <ul>
+        <li>$color-success</li>
+        <li>#43ac6a</li>
+        <li>rgb(67, 172, 106)</li>
+      </ul>
+    </div>
+  </div>
+  <div class="grid__small-12 grid__medium-3 grid__columns">
+    <div class="color-block cb-warning">
+      <ul>
+        <li>$color-warning</li>
+        <li>#ffae00</li>
+        <li>rgb(255, 174, 0)</li>
+      </ul>
+    </div>
+  </div>
+  <div class="grid__small-12 grid__medium-3 grid__columns">
+    <div class="color-block cb-alert">
+      <ul>
+        <li>$color-danger</li>
+        <li>#b74a48</li>
+        <li>rgb(183, 74, 72)</li>
+      </ul>
+    </div>
+  </div>
+  <div class="grid__small-12 grid__medium-3 grid__columns">
+    <div class="color-block cb-information">
+      <ul>
+        <li>$color-information</li>
+        <li>#34495e</li>
+        <li>rgb(52, 73, 94)</li>
+      </ul>
+    </div>
+  </div>
+</div>

data/docs/_posts/2016-03-17-flex.md

@@ -0,0 +1,24 @@
+---
+layout: post
+title:  "Flex Aligners"
+subtitle: "Flexbox is a relatively new feature in CSS that allows for easy alignment of content. A number of helper classes are included in chameleon that allow for flexbox to quickly be used."
+categories: layout
+permalink: /layout/flex/
+---
+
+<div class="pattern">
+  <div class="grid grid--collapse">
+    <div class="grid__columns-12">
+      <div class="flex-block u-vertical-align u-horizontal-align">
+        <p>This is aligned vertically and horizontally</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+``` html
+<div class="u-vertical-align u-horizontal-align">
+  <p>This is aligned vertically and horizontally</p>
+</div>
+```

data/docs/_posts/2016-03-17-forms.md

@@ -0,0 +1,66 @@
+---
+layout: post
+title:  "Forms"
+subtitle: "Form inputs can be used without having to add any additional classes. With the exception of checkboxes and radios, they will always default to 100% width of their parent."
+categories: components
+permalink: /components/forms/
+---
+
+## Basic Input
+<div class="pattern">
+  <input type="email" placeholder="Email address">
+</div>
+
+``` html
+<input type="email" placeholder="Email address">
+```
+
+There are also modifier classes for inputs that sit on a darker background:
+
+<div class="pattern pattern--dark">
+  <input type="email" class="input--light" placeholder="Email address">
+</div>
+
+``` html
+<input type="email" class="input--light" placeholder="Email address">
+```
+
+As well as classes to indicate status:
+
+<div class="pattern">
+  <input type="email" class="valid" placeholder="Email address">
+  <input type="password" class="error" style="margin-top:20px" placeholder="Password">
+</div>
+
+``` html
+<input type="email" class="valid" placeholder="Email address">
+<input type="password" class="error" placeholder="Password">
+```
+
+## Select
+<div class="pattern">
+  <select>
+    <option selected disabled>Select a cluster</option>
+    <option>mt1 (us-east-1)</option>
+    <option>eu (eu-west-1)</option>
+    <option>ap1 (ap-southeast-1)</option>
+  </select>
+</div>
+
+```html
+<select>
+  <option selected disabled>Select a cluster</option>
+  <option>mt1 (us-east-1)</option>
+  <option>eu (eu-west-1)</option>
+  <option>ap1 (ap-southeast-1)</option>
+</select>
+```
+
+## Checkbox
+<div class="pattern">
+  <input type="checkbox" value="1" checked="checked" name="hello" id="hello">
+</div>
+
+```html
+<input type="checkbox" value="1" checked="checked" name="hello" id="hello">
+```

data/docs/_posts/2016-03-17-visibility.md

@@ -0,0 +1,28 @@
+---
+layout: post
+title:  "Visibility"
+subtitle: "There are a number of utility classes, including a set of visibility classes. These allow content to be hidden under certain circumstances (for example at differing screen sizes)."
+categories: layout
+permalink: /layout/visibility/
+---
+
+Each breakpoint has it's own set of classes that can be used:
+
+```sass
+$breakpoints: (
+  small: 0,
+  medium: 640px,
+  large: 1024px,
+  xlarge: 1200px,
+  xxlarge: 1440px,
+);
+```
+
+``` html
+<div class="hide-for-small"></div>
+<div class="hide-for-large"></div>
+...
+<div class="show-for-medium"></div>
+<div class="show-for-xlarge"></div>
+...
+```