bitstyles 0.8.0 → 0.9.1

data/scss/bitstyles/objects/_truncate-with-ellipsis.scss

@@ -2,16 +2,17 @@
 //
 // Truncate with ellipsis
 //
-// Truncates text with an ellipsis (…). Parent element needs a set or limited width.
+// **When text content is wider than parent width, truncate text with an ellipsis (…).**
+// The parent element needs a set or limited width.
 // Note the exact algorithm is defined per browser and is of varying quality
-// — you may loose a couple of characters just to display an ellipsis instead.
+// — you may lose a couple of characters just to display an ellipsis instead.
 //
 // markup:
 // <div class="l-width--2-of-12 background-grey">
 //   <p class="o-truncate-with-ellipsis">Truncated content goes here</p>
 // </div>
 //
-// Styleguide 1.15
+// Styleguide 4.19
 
 .#{$bitstyles-namespace}o-truncate-with-ellipsis {
   @include truncate-with-ellipsis;

data/scss/bitstyles/objects/_typography.scss

@@ -1,9 +1,11 @@
 // Typography
 //
-// These typographic classes mimic the html elements `<h1>`..`<h6>` — use the semantically correct
-// element in markup, then apply the correct class to achieve the correct visual appearance.
-// Note the `.o-h0` has been added as an additional layer above `.o-h1`, use to acheive an extra-large
-// 'hero' (using Bootstrap nomenclature) text.
+// **Typographic classes that mimic the html elements `<h1>`..`<h6>`**
+//
+// This means you can use the semantically correct element in your markup then apply
+// the correct class to achieve the correct visual appearance.
+// Note the `.o-h0` has been added as an additional layer above `.o-h1`, use it
+// to acheive extra-large ‘hero’ text.
 //
 // Markup:
 // <h1 class="o-h0">Header 0</h1>
@@ -21,7 +23,7 @@
 // <h6 class="o-h1">Header 1</h6>
 // <h6 class="o-h0">Header 0</h6>
 //
-// Styleguide 1.20
+// Styleguide 4.20
 
 .#{$bitstyles-namespace}o-h0,
 .#{$bitstyles-namespace}o-h1,
@@ -33,60 +35,4 @@
   @include generic-heading;
 }
 
-.#{$bitstyles-namespace}o-h0 {
-  @include font-size($bitstyles-font-size-h0-small);
-}
-
-.#{$bitstyles-namespace}o-h1 {
-  @include font-size($bitstyles-font-size-h1-small);
-}
-
-.#{$bitstyles-namespace}o-h2 {
-  @include font-size($bitstyles-font-size-h2-small);
-}
-
-.#{$bitstyles-namespace}o-h3 {
-  @include font-size($bitstyles-font-size-h3-small);
-}
-
-.#{$bitstyles-namespace}o-h4 {
-  @include font-size($bitstyles-font-size-h4-small);
-}
-
-.#{$bitstyles-namespace}o-h5 {
-  @include font-size($bitstyles-font-size-h5-small);
-}
-
-.#{$bitstyles-namespace}o-h6 {
-  @include font-size($bitstyles-font-size-h6-small);
-}
-
-@include media-query($bitstyles-typography-breakpoint) {
-  .#{$bitstyles-namespace}o-h0 {
-    @include font-size($bitstyles-font-size-h0, $bitstyles-font-size-base);
-  }
-
-  .#{$bitstyles-namespace}o-h1 {
-    @include font-size($bitstyles-font-size-h1, $bitstyles-font-size-base);
-  }
-
-  .#{$bitstyles-namespace}o-h2 {
-    @include font-size($bitstyles-font-size-h2, $bitstyles-font-size-base);
-  }
-
-  .#{$bitstyles-namespace}o-h3 {
-    @include font-size($bitstyles-font-size-h3, $bitstyles-font-size-base);
-  }
-
-  .#{$bitstyles-namespace}o-h4 {
-    @include font-size($bitstyles-font-size-h4, $bitstyles-font-size-base);
-  }
-
-  .#{$bitstyles-namespace}o-h5 {
-    @include font-size($bitstyles-font-size-h5, $bitstyles-font-size-base);
-  }
-
-  .#{$bitstyles-namespace}o-h6 {
-    @include font-size($bitstyles-font-size-h6, $bitstyles-font-size-base);
-  }
-}
+@include generate-font-sizes('.o-', (h0, h1, h2, h3, h4, h5, h6));

data/scss/bitstyles/objects/_vertical-center.scss

@@ -2,14 +2,17 @@
 //
 // Vertical Centre
 //
-// Centres an element vertically (not horizontally). Uses absolute positioning, therefore outside the document flow.
+// **Centres an element vertically (not horizontally)**
+//
+// Centres the element vertically, relative to its closest positioned parent.
+// Uses absolute positioning, therefore the element will be outside the document flow.
 //
 // markup:
 // <div class="background-grey min-height-block">
 //   <p class="o-vertical-center">Vertically-centred content here</p>
 // </div>
 //
-// Styleguide 1.12
+// Styleguide 4.21
 
 .#{$bitstyles-namespace}o-vertical-center {
   @include vertical-center;

data/scss/bitstyles/objects/_visuallyhidden.scss

@@ -2,10 +2,14 @@
 //
 // Visuallyhidden
 //
-// Hide an element visually while leaving it readable & accessible by google & screenreaders.
-// Use to give more complete & understandable labels for UI e.g. display only 'next' on a button,
-// but use `.visuallyhidden` to hide a span containing a more descriptive label.
-// Available at every breakpoint set in `$visuallyhidden-breakpoints`.
+// **Hide an element visually while leaving it readable & accessible by search engines & screenreaders**
+//
+// Use this to give more complete & understandable labels for UI and to help explain
+// connections between content that may otherwise only be visually apparent
+// e.g. visually display only 'next' on a button, but use `.o-visuallyhidden` to hide a span
+// containing a more descriptive or specific label (see the markup below).
+//
+// Available at every breakpoint set in `$bitstyles-visuallyhidden-breakpoints`.
 //
 // markup:
 // <button class="o-button">
@@ -13,7 +17,7 @@
 //   <span class="o-visuallyhidden">articles</span>
 // </button>
 //
-// Styleguide 1.14
+// Styleguide 4.22
 
 @import '../settings/visuallyhidden';
 
@@ -21,7 +25,7 @@
   @include visuallyhidden;
 }
 
-@each $breakpoint in $visuallyhidden-breakpoints {
+@each $breakpoint in $bitstyles-visuallyhidden-breakpoints {
   @include media-query($breakpoint) {
     .#{$bitstyles-namespace}o-visuallyhidden\@#{$breakpoint} {
       @include visuallyhidden;

data/scss/bitstyles/settings/_button.scss

@@ -15,4 +15,4 @@ $bitstyles-button-border-radius: 0.25rem !default;
 
 $bitstyles-button-transition: color $bitstyles-transition-duration $bitstyles-transition-easing, background-color $bitstyles-transition-duration $bitstyles-transition-easing !default;
 
-$bitstyles-button-icon-spacing: $bitstyles-spacing-horizontal / 2 !default;
+$bitstyles-button-icon-spacing: spacing('small') !default;

data/scss/bitstyles/settings/_content.scss

@@ -1,5 +1,4 @@
 $bitstyles-content-max-width: 45rem !default;
-$bitstyles-content-horizontal-padding: $bitstyles-spacing !default;
-
-$bitstyles-content-horizontal-padding-large: $bitstyles-spacing * 2 !default;
+$bitstyles-content-horizontal-padding: spacing('base') !default;
+$bitstyles-content-horizontal-padding-large: spacing('large') !default;
 $bitstyles-content-large-breakpoint: 'large' !default; // The breakpoint at which we implement the above horizontal-padding value.

data/scss/bitstyles/settings/_fixed-ratio.scss

@@ -0,0 +1,3 @@
+$fixed-ratio-default-ratio: (
+  'width': 16,
+  'height': 9) !default;

data/scss/bitstyles/settings/_global.breakpoints.scss

@@ -3,10 +3,10 @@ $bitstyles-breakpoint-small-medium-boundary:     45em !default;
 $bitstyles-breakpoint-medium-large-boundary:     64em !default;
 
 $bitstyles-breakpoints: (
-  'small':               'screen and (max-width: #{$bitstyles-breakpoint-small-medium-boundary - $bitstyles-breakpoint-boundary-width})',
-  'medium':              'screen and (min-width: #{$bitstyles-breakpoint-small-medium-boundary}) and (max-width: #{$bitstyles-breakpoint-medium-large-boundary - $bitstyles-breakpoint-boundary-width})',
-  'medium-and-up':       'screen and (min-width: #{$bitstyles-breakpoint-small-medium-boundary})',
-  'small-and-medium':    'screen and (max-width: #{$bitstyles-breakpoint-medium-large-boundary - $bitstyles-breakpoint-boundary-width})',
+  'small-only':          'screen and (max-width: #{$bitstyles-breakpoint-small-medium-boundary - $bitstyles-breakpoint-boundary-width})',
+  'medium':              'screen and (min-width: #{$bitstyles-breakpoint-small-medium-boundary})',
   'large':               'screen and (min-width: #{$bitstyles-breakpoint-medium-large-boundary})',
-  'hidpi':               '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)'
+  'hidpi':               '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',
+  'landscape':           'all and (orientation:landscape)',
+  'portrait':            'all and (orientation:portrait)'
 ) !default;

data/scss/bitstyles/settings/_global.color-palette.scss

@@ -0,0 +1,47 @@
+$bitstyles-color-primary: $bitstyles-color-gray-70 !default;
+$bitstyles-color-secondary: $bitstyles-color-gray-20 !default;
+$bitstyles-color-text: $bitstyles-color-gray-80 !default;
+$bitstyles-color-background: $bitstyles-color-white !default;
+$bitstyles-color-positive: #0f0 !default;
+$bitstyles-color-negative: #f00 !default;
+$bitstyles-color-tone-factor: 8% !default;
+
+// Colour palette. Each colour has variants (each needs at least the `base`), defined
+// in its child map. Naming: `base`, `light`, `lighter`, `dark`, `darker`
+// Use Sass map functions to merge in extra colour maps in your project, or re-define
+// the whole map.
+$bitstyles-palette: (
+  'primary': (
+    'base': $bitstyles-color-primary,
+    'light': lighten($bitstyles-color-primary, $bitstyles-color-tone-factor),
+    'dark': darken($bitstyles-color-primary, $bitstyles-color-tone-factor)
+  ),
+  'secondary': (
+    'base': $bitstyles-color-secondary,
+    'light': lighten($bitstyles-color-secondary, $bitstyles-color-tone-factor),
+    'dark': darken($bitstyles-color-secondary, $bitstyles-color-tone-factor)
+  ),
+  'text': (
+    'base': $bitstyles-color-text,
+    'light': lighten($bitstyles-color-text, $bitstyles-color-tone-factor),
+    'dark': darken($bitstyles-color-text, $bitstyles-color-tone-factor)
+  ),
+  'background': (
+    'base': $bitstyles-color-background,
+    'light': lighten($bitstyles-color-background, $bitstyles-color-tone-factor),
+    'dark': darken($bitstyles-color-background, $bitstyles-color-tone-factor)
+  ),
+  'positive': (
+    'base': $bitstyles-color-positive,
+    'light': lighten($bitstyles-color-positive, $bitstyles-color-tone-factor),
+    'dark': darken($bitstyles-color-positive, $bitstyles-color-tone-factor)
+  ),
+  'error': (
+    'base': $bitstyles-color-negative,
+    'light': lighten($bitstyles-color-negative, $bitstyles-color-tone-factor),
+    'dark': darken($bitstyles-color-negative, $bitstyles-color-tone-factor)
+  )
+) !default;
+
+$foreground-colors: ('primary', 'secondary', 'error') !default;
+$background-colors: ('background', 'secondary') !default;

data/scss/bitstyles/settings/_global.layout.scss

@@ -1,7 +1,9 @@
-$bitstyles-spacing: 1rem !default;
-$bitstyles-spacing-vertical: $bitstyles-spacing !default;
-$bitstyles-spacing-horizontal: $bitstyles-spacing !default;
-
 $bitstyles-global-z: topbar !default;
-
 $bitstyles-border-radius-round: 9999rem !default;
+
+$bitstyles-spacing: 1rem !default;
+$bitstyles-spacing-sizes: (
+  'base': $bitstyles-spacing,
+  'small': $bitstyles-spacing / 2,
+  'large': $bitstyles-spacing * 2
+) !default;

data/scss/bitstyles/settings/_global.typography.scss

@@ -7,22 +7,30 @@ $bitstyles-font-weight-light: 300 !default;
 $bitstyles-font-weight-normal: 400 !default;
 $bitstyles-font-weight-bold: 700 !default;
 
-$bitstyles-typography-breakpoint: medium-and-up !default;
-
 $bitstyles-font-size-base-small: 16px !default;
-$bitstyles-font-size-h0-small: 32px !default;
-$bitstyles-font-size-h1-small: 24px !default;
-$bitstyles-font-size-h2-small: 20px !default;
-$bitstyles-font-size-h3-small: 18px !default;
-$bitstyles-font-size-h4-small: $bitstyles-font-size-base-small !default;
-$bitstyles-font-size-h5-small: $bitstyles-font-size-base-small !default;
-$bitstyles-font-size-h6-small: $bitstyles-font-size-base-small !default;
-
 $bitstyles-font-size-base: 18px !default;
-$bitstyles-font-size-h0: 86px !default;
-$bitstyles-font-size-h1: 40px !default;
-$bitstyles-font-size-h2: 28px !default;
-$bitstyles-font-size-h3: 20px !default;
-$bitstyles-font-size-h4: $bitstyles-font-size-base !default;
-$bitstyles-font-size-h5: $bitstyles-font-size-base !default;
-$bitstyles-font-size-h6: $bitstyles-font-size-base !default;
+
+$bitstyles-line-height-base: 1.5 !default;
+
+$bitstyles-font-sizes: (
+  'base': (
+    'html': $bitstyles-font-size-base-small,
+    'h0': 32px,
+    'h1': 24px,
+    'h2': 20px,
+    'h3': 18px,
+    'h4': $bitstyles-font-size-base-small,
+    'h5': $bitstyles-font-size-base-small,
+    'h6': $bitstyles-font-size-base-small
+  ),
+  'medium': (
+    'html': $bitstyles-font-size-base,
+    'h0': 86px,
+    'h1': 40px,
+    'h2': 28px,
+    'h3': 20px,
+    'h4': $bitstyles-font-size-base,
+    'h5': $bitstyles-font-size-base,
+    'h6': $bitstyles-font-size-base
+  )
+) !default;

data/scss/bitstyles/settings/_grid.scss

@@ -1 +1 @@
-$bitstyles-grid-gutter: $bitstyles-spacing-horizontal !default;
+$bitstyles-grid-gutter: $bitstyles-spacing !default;

data/scss/bitstyles/settings/_hidden.scss

@@ -1 +1 @@
-$hidden-breakpoints: (small, large) !default;
+$bitstyles-hidden-breakpoints: (small-only, large) !default;

data/scss/bitstyles/settings/_icon.scss

@@ -1,5 +1,5 @@
 $bitstyles-icon-sizes: (
-  'small'     1rem,
-  'medium'    2rem,
-  'large'     3rem
+  'small':     1rem,
+  'medium':    2rem,
+  'large':     3rem
 ) !default;

data/scss/bitstyles/settings/_input.scss

@@ -1,5 +1,5 @@
-$bitstyles-input-color: map-get($bitstyles-colors-theme, 'text') !default;
-$bitstyles-input-padding: $bitstyles-spacing / 2 !default;
+$bitstyles-input-color: palette('text') !default;
+$bitstyles-input-padding: spacing('small') !default;
 $bitstyles-input-border: 1px solid $bitstyles-color-gray-30 !default;
 $bitstyles-input-border-radius: 5px !default;
 $bitstyles-input-border-active: 1px solid $bitstyles-color-gray-50 !default;
@@ -7,6 +7,6 @@ $bitstyles-input-background: $bitstyles-color-white !default;
 $bitstyles-input-placeholder-color: $bitstyles-color-gray-50 !default;
 
 $bitstyles-input-background-color-disabled: $bitstyles-color-gray-10 !default;
-$bitstyles-input-color-disabled: map-get($bitstyles-colors-theme, 'text') !default;
+$bitstyles-input-color-disabled: palette('text') !default;
 
-$bitstyles-input-checkbox-size: 1rem;
+$bitstyles-input-checkbox-size: spacing('base');

data/scss/bitstyles/settings/_link.scss

@@ -1,4 +1,8 @@
+$bitstyles-background-color-link: none !default;
 $bitstyles-color-link:            $bitstyles-color-gray-50 !default;
 $bitstyles-color-link-visited:    $bitstyles-color-gray-70 !default;
 $bitstyles-color-link-hover:      $bitstyles-color-gray-20 !default;
 $bitstyles-link-transition: color $bitstyles-transition-duration $bitstyles-transition-easing !default;
+$bitstyles-text-decoration-link:       underline !default;
+$bitstyles-text-decoration-link-hover: underline !default;
+$bitstyles-text-decoration-skip-link: ink !default;

data/scss/bitstyles/settings/_modal.scss

@@ -1,3 +1,4 @@
+$bitstyles-modal-padding: spacing('base') !default;
 $bitstyles-modal-background-color: #d9d9d9 !default;
 $bitstyles-modal-overlay-color: rgba($bitstyles-color-black, 0.7) !default;
 $bitstyles-modal-transition-easing: ease-in-out !default;
@@ -6,4 +7,4 @@ $bitstyles-modal-transition-duration-smallscreen: 0.25s !default;
 $bitstyles-modal-transition-delay: 0.05s !default;
 $bitstyles-modal-will-change: opacity, transform, visibility !default;
 $bitstyles-modal-border-radius: 0 !default;
-$bitstyles-modal-breakpoint: medium-and-up !default;
+$bitstyles-modal-breakpoint: medium !default;

data/scss/bitstyles/settings/_topbar.scss

@@ -1,2 +1,4 @@
-$bitstyles-topbar-vertical-padding: $bitstyles-spacing !default;
-$bitstyles-topbar-horizontal-padding: $bitstyles-spacing * 2 !default;
+$bitstyles-topbar-vertical-padding: $bitstyles-spacing / 2 !default;
+$bitstyles-topbar-horizontal-padding: $bitstyles-spacing !default;
+$bitstyles-topbar-color: inherit !default;
+$bitstyles-topbar-background-color: $bitstyles-color-white !default;

data/scss/bitstyles/settings/_visuallyhidden.scss

@@ -1 +1 @@
-$visuallyhidden-breakpoints: () !default;
+$bitstyles-visuallyhidden-breakpoints: () !default;

data/scss/bitstyles/settings/_width.scss

@@ -8,5 +8,5 @@ $bitstyles-widths: (12) !default;
 // breakpoint.
 // If this is empty, no responsive breakpoints will be generated.
 $bitstyles-widths-breakpoints: (
-  'medium-and-up'
+  'medium'
 ) !default;

data/scss/bitstyles/tools/_absolute-center.scss

@@ -1,9 +1,14 @@
 // Absolute Center
 //
-// Vertically & horizontally centred element.
-// Absolutely positioned, so centred relative to nearest relatively-positioned parent.
+// **Centres an element vertically & horizontally**, relative to its closest non-statically
+// positioned parent element.
 //
-// Styleguide 2.1
+// This mixin makes use of `position: absolute`
+// so the element is no longer in the document flow and has no width or height as
+// far as the parent element is concerned — the parent element must instead provide
+// the dimensions for this to align itself to.
+//
+// Styleguide 1.1
 
 @mixin absolute-center {
   position: absolute;

data/scss/bitstyles/tools/_absolute-cover.scss

@@ -1,8 +1,14 @@
 // Absolute Cover
 //
-// An element that covers its nearest relatively-positioned parent from edge to edge.
+// **An element that covers its parent element from edge to edge** — vertically and
+// horizontally — **regardless of how it may stretch**.
 //
-// Styleguide 2.2
+// Not recommended for images, media etc. (elements width inherent dimensions) due
+// to that. This is most commonly used for container elements.
+//
+// @param {Number} $distance  CSS dimension with unit. Distance from the edges of the closest parent element with non-static positioning.
+//
+// Styleguide 1.2
 
 @mixin absolute-cover($distance: 0) {
   position: absolute;

data/scss/bitstyles/tools/_all.scss

@@ -0,0 +1,23 @@
+@import 'zindex';
+@import 'absolute-cover';
+@import 'fixed-ratio';
+@import 'media-query';
+@import 'absolute-center';
+@import 'vertical-center';
+@import 'break-long-words';
+@import 'truncate-with-ellipsis';
+@import 'clearfix';
+@import 'hidden';
+@import 'visuallyhidden';
+@import 'list-reset';
+@import 'font-face';
+@import 'width';
+@import 'typography';
+@import 'typography-conversions';
+@import 'block';
+@import 'flex';
+@import 'media';
+@import 'palette';
+@import 'overflow';
+@import 'spacing';
+@import 'link';