Merge pull request #19 from hans2103/master

mixed names of breakpoints

docs/_includes/documentation/mixins/breakpoint.html

@@ -13,7 +13,7 @@
 
 {% highlight css %}
 .foo {
-  @include breakpoint($beta) {
+  @include breakpoint($bravo) {
     width: auto;
   }
 }

docs/_includes/documentation/mixins/collapse.html

@@ -10,7 +10,7 @@
 | ---- | ---- | ------- | ----------- |
 | `sides` | `string` | `both` | Choose which side(s) to collapse gutter. Defaults to 'both' |
 | `multiplier` | `number` | `1` | Defaults to `1` and can be set to any number dividable by `0.5` |
-| `fromto` | `list` | `false to false` | Set starting and stopping breakpoints. Accepts single value: `@include collapse(both, 1, $beta)` or list: `@include collapse(both, 1, $beta to $charlie)`. The second (to) value only means that Illusion is not adding more media queries. The styling is not being reset on this 'to' breakpoint |
+| `fromto` | `list` | `false to false` | Set starting and stopping breakpoints. Accepts single value: `@include collapse(both, 1, $bravo)` or list: `@include collapse(both, 1, $bravo to $charlie)`. The second (to) value only means that Illusion is not adding more media queries. The styling is not being reset on this 'to' breakpoint |
 | `gutter` | `string` | `false` | Custom gutter value for Illusion to calculate (`calc()`) with. |
 
 #### SCSS

docs/_includes/documentation/mixins/flexbox.html

@@ -19,7 +19,7 @@
 
 {% highlight css %}
 .foo {
-  @include flexbox($beta, $charlie) {
+  @include flexbox($bravo, $charlie) {
     display: flex;
   }
 }

docs/_includes/documentation/mixins/gallery.html

@@ -9,7 +9,7 @@
 | Name | Type | Default | Description |
 | ---- | ---- | ------- | ----------- |
 | `span` | `list` | - | Set how many columns should be spanned. Accepts single value: `@include gallery(6)` or list: `@include gallery(4 of 12)`. Amount of columns defaults to `$illusion-grid-container` |
-| `fromto` | `list` | `false to false` | Set starting and stopping breakpoints. Accepts single value: `@include gallery(6, $beta)` or list: `@include gallery(6, $beta to $charlie)`. The second (to) value only means that Illusion is not adding more media queries. The styling is not being reset on this 'to' breakpoint |
+| `fromto` | `list` | `false to false` | Set starting and stopping breakpoints. Accepts single value: `@include gallery(6, $bravo)` or list: `@include gallery(6, $bravo to $charlie)`. The second (to) value only means that Illusion is not adding more media queries. The styling is not being reset on this 'to' breakpoint |
 | `multiplier` | `number` | `1` | Gutter multiplier. defaults to `1` and can be set to any number dividable by `0.5` |
 | `bottom` | `boolean` | `true` | Set to `false` if you don't want bottom gutters |
 | `defaults` | `boolean` | `true` | If set to `false` the mixin won't add the `float` and `margin` property on `:first-child` and `:last-child` for cleaner code |
@@ -101,15 +101,15 @@
 // BAD
 .foo {
     @include gallery(6);
-    @include breakpoint($beta) {
+    @include breakpoint($bravo) {
         @include gallery(4);
     }
 }
 
 // GOOD
 .foo {
-    @include gallery(6, 0 to $beta);
-    @include gallery(4, $beta to $charlie, $defaults: false);
+    @include gallery(6, 0 to $bravo);
+    @include gallery(4, $bravo to $charlie, $defaults: false);
     @include gallery(3, $charlie to $delta, $defaults: false);
 }
 

docs/_includes/documentation/mixins/shift.html

@@ -9,7 +9,7 @@
 | Name | Type | Default | Description |
 | ---- | ---- | ------- | ----------- |
 | `shift` | `list` | - | Set how many columns should be shifted. Accepts single value: `@include shift(2)` or list: `@include shift(3 of 12)`. Amount of columns defaults to `$illusion-grid-container`  |
-| `fromto` | `list` | `false to false` | Set starting and stopping breakpoints. Accepts single value: `@include shift(6, $beta)` or list: `@include shift(6, $beta to $charlie)`. The second (to) value only means that Illusion is not adding more media queries. The styling is not being reset on this 'to' breakpoint |
+| `fromto` | `list` | `false to false` | Set starting and stopping breakpoints. Accepts single value: `@include shift(6, $bravo)` or list: `@include shift(6, $bravo to $charlie)`. The second (to) value only means that Illusion is not adding more media queries. The styling is not being reset on this 'to' breakpoint |
 | `multiplier` | `number` | `1` | Gutter multiplier. defaults to `1` and can be set to any number dividable by `0.5` |
 | `defaults` | `boolean` | `true` | If set to `false` the mixin won't add the `position` property |
 | `gutter` | `string` | `false` | Custom gutter value for Illusion to calculate (`calc()`) with. |
@@ -51,15 +51,15 @@
 // BAD
 .foo {
     @include shift(6);
-    @include breakpoint($beta) {
+    @include breakpoint($bravo) {
         @include shift(4);
     }
 }
 
 // GOOD
 .foo {
-    @include shift(6, 0 to $beta);
-    @include shift(4, $beta to $charlie, $defaults: false);
+    @include shift(6, 0 to $bravo);
+    @include shift(4, $bravo to $charlie, $defaults: false);
     @include shift(3, $charlie to $delta, $defaults: false);
 }
 

docs/_includes/documentation/mixins/spacing.html

@@ -11,7 +11,7 @@
 | `sides` | `list` | `all minus none` | Accepts `all minus [top, right, bottom, left]`, `vertical`, `horizontal`, `top`, `right`, `bottom` and `left` |
 | `type` | `text` | `padding` | Accepts `padding` or `margin` |
 | `multiplier` | `number` | `1` | Defaults to `1` and can be set to any number dividable by `0.5` |
-| `fromto` | `list` | `false to false` | Set starting and stopping breakpoints. Accepts single value: `@include spacing(6, padding, 1, $beta)` or list: `@include spacing(6, padding, 1, $beta to $charlie)`. The second (to) value only means that Illusion is not adding more media queries. The styling is not being reset on this 'to' breakpoint |
+| `fromto` | `list` | `false to false` | Set starting and stopping breakpoints. Accepts single value: `@include spacing(6, padding, 1, $bravo)` or list: `@include spacing(6, padding, 1, $bravo to $charlie)`. The second (to) value only means that Illusion is not adding more media queries. The styling is not being reset on this 'to' breakpoint |
 | `lastchildnone` | `boolen` | `false` | If set to true `:last-child` will not have the set spacing |
 | `minus` | `number` | `0` | Substract an amount of pixels off of the spacing. If an element has a 2 pixel border you'd best substract 2 pixels form the spacing to stay inside the 8 pixel grid |
 

docs/_includes/documentation/mixins/span.html

@@ -9,7 +9,7 @@
 | Name | Type | Default | Description |
 | ---- | ---- | ------- | ----------- |
 | `span` | `list` | - | Set how many columns should be spanned. Accepts single value: `@include span(6)` or list: `@include span(4 of 12)`. Amount of columns defaults to `$illusion-grid-container` |
-| `fromto` | `list` | `false to false` | Set starting and stopping breakpoints. Accepts single value: `@include span(6, $beta)` or list: `@include span(6, $beta to $charlie)`. The second (to) value only means that Illusion is not adding more media queries. The styling is not being reset on this 'to' breakpoint. |
+| `fromto` | `list` | `false to false` | Set starting and stopping breakpoints. Accepts single value: `@include span(6, $bravo)` or list: `@include span(6, $bravo to $charlie)`. The second (to) value only means that Illusion is not adding more media queries. The styling is not being reset on this 'to' breakpoint. |
 | `multiplier` | `number` | `1` | Gutter multiplier. defaults to `1` and can be set to any number dividable by `0.5` |
 | `bottom` | `boolean` | `false` | When set to `true` it also adds a bottom gutter |
 | `defaults` | `boolean` | `true` | If set to `false` the mixin won't add the `float` and `margin` property on `:first-child` and `:last-child` |
@@ -63,15 +63,15 @@
 // BAD
 .foo {
     @include span(6);
-    @include breakpoint($beta) {
+    @include breakpoint($bravo) {
         @include span(4);
     }
 }
 
 // GOOD
 .foo {
-    @include span(6, 0 to $beta);
-    @include span(4, $beta to $charlie, $defaults: false);
+    @include span(6, 0 to $bravo);
+    @include span(4, $bravo to $charlie, $defaults: false);
     @include span(3, $charlie to $delta, $defaults: false);
 }
 

docs/_scss/_grid.scss

@@ -21,9 +21,9 @@
   outline: 1px solid magenta; // Use outline not to mess with css positioning
   height: 100%; // Fill complete page
 
-  @include gallery(6, 0 to $alpha--plus);
-  @include gallery(4, $alpha--plus to $beta);
-  @include gallery(3, $beta to $charlie);
+  @include gallery(6, 0 to $alfa--plus);
+  @include gallery(4, $alfa--plus to $bravo);
+  @include gallery(3, $bravo to $charlie);
   @include gallery(1, $charlie);
 }
 

docs/_scss/_shame.scss

@@ -36,7 +36,7 @@ header {
     font-size: 24px;
     line-height: 32px;
 
-    @include breakpoint($beta) {
+    @include breakpoint($bravo) {
       font-size: 32px;
       line-height: 48px;
     }
@@ -65,7 +65,7 @@ nav {
   display: inline-block;
   width: 166px;
 
-  @include breakpoint($beta) {
+  @include breakpoint($bravo) {
     display: block;
     float: left;
   }
@@ -80,13 +80,13 @@ nav {
   margin-left: auto;
   margin-right: auto;
 
-  @include breakpoint($beta) {
+  @include breakpoint($bravo) {
     float: right;
     margin: $spacing-s 0;
   }
 
   li {
-    @include breakpoint($beta) {
+    @include breakpoint($bravo) {
       float: left;
       margin-left: $spacing-l;
     }
@@ -101,12 +101,12 @@ aside {
   display: block;
   width: 100%;
   @include spacing(vertical);
-  @include span(4, $beta to $delta);
+  @include span(4, $bravo to $delta);
   @include span(3, $delta);
   max-height: 100vh;
   overflow: auto;
 
-  @include breakpoint($beta) {
+  @include breakpoint($bravo) {
     position: sticky;
     top: 0;
   }
@@ -115,7 +115,7 @@ aside {
 article {
   display: block;
   width: 100%;
-  @include span(8, $beta to $delta);
+  @include span(8, $bravo to $delta);
   @include span(9, $delta);
   @include spacing(vertical);
 
@@ -203,18 +203,18 @@ pre {
 
 .gallery-3 {
   .gallery__item {
-    @include gallery(6, 0 to $alpha--plus);
-    @include gallery(4, $alpha--plus to $beta);
-    @include gallery(3, $beta to $charlie);
+    @include gallery(6, 0 to $alfa--plus);
+    @include gallery(4, $alfa--plus to $bravo);
+    @include gallery(3, $bravo to $charlie);
     @include gallery(4, $charlie);
   }
 }
 
 .gallery-12 {
   .gallery__item {
-    @include gallery(6, 0 to $alpha--plus);
-    @include gallery(4, $alpha--plus to $beta);
-    @include gallery(3, $beta to $charlie);
+    @include gallery(6, 0 to $alfa--plus);
+    @include gallery(4, $alfa--plus to $bravo);
+    @include gallery(3, $bravo to $charlie);
     @include gallery(1, $charlie);
   }
 }

scss/molecules/_multiple-choice.scss

@@ -11,8 +11,8 @@
     margin-bottom: $illusion-multiple-choice-margin-bottom;
     min-height: $illusion-multiple-choice-min-height;
 
-    @include breakpoint($beta) {
-      float: $illusion-multiple-choice-beta-float;
+    @include breakpoint($bravo) {
+      float: $illusion-multiple-choice-bravo-float;
     }
 
     // Absolutely position inputs within label, to allow text to wrap

scss/tools/variables/_body-fallback.scss

@@ -2,8 +2,8 @@
 //
 // 1. Default is set to false since Illusion doesn't create code by default
 // 2. Align body to the left, right or center. Defaults to center
-// 3. Width of the body, defaults to $beta breakpoint
+// 3. Width of the body, defaults to $bravo breakpoint
 
 $illusion-body-fallback: false !default; // 1
 $illusion-body-fallback-align: center !default; // 2
-$illusion-body-fallback-width: $beta !default; // 3
+$illusion-body-fallback-width: $bravo !default; // 3

scss/tools/variables/_breakpoints.scss

@@ -1,18 +1,18 @@
 // Breakpoints
 // Default breakpoints following the 8pt grid
 
-$alpha:                 320px !default;
-$alpha--plus:           440px !default;
-$beta:                  560px !default;
+$alfa:                 320px !default;
+$alfa--plus:           440px !default;
+$bravo:                  560px !default;
 $charlie:               768px !default;
 $delta:                 1024px !default;
 $echo:                  1112px !default;
 
 
 // The above values minus 1px to be used for min-max media queries
 
-$alpha--plus-min:       $alpha--plus - 1px !default;
-$beta-min:              $beta - 1px !default;
+$alfa--plus-min:       $alfa--plus - 1px !default;
+$bravo-min:              $bravo - 1px !default;
 $charlie-min:           $charlie - 1px !default;
 $delta-min:             $delta - 1px !default;
 $echo-min:              $echo - 1px !default;

scss/tools/variables/_form.scss

@@ -27,7 +27,7 @@ $illusion-multiple-choice-position: relative !default;
 $illusion-multiple-choice-padding: 0 0 0 $illusion-multiple-choice-unit !default;
 $illusion-multiple-choice-margin-bottom: $spacing-m !default;
 $illusion-multiple-choice-min-height: $illusion-multiple-choice-unit !default;
-$illusion-multiple-choice-beta-float: left !default;
+$illusion-multiple-choice-bravo-float: left !default;
 $illusion-multiple-choice-input-position: absolute !default;
 $illusion-multiple-choice-input-cursor: pointer !default;
 $illusion-multiple-choice-input-left: 0 !default;

scss/tools/variables/_grid.scss

@@ -4,18 +4,18 @@ $illusion-grid-container: 12 !default;
 $illusion-grid-maxwidth: $echo !default;
 $illusion-grid-default-width: 0 !default;
 $illusion-grid-default-gutter: 16px !default;
-$illusion-grid-beta-width: $beta !default;
-$illusion-grid-beta-gutter: 24px !default;
+$illusion-grid-bravo-width: $bravo !default;
+$illusion-grid-bravo-gutter: 24px !default;
 $illusion-grid-delta-width: $delta !default;
 $illusion-grid-delta-gutter: 32px !default;
 $illusion-grid-breakpoints: (
   default: (
     width: $illusion-grid-default-width,
     gutter: $illusion-grid-default-gutter
   ),
-  beta: (
-    width: $illusion-grid-beta-width,
-    gutter: $illusion-grid-beta-gutter
+  bravo: (
+    width: $illusion-grid-bravo-width,
+    gutter: $illusion-grid-bravo-gutter
   ),
   delta: (
     width: $illusion-grid-delta-width,

scss/tools/variables/_type.scss

@@ -16,5 +16,5 @@ $weight-bold:             700 !default;
 
 $fluid-type-min-value:    $font-size !default;
 $fluid-type-max-value:    20px !default;
-$fluid-type-min-screen:   $beta !default;
+$fluid-type-min-screen:   $bravo !default;
 $fluid-type-max-screen:   $delta !default;

tests/functions/_spacing.scss

@@ -1,5 +1,5 @@
 .foo {
-  @include breakpoint($beta) {
+  @include breakpoint($bravo) {
     padding-top: spacing();
   }
 }

tests/mixins/_breakpoint.scss

@@ -1,5 +1,5 @@
 .foo {
-  @include breakpoint($beta) {
+  @include breakpoint($bravo) {
     width: auto;
   }
 }

tests/mixins/_flexbox.scss

@@ -1,5 +1,5 @@
 .foo {
-  @include flexbox($beta, $charlie) {
+  @include flexbox($bravo, $charlie) {
     display: flex;
   }
 }