illusion 1.1.0 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8ca138b02ca7756fbb471713a4aab7b9b5a8aeb3
-  data.tar.gz: 82be92c2dc1c91eeb4709e966155812405afa989
+  metadata.gz: cca82603eaa91891f551258fac1dc87371750e78
+  data.tar.gz: f8451921806f3364d7599440aca4bf4064077651
 SHA512:
-  metadata.gz: 87e54e2bcb7cdf7aeb02268aa4b48df121edebe2ecea6fa12d5b3a48f7dc18c226dd8e40958ccaeb57691ae31c85b674be103e9d6ce26d419c1b07dfc4ea7d49
-  data.tar.gz: 9779c526baf7daab793832190bebe91afef488a27839d712704efca88f1292cd68dbb95290226dc95b9da40fa1020d72c1363b9fea60079cdfbf80282ec00182
+  metadata.gz: f2c1edd093916c3feaf59a9bbab38167183fff866b5c7dfa5ee9bb9ea6b5ab23f5efb9cfe06f4347b19f77bf7817d9623cf968bfbbb931b13559785b586f52d2
+  data.tar.gz: fbb8222884a0599d0ee38f78b06bff473465e473afcee28be25371115e0408c20082ab0d8e0abdcc0989b592a369b8e6a308761c37615a0cbfffdb7bf2771a3f

data/sass/_illusion.scss

@@ -1,3 +1,11 @@
-@import "illusion/basics";
-@import "illusion/reset";
-@import "illusion/ie";
+@import "illusion/mixins/basics";
+@import "illusion/mixins/breakpoint";
+
+@import "illusion/placeholders/placeholders";
+
+@import "illusion/setup/boxsizing";
+
+@import "illusion/variables/variables";
+
+@import "illusion/vendor/normalize";
+@import "illusion/vendor/responsivemenu";

data/sass/illusion/{_basics.scss → mixins/_basics.scss}

@@ -1,12 +1,21 @@
+/**
+ * Mixin for setting columns with vendor prefixes
+ *
+ * @param {number} $count - The amount of columns
+ *
+ * @group Basics
+ */
 @mixin column-count($count) {
   -webkit-column-count: $count;
   -moz-column-count: $count;
   column-count: $count;
 }
 
-// Clearfix
-// --------
-// For clearing floats like a boss h5bp.com/q
+/**
+ * Mixin for setting clearfix to an element
+ *
+ * @group Basics
+ */
 @mixin clearfix {
   *zoom: 1;
   &:before,
@@ -22,15 +31,21 @@
   }
 }
 
-// IE7 inline-block
-// ----------------
+/**
+ * Hacky CSS to set inline-block and zoom to IE7
+ *
+ * @group Basics
+ */
 @mixin ie7-inline-block() {
-  *display: inline; /* IE7 inline-block hack */
+  *display: inline;
   *zoom: 1;
 }
 
-// Webkit-style focus
-// ------------------
+/**
+ * Set outlines for focus on an element
+ *
+ * @group Basics
+ */
 @mixin tab-focus() {
   // Default
   outline: thin dotted #333;
@@ -39,28 +54,52 @@
   outline-offset: -2px;
 }
 
-// Border Radius
+/**
+ * Set border-radius to element including vendor prefixes
+ *
+ * @param {string} $radius - desired border-radius (shorthand)
+ *
+ * @group Basics
+ */
 @mixin border-radius($radius) {
   -webkit-border-radius: $radius;
   -moz-border-radius: $radius;
   border-radius: $radius;
 }
 
-// Box sizing
+/**
+ * Set box-sizing to element including vendor prefixes
+ *
+ * @param {string} $boxmodel - desired box-model (shorthand)
+ *
+ * @group Basics
+ */
 @mixin box-sizing($boxmodel) {
   -webkit-box-sizing: $boxmodel;
   -moz-box-sizing: $boxmodel;
   box-sizing: $boxmodel;
 }
 
-// Drop shadows
+/**
+ * Set box-shadow to element including vendor prefixes
+ *
+ * @param {string} $shadow - desired box-shadow (shorthand)
+ *
+ * @group Basics
+ */
 @mixin box-shadow($shadow...) {
   -webkit-box-shadow: $shadow;
   -moz-box-shadow: $shadow;
   box-shadow: $shadow;
 }
 
-// Transitions
+/**
+ * Set transition to element including vendor prefixes
+ *
+ * @param {string} $transition - desired transition (shorthand)
+ *
+ * @group Basics
+ */
 @mixin transition($transition...) {
   -webkit-transition: $transition;
   -moz-transition: $transition;
@@ -68,6 +107,19 @@
   transition: $transition;
 }
 
+/**
+ * Set transition-delay to element including vendor prefixes
+ *
+ * @param {string} $transition-delay - desired transition-delay either in s or ms
+ *
+ * @example
+ * transition-delay(.2s);
+ *
+ * @example
+ * transition-delay(.50ms);
+ *
+ * @group Basics
+ */
 @mixin transition-delay($transition-delay) {
   -webkit-transition-delay: $transition-delay;
   -moz-transition-delay: $transition-delay;
@@ -75,6 +127,19 @@
   transition-delay: $transition-delay;
 }
 
+/**
+ * Set transition-duration to element including vendor prefixes
+ *
+ * @param {string} $transition-duration - desired transition-duration either in s or ms
+ *
+ * @example
+ * transition-duration(.2s);
+ *
+ * @example
+ * transition-duration(.50ms);
+ *
+ * @group Basics
+ */
 @mixin transition-duration($transition-duration) {
   -webkit-transition-duration: $transition-duration;
   -moz-transition-duration: $transition-duration;
@@ -82,20 +147,46 @@
   transition-duration: $transition-duration;
 }
 
-// Opacity
+/**
+ * Set opacity with IE filter
+ *
+ * @param {number} $opacity - between 0 and 1
+ *
+ * @example
+ * opacity(.2);
+ *
+ * @group Basics
+ */
 @mixin opacity($opacity) {
   opacity: $opacity / 100;
   filter: alpha(opacity=$opacity);
 }
 
+/**
+ * Set font-size, font-weight and line-height in one go
+ *
+ * @param {string} $size ($base-font-size) - font-size
+ * @param {string} $weight (normal) - font-weight
+ * @param {string} $lineHeight ($baseLineHeight) - line-height
+ *
+ * @example
+ * font-shorthand(1em, 600, 1.5em);
+ *
+ * @group Basics
+ */
 @mixin font-shorthand($size: $base-font-size, $weight: normal, $lineHeight: $baseLineHeight) {
   font-size: $size;
   font-weight: $weight;
   line-height: $lineHeight;
 }
 
-// Placeholder text
-// -------------------------
+/**
+ * Set input[placeholder] color with vendor prefixes
+ *
+ * @param {string} $color (#999) - The font color
+ *
+ * @group Basics
+ */
 @mixin placeholder($color: #999) {
   &:-moz-placeholder {
     color: $color;
@@ -108,7 +199,11 @@
   }
 }
 
-// Hide element while at the same time make it accessible
+/**
+ * Visually hide elements while still preserving screen reader visibility
+ *
+ * @group Basics
+ */
 @mixin visually-hidden() {
   margin: -1px;
   padding: 0;
@@ -120,6 +215,11 @@
   position: absolute;
 }
 
+/**
+ * Visually show elements when they have a visually-hidden style
+ *
+ * @group Basics
+ */
 @mixin visually-shown() {
   margin: 0;
   padding: 0;
@@ -130,6 +230,15 @@
   position: static;
 }
 
+/**
+ * Set form styling
+ *
+ * @param {string} $text-color (#555) - The font color
+ * @param {string} $border-color (#ccc) - The border color
+ * @param {string} $background-color (#f5f5f5) - The background color
+ *
+ * @group Basics
+ */
 @mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
   // Color the label and help text
   .form__label {

data/sass/illusion/mixins/_breakpoint.scss

@@ -0,0 +1,75 @@
+$fix-mqs: false !default;
+$old-ie: false !default;
+
+/**
+ * Returns "@content" in either a media querie or regular
+ * based on if $fix-mqs is set and to what number
+ *
+ * @param {string} $width - The width unit for single media queries
+ * @param {string} $type (min) - Either "min", "max" or "range"
+ * @param {string} $width--max (false) - The max width when using the "range" type
+ *
+ * @example scss
+ * breakpoint(600px) { ... }
+ * // will return @media screen and (min-width: 600px) { ... }
+ *
+ * @example scss
+ * breakpoint(800px, max) { ... }
+ * // will return @media screen and (max-width: 800px) { ... }
+ *
+ * @example scss
+ * breakpoint(600px, range, 800px) { @content }
+ * // will return @media screen and (min-width: 600px) and (max-width: 800px) { ... }
+ *
+ * @group Breakpoint
+ */
+
+@mixin breakpoint($width, $type: min, $width--max: false) {
+
+  // If we're outputting for a fixed media query set...
+  @if $fix-mqs {
+    // ...and if we should apply these rules...
+    @if $type == min and $fix-mqs >= $width {
+      // ...output the content the user gave us.
+      @content;
+    } @else if $type == max and $fix-mqs <= $width {
+      // ...output the content the user gave us.
+      @content;
+    } @else if $type == range and $fix-mqs <= $width--max {
+      // ...output the content the user gave us.
+      @content;
+    }
+  } @else {
+    @if $type == min {
+      // Otherwise, output it using a regular media query
+      @media screen and (min-width: $width) {
+        @content;
+      }
+    } @else if $type == max {
+      // Otherwise, output it using a regular media query
+      @media screen and (max-width: $width) {
+        @content;
+      }
+    } @else if $type == range {
+      // Otherwise, output it using a regular media query
+      @media screen and (min-width: $width) and (max-width: $width--max) {
+        @content;
+      }
+    }
+  }
+}
+
+/**
+ * Returns "@content" based on if $fix-mqs is set and to what number
+ *
+ * @example scss
+ * old-ie { ... }
+ *
+ * @group Breakpoint
+ */
+
+@mixin old-ie() {
+  @if $old-ie {
+    @content;
+  }
+}

data/sass/illusion/placeholders/_placeholders.scss

@@ -0,0 +1,17 @@
+/**
+ * Placeholder you can extend on for clearfixing elements
+ *
+ * @group placeholders
+ */
+%clearfix {
+  *zoom: 1;
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+    line-height: 0;
+  }
+  &:after {
+    clear: both;
+  }
+}

data/sass/illusion/setup/_boxsizing.scss

@@ -0,0 +1,10 @@
+/**
+ * Set box-sizing: border-box to * element (all elements) when included to the project
+ *
+ * @group setup
+ */
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}

data/sass/illusion/variables/_variables.scss

@@ -0,0 +1,62 @@
+/**
+ * represents 400px based on a 16px body font size
+ *
+ * @group Breakpoint
+ */
+$breakpoint-alpha:      25em;
+
+/**
+ * represents 600px based on a 16px body font size
+ *
+ * @group Breakpoint
+ */
+$breakpoint-beta:       37.5em;
+
+/**
+ * represents 768px based on a 16px body font size
+ *
+ * @group Breakpoint
+ */
+$breakpoint-charlie:    48em;
+
+/**
+ * represents 1024px based on a 16px body font size
+ *
+ * @group Breakpoint
+ */
+$breakpoint-delta:      64em;
+
+/**
+ * represents 1200px based on a 16px body font size
+ *
+ * @group Breakpoint
+ */
+$breakpoint-echo:       75em;
+
+/**
+ * represents 1440px based on a 16px body font size
+ *
+ * @group Breakpoint
+ */
+$breakpoint-foxtrot:    90em;
+
+/**
+ * represents 1600px based on a 16px body font size
+ *
+ * @group Breakpoint
+ */
+$breakpoint-golf:       100em;
+
+/**
+ * The base font size for your project
+ *
+ * @group setup
+ */
+$base-font-size:        16px;
+
+/**
+ * A standard 1.5em baseline
+ *
+ * @group setup
+ */
+$base-line-height:      1.5em;

data/sass/illusion/vendor/_normalize.scss

@@ -0,0 +1,425 @@
+/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}