kayessess 0.1.0

data/README.md

@@ -0,0 +1,7 @@
+# Kayessess [![Build Status](https://travis-ci.org/aerobicio/kayessess.png)](https://travis-ci.org/aerobicio/kayessess) [![Code Climate](https://codeclimate.com/github/aerobicio/kayessess.png)](https://codeclimate.com/github/aerobicio/kayessess) [![Coverage Status](https://coveralls.io/repos/aerobicio/kayessess/badge.png)](https://coveralls.io/r/aerobicio/kayessess)
+
+## A Rails plugin/gem for helping to get KSS into your Rails app.
+
+Mad hacks on going.
+
+![](http://f.cl.ly/items/3g0A2w011Q0M2i441D23/anim0205-1_e0.gif)

data/app/assets/javascripts/kayessess.js.coffee

@@ -0,0 +1 @@
+#= require kss

data/app/assets/javascripts/kss.coffee

@@ -0,0 +1,60 @@
+# Vendored from https://raw.github.com/kneath/kss/master/lib/kss.coffee
+#
+# ---
+#
+# This class scans your stylesheets for pseudo classes, then inserts a new CSS
+# rule with the same properties, but named 'psuedo-class-{{name}}'.
+#
+# Supported pseudo classes: hover, disabled, active, visited, focus, target.
+#
+# Example:
+#
+#   a:hover{ color:blue; }
+#   => a.pseudo-class-hover{ color:blue; }
+class KssStateGenerator
+  psuedo_selectors = [
+    'hover',
+    'enabled',
+    'disabled',
+    'active',
+    'visited',
+    'focus',
+    'target',
+    'checked',
+    'empty',
+    'first-of-type',
+    'last-of-type',
+    'first-child',
+    'last-child']
+
+  constructor: ->
+    pseudos = new RegExp "(\\:#{psuedo_selectors.join('|\\:')})", "g"
+
+    try
+      for stylesheet in document.styleSheets
+        if stylesheet.href && stylesheet.href.indexOf(document.domain) >= 0
+          idxs = []
+          for rule, idx in stylesheet.cssRules
+            if (rule.type == CSSRule.STYLE_RULE) and pseudos.test(rule.selectorText)
+              replaceRule = (matched, stuff) ->
+                return matched.replace(/\:/g, '.pseudo-class-')
+              @insertRule(rule.cssText.replace(pseudos, replaceRule))
+            pseudos.lastIndex = 0
+
+  # Takes a given style and attaches it to the current page.
+  #
+  # rule - A CSS rule String (ex: ".test{ display:none; }").
+  #
+  # Returns nothing.
+  insertRule: (rule) ->
+    headEl = document.getElementsByTagName('head')[0]
+    styleEl = document.createElement('style')
+    styleEl.type = 'text/css'
+    if styleEl.styleSheet
+      styleEl.styleSheet.cssText = rule
+    else
+      styleEl.appendChild(document.createTextNode(rule))
+
+    headEl.appendChild(styleEl)
+
+new KssStateGenerator

data/app/assets/stylesheets/_constants.scss

@@ -0,0 +1,38 @@
+@import "neat-helpers";
+
+// Root type sizing
+// ----------------------------------------
+$base-font-size:            1.0;
+$line-height-ratio:         1.5;
+
+// Spacing units and sizings
+// ----------------------------------------
+$_spacing-tight:            0.7rem;
+$_spacing-medium:           1.4rem;
+$_spacing-wide:             2.8rem;
+$_spacing-superwide:        3.6rem;
+
+// Grid & layout structure
+// ----------------------------------------
+$_grid-prefix:              unquote("");
+$column:                    10rem;
+$gutter:                    2rem;
+$grid-columns:              6;
+$max-width:                 140rem;
+$visual-grid:               false;
+$visual-grid-index:         front;
+$visual-grid-color:         #C75D48;
+$visual-grid-opacity:       0.05;
+
+// Style
+// ----------------------------------------
+$font-family:               'Helvetica Neue', Helvetica, Arial, sans-serif;
+$background-color:          #ffffff;
+$color:                     #2B315C;
+
+$red:                       #E2857E;
+$orange:                    #EEC03D;
+$yellow:                    #F0E53F;
+$green:                     #C3DE32;
+$blue:                      #9AC7FE;
+$purple:                    #D4AAFE;

data/app/assets/stylesheets/kayessess.css.scss

@@ -0,0 +1,34 @@
+@charset "utf-8";
+
+// External Mixins and Constants
+// ----------------------------------------
+@import "bourbon";
+@import "constants";
+@import "neat";
+
+// only apply a reset to things that are kayessess
+[class*=kayessess] {
+  @import "lib/reset";
+}
+
+// Namespace everything inside a scope
+// ----------------------------------------
+html.kayessess {
+
+  // Mixins, functions and placeholders
+  // ----------------------------------------
+  @import "lib/mixins";
+  @import "lib/functions";
+
+
+  // Base styles, unclassed HTML elems
+  // ----------------------------------------
+  @import "lib/base";
+  @import "lib/spacing";
+
+  @import "layout/*";
+
+  @import "lib/syntax";
+
+  @import "modules/*";
+}

data/app/assets/stylesheets/layout/_footer.scss

@@ -0,0 +1,3 @@
+.kayessess__footer {
+
+}

data/app/assets/stylesheets/layout/_header.scss

@@ -0,0 +1,6 @@
+.kayessess__header {
+  @extend .padding-medium-top;
+  @extend .padding-medium-bottom;
+
+  background-color: #F0F3F5;
+}

data/app/assets/stylesheets/layout/_main.scss

@@ -0,0 +1,4 @@
+.kayessess__main {
+  @extend .padding-wide-top;
+  @extend .padding-wide-bottom;
+}

data/app/assets/stylesheets/layout/_masthead.scss

@@ -0,0 +1,8 @@
+.kayessess__masthead {
+  @extend .padding-medium;
+  @extend .padding-wide-left;
+  @extend .padding-wide-right;
+
+  text-transform: uppercase;
+  font-weight: bold;
+}

data/app/assets/stylesheets/layout/_navigation.scss

@@ -0,0 +1,11 @@
+.kayessess__navigation {
+  @extend .padding-medium;
+  @extend .padding-wide-left;
+  @extend .padding-wide-right;
+}
+
+.kayessess__navigation__item {
+  display: block;
+  float: left;
+  margin-right: 20px;
+}

data/app/assets/stylesheets/lib/_base.scss

@@ -0,0 +1,25 @@
+&,
+body {
+  font-family: $font-family;
+  min-height: 100%;
+  height: 100%;
+}
+
+& {
+  background-color: $background-color;
+  color: $color;
+
+  &.is-example {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAAAAACo4kLRAAAAF0lEQVR4AWP4Dwff4WBoCyKYCOkhLQgAy9OIQG/ubwsAAAAASUVORK5CYII=');
+
+    .kayessess__examples{
+      @include clearfix;
+
+      padding: 50px;
+    }
+
+    .kayessess__example__code {
+      display: none;
+    }
+  }
+}

data/app/assets/stylesheets/lib/_functions.scss

@@ -0,0 +1,27 @@
+// Join a list of strings together using a joining string, eg;
+//
+//    $a: top right bottom left;
+//    implode('-', $a) == "top-right-bottom-left"
+//
+@function implode($joiner, $vars...) {
+  $join: "";
+  $string: "";
+  @for $i from 1 through length($vars) {
+    $var: nth($vars, $i);
+    @if $var {
+      $string: "#{$string}#{$join}#{$var}";
+      @if $i == 1 { $join: $joiner; }
+    }
+  }
+  @return $string;
+}
+
+
+// Return a spacing size - used in the rare cases where we want to use
+// combinations of spacing sizes
+@function get_spacing($size) {
+  @if $size == tight     { @return $_spacing-tight; }
+  @if $size == medium    { @return $_spacing-medium; }
+  @if $size == wide      { @return $_spacing-wide; }
+  @if $size == superwide { @return $_spacing-superwide; }
+}

data/app/assets/stylesheets/lib/_mixins.scss

@@ -0,0 +1,64 @@
+// Text overflow is still a vendor-prefixed property for IE8
+// clip | ellipsis | string
+@mixin text-overflow($overflow) {
+  -webkit-text-overflow: $overflow;
+  -khtml-text-overflow:  $overflow;
+  -moz-text-overflow:    $overflow;
+  -o-text-overflow:      $overflow;
+  text-overflow:         $overflow;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+@mixin font-size($font-size, $line_height: 1.5){
+  font-size:    $font-size * 10px;
+  font-size:    $font-size * 1rem;
+  line-height:  $line_height;
+}
+
+// Utility mixin for setting spacing (margin + padding). Useful for inside
+// mediaqueries where the standard spacing classes cannot be @extended
+//
+// returns [$method]: $size;
+// returns [$method]-$direction: size;
+@mixin spacing($method, $size, $direction: false) {
+  @if $direction {
+    #{$method}-#{$direction}: get_spacing($size);
+  } @else {
+    #{$method}: get_spacing($size);
+  }
+}
+
+@mixin margin($size, $direction: false) {
+  @include spacing(margin, $size, $direction);
+}
+
+@mixin padding($size, $direction: false) {
+  @include spacing(padding, $size, $direction);
+}
+
+@function strip_unit($value) {
+  @return $value / ($value * 0 + 1);
+}
+
+@function to_rem($value){
+  @return strip_unit($value) * 1rem;
+}
+
+@mixin hardware_accelerate() {
+  -webkit-transform: translateZ(0);
+  -webkit-perspective: 1000;
+  -webkit-backface-visibility: hidden;
+}
+
+// Makes items un-selectable. I.e. if you tap and hold on a button, it won't get selected.
+@mixin noselect {
+  @include prefixer(user-select, none, webkit moz o spec);
+
+  -webkit-touch-callout: none;
+}
+
+@mixin antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

data/app/assets/stylesheets/lib/_reset.scss

@@ -0,0 +1,207 @@
+// Use border-box for everything by default, even :before and :after
+[class*=kayessess]{ &, &:before, &:after{ @include box-sizing(border-box); } }
+
+// 1. Keeps page centred in all browsers regardless of content height
+// 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
+//    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
+html.kayessess {
+  overflow-y: scroll; // 1
+  -webkit-text-size-adjust: 100%; // 2
+  -ms-text-size-adjust: 100%; // 2
+  text-size-adjust: 100%; // 2
+  min-height: 100%;
+}
+
+// 1. Clear default browser margin
+// 2. Default line-height inconsistent across browsers
+body {
+  margin:0; // 1
+  line-height:1; // 2
+}
+
+
+// 1. Nicer image sizing in IE
+// 2. Common default
+img[class*=kayessess] {
+  -ms-interpolation-mode: bicubic; // 1
+  display:block; // 2
+}
+
+// Lists
+// ------------------------------------------------
+ol[class*=kayessess],
+ul[class*=kayessess] {
+  margin:0;
+  padding:0;
+}
+
+dl[class*=kayessess],
+dd[class*=kayessess] {
+  margin:0;
+}
+
+
+// Reset list items back to normal block display.
+// This allows us to use lists for semantic markup
+// without needing to set this each time.
+// Lists only look like lists in blocks of copy.
+li {
+  display: block;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+// Headings
+// ------------------------------------------------
+// Resets all headings to look like normal text
+h1[class*=kayessess],
+h2[class*=kayessess],
+h3[class*=kayessess],
+h4[class*=kayessess],
+h5[class*=kayessess],
+h6[class*=kayessess] {
+  font-weight:inherit;
+  line-height:inherit;
+  font-size:inherit;
+  margin:0;
+}
+
+// Block Text
+// ------------------------------------------------
+p[class*=kayessess] {
+  margin:0;
+}
+
+blockquote[class*=kayessess] {
+  margin:0;
+}
+
+
+// Improve the appearance of preformatted text
+pre[class*=kayessess] {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  margin:0;
+  font-family:inherit;
+  font-size:inherit;
+}
+
+// Inline Text
+// ------------------------------------------------
+cite[class*=kayessess] {
+  font-style:normal;
+}
+
+ins[class*=kayessess] {
+  text-decoration:none;
+}
+
+dfn[class*=kayessess] {
+  font-style:inherit;
+}
+
+del[class*=kayessess] {
+  text-decoration:none;
+}
+
+mark[class*=kayessess] {
+  background:none;
+  color:inherit;
+}
+
+address[class*=kayessess] {
+  font-style:normal;
+}
+
+tt[class*=kayessess],
+code[class*=kayessess],
+kbd[class*=kayessess],
+samp[class*=kayessess] {
+  font-family: Meslo, Menlo, monospace;
+  font-size: inherit;
+}
+
+b[class*=kayessess],
+strong[class*=kayessess] {
+  font-weight:inherit;
+}
+
+em[class*=kayessess] {
+  font-style:inherit;
+}
+
+small[class*=kayessess] {
+  font-size:100%;
+}
+
+q[class*=kayessess] {
+  quotes: none;
+
+  &:before,
+  &:after {
+    content: '';
+    content: none;
+  }
+}
+
+a[class*=kayessess] {
+  font-weight:inherit;
+  color:inherit;
+  text-decoration:none;
+
+  &:hover,
+  &:active {
+    outline: none;
+  }
+}
+
+a[class*=kayessess] img[class*=kayessess]{
+  border: none;
+}
+
+
+// Set sub, sup without affecting line-height: gist.github.com/413930
+sub[class*=kayessess],
+sup[class*=kayessess] {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+}
+
+sup[class*=kayessess] {
+  top: -0.5em;
+}
+
+sub[class*=kayessess] {
+  bottom: -0.25em;
+}
+
+// HTML 5 Block Elements
+// ------------------------------------------------
+article[class*=kayessess],
+aside[class*=kayessess],
+details[class*=kayessess],
+figcaption[class*=kayessess],
+figure[class*=kayessess],
+footer[class*=kayessess],
+header[class*=kayessess],
+hgroup[class*=kayessess],
+menu[class*=kayessess],
+nav[class*=kayessess],
+section[class*=kayessess] {
+  display:block;
+}
+
+// Tables
+// ------------------------------------------------
+table[class*=kayessess] {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+th[class*=kayessess] {
+  font-weight:inherit;
+}