pusher-chameleon 1.0.3

data/docs/_posts/2016-04-04-typography.md

@@ -0,0 +1,111 @@
+---
+layout: post
+title:  "Typography"
+categories: layout
+permalink: /layout/typography/
+---
+
+We have two core fonts: `Realtime Text` and `Proxima Nova`.
+
+Realtime Text is used for titles and elements (such as buttons), whereas Proxima Nova is used for paragraph text.
+
+Title classes use the Greek alphabet as a naming convention. This allows the styled heading to be seperated from the semantic tag.
+
+For example, an H1 and an H6 with a `title--gamma` class, will both visually look the same.
+
+<div class="pattern">
+  <h1 class="title--alpha pattern-item">Page title (28px)</h1>
+  <br>
+  <h2 class="title--beta pattern-item">Section title - (24px)</h2>
+  <br>
+  <h3 class="title--gamma pattern-item">Section sub-title - (22px)</h3>
+  <br>
+  <h4 class="title--delta pattern-item">Paragraph title - (18px)</h4>
+  <br>
+  <h5 class="title--epsilon pattern-item">Paragraph sub-title - (16px)</h5>
+  <br>
+  <h6 class="title--zeta pattern-item">Paragraph heading - (12px)</h6>
+</div>
+
+``` html
+<h1 class="title--alpha">H1 - Page title</h1>
+<h2 class="title--beta">H2 - Section title</h2>
+<h3 class="title--delta">H3 - Section sub-title</h3>
+<h4 class="title--gamma">H4 - Paragraph title</h4>
+<h5 class="title--epsilon">H5 - Paragraph sub-title</h5>
+<h6 class="title--zeta">H6 - Paragraph heading</h6>
+```
+
+* * *
+
+## Utility Classes
+
+These classes provide a quick way to change text color and alignment.
+
+<div class="pattern">
+  <span class="u-color-primary">I will always be colored with the primary color</span>
+  <br>
+  <br>
+  <span class="u-color-developer">I will always be colored with the developer color</span>
+  <br>
+  <br>
+  <span class="u-color-beta">I will always be colored with the beta color</span>
+  <br>
+  <br>
+  <span class="u-color-snow">I will always be colored with the neutral snow color</span>
+  <br>
+  <br>
+  <span class="u-color-smoke">I will always be colored with the neutral smoke color</span>
+  <br>
+  <br>
+  <span class="u-color-silver">I will always be colored with the neutral silver color</span>
+  <br>
+  <br>
+  <span class="u-color-slate">I will always be colored with the neutral slate color</span>
+  <br>
+  <br>
+  <span class="u-color-black">I will always be colored with the neutral black color</span>
+  <br>
+  <br>
+  <span class="u-color-danger">I will always be colored with the ui danger color</span>
+  <br>
+  <br>
+  <span class="u-color-warning">I will always be colored with the ui warning color</span>
+  <br>
+  <br>
+  <span class="u-color-success">I will always be colored with the ui success color</span>
+</div> 
+
+```html
+<span class="u-color-primary">I will always be colored with the primary color</span>
+<span class="u-color-developer">I will always be colored with the developer color</span>
+<span class="u-color-beta">I will always be colored with the beta color</span>
+<span class="u-color-snow">I will always be colored with the neutral snow color</span>
+<span class="u-color-smoke">I will always be colored with the neutral smoke color</span>
+<span class="u-color-silver">I will always be colored with the neutral silver color</span>
+<span class="u-color-slate">I will always be colored with the neutral slate color</span>
+<span class="u-color-black">I will always be colored with the neutral black color</span>
+<span class="u-color-danger">I will always be colored with the ui danger color</span>
+<span class="u-color-warning">I will always be colored with the ui warning color</span>
+<span class="u-color-success">I will always be colored with the ui success color</span>
+```
+
+<div class="pattern u-text-align-center">
+  <span>I will be aligned centrally on desktop and tablet, and left aligned on mobile</span>
+</div>
+
+```html
+<div class="u-text-align-center">
+  <span>I will be aligned centrally on desktop and tablet, and left aligned on mobile</span>
+</div>
+```
+
+<div class="pattern u-text-align-right">
+  <span>I will be aligned to the right</span>
+</div>
+
+```html
+<div class="u-text-align-right">
+  <span>I will be aligned to the right</span>
+</div>
+```

data/docs/_posts/2016-04-05-syntax-highlighting.md

@@ -0,0 +1,28 @@
+---
+layout: post
+title:  "Syntax Highlighting"
+subtitle: "For code snippets, a pygments typography mixin is included to highlight different languages."
+categories: layout
+permalink: /layout/syntax-highlighting/
+---
+
+To use the mixin, just ensure that your codesnippets are wrapped in a `.highlight` class.
+
+**Ruby**
+
+``` ruby
+Pusher.trigger('my-channel', 'my-event', {
+  message: 'hello world'
+});
+```
+
+***
+
+**JavaScript**
+
+``` javascript
+var channel = pusher.subscribe('my-channel');
+channel.bind('my-event', function(data) {
+  alert('Received my-event with message: ' + data.message);
+});
+```

data/docs/_posts/2016-05-08-alerts.md

@@ -0,0 +1,50 @@
+---
+layout: post
+title:  "Alerts"
+subtitle: "Inline alerts are useful for attracting a users attention. They default to 100% width of the parent container."
+categories: components
+permalink: /components/alerts/
+---
+<div class="pattern">
+  <div class="alert alert--information">
+    <span class="alert__copy"><strong>Important:</strong> Protocols 1, 2, and 3 are no longer supported</span>
+  </div>
+</div>
+``` html
+<div class="alert alert--information">
+  <span class="alert__copy"><strong>Important:</strong> Protocols 1, 2, and 3 are no longer supported</span>
+</div>
+```
+
+<div class="pattern">
+  <div class="alert alert--error">
+    <span class="alert__copy">Sorry, something's gone wrong. Try again in a moment</span>
+  </div>
+</div>
+``` html
+<div class="alert alert--error">
+  <span class="alert__copy">Sorry, something's gone wrong. Try again in a moment</span>
+</div>
+```
+
+<div class="pattern">
+  <div class="alert alert--success">
+    <span class="alert__copy">Great! You're now signed up to receive our newsletter!</span>
+  </div>
+</div>
+``` html
+<div class="alert alert--success">
+  <span class="alert__copy">Great! You're now signed up to receive our newsletter!</span>
+</div>
+```
+
+<div class="pattern">
+  <div class="alert alert--beta">
+    <span class="alert__copy">Our Push Notifications system is currently in beta. This means you may experience errors, and the APIs may change.</span>
+  </div>
+</div>
+``` html
+<div class="alert alert--beta">
+  <span class="alert__copy">Our Push Notifications system is currently in beta. This means you may experience errors, and the APIs may change.</span>
+</div>
+```

data/docs/_posts/2016-05-12-labels.md

@@ -0,0 +1,22 @@
+---
+layout: post
+title:  "Labels"
+subtitle: "Labels are standalone inline-block elements useful for highlighting information, and conveying interface feedback"
+categories: components
+permalink: /components/labels/
+---
+<div class="pattern">
+<span class="label label--success">Collaborator</span>
+  <span class="label label--warning">Connection Timeout</span>
+  <span class="label label--danger">Error</span>
+  <span class="label label--information">Information</span>
+  <span class="label label--beta">Beta</span>
+</div>
+
+``` html
+<span class="label label--success">Connected</span>
+<span class="label label--warning">Connection Timeout</span>
+<span class="label label--danger">Error</span>
+<span class="label label--information">Information</span>
+<span class="label label--beta">Beta</span>
+```

data/docs/_posts/2016-05-13-tooltips.md

@@ -0,0 +1,33 @@
+---
+layout: post
+title:  "Tooltips"
+categories: components
+permalink: /components/tooltips/
+---
+
+Toolips are useful for adding in extra information, that doesn't make sense always showing.
+
+
+<div class="pattern">
+  <span class="tooltip" data-tooltip-title="We aim to respond to support queries within 72 hours">
+    <button class="btn btn--primary">Hover Me</button>
+  </span>
+</div>
+
+``` html
+<span class="tooltip" data-tooltip-title="We aim to respond to support queries within 72 hours">
+  <button class="btn btn--primary">Hover Me</button>
+</span>
+```
+
+<div class="pattern pattern--dark">
+  <span class="tooltip tooltip--light" data-tooltip-title="We aim to respond to support queries within 72 hours">
+    <button class="btn btn--primary">Hover Me</button>
+  </span>
+</div>
+
+``` html
+<span class="tooltip tooltip--light" data-tooltip-title="We aim to respond to support queries within 72 hours">
+  <button class="btn btn--primary">Hover Me</button>
+</span>
+```

data/docs/_sass/_base.scss

@@ -0,0 +1,36 @@
+
+/**
+ * Code formatting
+ */
+.highlight {
+  border-radius: 3px;
+  margin: 10px 0;
+}
+
+code {
+  padding: 1px 5px;
+}
+
+pre {
+  padding: 8px 12px;
+  overflow-x: auto;
+
+  > code {
+    border: 0;
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+p {
+  margin: 10px 0;
+}
+
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #ddd;
+  margin: 30px 0;
+  padding: 0; 
+}

data/docs/_sass/_chameleon_imports.scss

@@ -0,0 +1,20 @@
+$font-url-helper-path: false;
+$font-url-path: "/chameleon/fonts/";
+
+@import '../../stylesheets/chameleon';
+
+$global-font-smoothing: true;
+$file-url-helper-path: true;
+$file-url-path: "/chameleon/images/";
+
+
+$font-family-secondary: 'Proxima Nova';
+
+@include CHAMELEON-base;
+@include CHAMELEON-grid;
+@include CHAMELEON-typography;
+@include CHAMELEON-forms;
+@include CHAMELEON-flex-aligners;
+@include CHAMELEON-alert;
+@include CHAMELEON-labels;
+@include CHAMELEON-tooltips;

data/docs/_sass/_layout.scss

@@ -0,0 +1,136 @@
+.docs {
+  min-height: 100vh;
+  
+  @media #{$medium-up} {
+    padding-left: 300px;
+  }
+}
+
+@import 'layout/aside';
+
+.docs__content {
+  padding: 60px 0;
+
+  @media #{$medium-up} {
+    padding: 100px 0;
+  }
+}
+
+.pattern {
+  padding: 20px;
+  background-color: #fff;
+  border: 1px solid darken($color-snow, 5%);
+  border-bottom: 0;
+  border-radius: 3px 3px 0 0;
+
+  + .highlighter-rouge .highlight {
+    margin: 0 0 40px;
+    border-radius: 0 0 3px 3px;
+  }
+
+  &--dark {
+    background-color: $color-black;
+    border: 1px solid $color-black;
+  }
+
+  .grid {
+    margin-bottom: 20px;    
+  }
+
+  .grid__columns > .grid-block {
+    min-height: 50px;
+    background-color: #eee;
+    text-align: center;
+    padding: 18px 4px;
+    font-size: 14px;
+    line-height: 1.2em;
+  }
+
+
+  .flex-block {
+    width: 100%;
+    height: 220px;
+    background-color: #eee;
+  }
+}
+
+
+.cb-var {
+  width: 100%;
+  height: 40px;
+  border: 1px dashed #ccc;
+  border-top: 0;
+  text-align: center;
+  font-size: 15px;
+  padding: 12px 0;
+}
+
+@each $colorName, $colorHex in $color-palette {
+  .cb-#{$colorName} {
+    background-color: $colorHex;
+    @if (lightness($colorHex) > 70) {
+      color: $color-black;
+    }
+    @else {
+      color: #fff;
+    }
+  }
+}
+
+@each $colorName, $colorHex in $color-neutrals {
+  .cb-#{$colorName} {
+    background-color: $colorHex;
+    @if (lightness($colorHex) > 60) {
+      color: $color-black;
+      border: 1px solid $color-snow;
+    }
+    @else {
+      color: #fff;
+    }
+  }
+}
+
+.post-header {
+  border-bottom: 2px solid $color-smoke;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+
+  p {
+    margin-bottom: 10px;
+    width: 100%;
+    
+    @media #{$large-up} {
+      max-width: 45%;
+    }
+  }
+}
+
+
+.color-block {
+  width: 100%;
+  height: 180px;
+  padding: 26px 20px;
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  ul li {
+    @extend %font-family-secondary;
+    display: block;
+    font-size: rem-calc(14px);
+
+    &:first-of-type {
+      margin-bottom: 20px;
+      font-size: rem-calc(18px);
+      font-weight: 400;
+    }
+  }
+}
+
+.space-breaker {
+  width: 100%;
+  height: 30px;
+}

data/docs/_sass/_typography.scss

@@ -0,0 +1,41 @@
+h1 {
+  @extend %font-family-primary;
+  @extend .title--alpha;
+  // font-size: rem-calc(24px);
+  // color: $color-slate;
+  // font-weight: 700;
+  // line-height: 1em;
+  // text-transform: uppercase;
+}
+
+h2:not(.pattern-item) {
+  @extend %font-family-primary;
+  font-size: rem-calc(16px);
+  color: $color-slate;
+  font-weight: 700;
+  text-transform: uppercase;
+  margin-bottom: 20px;
+}
+
+h3 {
+  @extend .title--gamma;
+}
+
+h4 {
+  @extend .title--delta;
+}
+
+h5 {
+  @extend .title--epsilon;
+}
+
+h6 {
+  @extend .title--zeta;
+}
+
+p {
+  font-size: rem-calc(18px);
+  line-height: 1.6em;
+  margin-bottom: rem-calc(20px);
+  color: $color-slate;
+}