bitstyles 0.8.0

data/scss/bitstyles/tools/_width.scss

@@ -0,0 +1,30 @@
+// Widths
+//
+// Pass in a list of one or more fractions that you need a row split into e.g. if you need
+// to split some rows into 10 sections and others into 12 sections, call the width mixin
+// with:
+//
+// `$fractions: (10, 12)`
+//
+// From that this mixin will generate width classes in the format:
+//
+// `.l-width--1-of-10` through to `.l-width--10-of-10` and
+// `.l-width--1-of-12` through to `.l-width--12-of-12`
+//
+// Normally it’s best to set the `$bitstyles-widths` and
+// `$bitstyles-widths-breakpoints` variables, and then let the sass in `layout/width`
+// generate your width classes at various breakpoints (see the layout section on widths).
+//
+// Styleguide 2.14
+
+@mixin width($fractions, $breakpoint: null) {
+  @each $fraction in $fractions {
+    @for $index from 1 through $fraction {
+      /* stylelint-disable max-nesting-depth */
+      .#{$bitstyles-namespace}l-width--#{$index}-of-#{$fraction}#{$breakpoint} {
+        width: ($index / $fraction) * 100%; /* stylelint-disable-line declaration-no-important */
+      }
+      /* stylelint-enable max-nesting-depth */
+    }
+  }
+}

data/scss/bitstyles/tools/_zindex.scss

@@ -0,0 +1,36 @@
+// Z-index
+//
+// This mixin allows you to assign z-index values in a stacking context of
+// your choice.
+// Solves problems outlined at:
+// <http://philipwalton.com/articles/what-no-one-told-you-about-z-index/>
+//
+// Define a global variable (such as $globalz). Assign to it a sass list of
+// stacking contexts.
+// $globalz: stackcontext1;
+// or
+// $globalz: stackcontext1,stackcontext2,stackcontext3;
+// Items further to the right are higher in the stack.
+//
+// Now when you assign a zindex in your Sass, you can choose which stacking
+// context it will be assigned to.
+// .class {
+//   z-index: z($globalz, stackcontext1);
+// }
+//
+// The function will then loop through each item, in each stacking context, and
+// assign it a z-index value, based on its declared order in your Sass.
+//
+// Styleguide 2.10
+
+@function z($list, $element) {
+  $z-index: index($list, $element);
+
+  @if $z-index {
+    @return $z-index;
+  }
+
+  @warn 'There is no item "#{$element}" in this list; choose one of: #{$list}';
+
+  @return null;
+}

data/scss/bitstyles/trumps/_background-color.scss

@@ -0,0 +1,18 @@
+// Background Colors
+//
+// Set background color. Actual classnames will vary based on colors defined in the $foreground-color variable
+//
+// markup:
+// <p class="{$modifiers}">Some content here</p>
+//
+//                                   - Base style, inherits from parent
+// .t-background-color--background   - Sets color to whatever is defined as your theme’s primary color.
+// .t-background-color--secondary    - Sets color to whatever is defined as your theme’s secondary color.
+//
+// Styleguide 3.9
+
+@each $name in ($background-colors) {
+  .t-background-color--#{$name} {
+    background-color: map-get($bitstyles-colors-theme, $name);
+  }
+}

data/scss/bitstyles/trumps/_color.scss

@@ -0,0 +1,19 @@
+// Foreground Colors
+//
+// Set foreground color. Actual classnames will vary based on colors defined in the $foreground-color variable
+//
+// markup:
+// <p class="{$modifiers}">Some content here</p>
+//
+//                        - Base style, inherits from parent
+// .t-color--primary      - Sets color to whatever is defined as your theme’s primary color.
+// .t-color--secondary    - Sets color to whatever is defined as your theme’s secondary color.
+// .t-color--error        - Sets color to whatever is defined as your theme’s error color.
+//
+// Styleguide 3.8
+
+@each $name in ($foreground-colors) {
+  .t-color--#{$name} {
+    color: map-get($bitstyles-colors-theme, $name);
+  }
+}

data/scss/bitstyles/trumps/_margin.scss

@@ -0,0 +1,39 @@
+// Margins
+//
+// Styleguide 3.1
+
+// Margins - individual
+//
+// Add ad-hoc margins to elements.
+//
+// markup:
+// <div class="{$modifiers}"><div class="background-grey">Some content here</div></div>
+//
+//                    - Base style
+// .t-margin--left    - Left margin added.
+// .t-margin--top     - Top margin added.
+// .t-margin--right   - Right margin added.
+// .t-margin--bottom  - Bottom margin added.
+//
+// Styleguide 3.1.1
+
+@each $position in (left, top, right, bottom) {
+  .#{$bitstyles-namespace}t-margin--#{$position} {
+    //styleguide:ignore:start
+    margin-#{$position}: $bitstyles-spacing;
+    //styleguide:ignore:end
+  }
+}
+
+// Margins - all sides
+//
+// Add ad-hoc margins to elements.
+//
+// markup:
+// <div class="t-margin"><div class="background-grey">Some content here</div></div>
+//
+// Styleguide 3.1.2
+
+.#{$bitstyles-namespace}t-margin {
+  margin: $bitstyles-spacing;
+}

data/scss/bitstyles/trumps/_no-margin.scss

@@ -0,0 +1,39 @@
+// No-Margins
+//
+// Styleguide 3.2
+
+// No-Margins - individual
+//
+// Remove margins from elements on an ad-hoc basis.
+//
+// markup:
+// <div class="t-margin {$modifiers}"><div class="background-grey">Some content here</div></div>
+//
+//                       - Base style
+// .t-no-margin--left    - Removes left-margin
+// .t-no-margin--top     - Removes top-margin
+// .t-no-margin--right   - Removes right-margin
+// .t-no-margin--bottom  - Removes bottom-margin
+//
+// Styleguide 3.2.1
+
+@each $position in (left, top, right, bottom) {
+  .#{$bitstyles-namespace}t-no-margin--#{$position} {
+    //styleguide:ignore:start
+    margin-#{$position}: 0;
+    //styleguide:ignore:end
+  }
+}
+
+// No-Margins - all sides
+//
+// Add ad-hoc margins to elements.
+//
+// markup:
+// <div class="t-margin t-no-margin"><div class="background-grey">Some content here</div></div>
+//
+// Styleguide 3.2.2
+
+.#{$bitstyles-namespace}t-no-margin {
+  margin: 0;
+}

data/scss/bitstyles/trumps/_no-padding.scss

@@ -0,0 +1,43 @@
+// No-Paddings
+//
+// Styleguide 3.3
+
+// No-Paddings - individual
+//
+// Use to remove padding from elements on an ad-hoc basis
+//
+// markup:
+// <div class="background-grey">
+//   <div class="t-padding {$modifiers}">Some content here</div>
+// </div>
+//
+//                        - Base style
+// .t-no-padding--left    - Removes left padding.
+// .t-no-padding--top     - Removes top padding.
+// .t-no-padding--right   - Removes right padding.
+// .t-no-padding--bottom  - Removes bottom padding.
+//
+// Styleguide 3.3.1
+
+@each $position in (left, top, right, bottom) {
+  .#{$bitstyles-namespace}t-no-padding--#{$position} {
+    //styleguide:ignore:start
+    padding-#{$position}: 0;
+    //styleguide:ignore:end
+  }
+}
+
+// No-Paddings - all sides
+//
+// Use to remove padding from elements on an ad-hoc basis
+//
+// Markup:
+// <div class="background-grey">
+//   <div class="t-padding t-no-padding">Some content here</div>
+// </div>
+//
+// Styleguide 3.3.2
+
+.#{$bitstyles-namespace}t-no-padding {
+  padding: 0;
+}

data/scss/bitstyles/trumps/_padding.scss

@@ -0,0 +1,43 @@
+// Paddings
+//
+// Styleguide 3.4
+
+// Paddings
+//
+// Use to add ad-hoc padding to elements
+//
+// markup:
+// <div class="background-grey">
+//   <div class="{$modifiers}">Some content here.</div>
+// </div>
+//
+//                     - Base styling
+// .t-padding--left    - Add left-padding.
+// .t-padding--top     - Add top-padding.
+// .t-padding--right   - Add right-padding.
+// .t-padding--bottom  - Add bottom-padding.
+//
+// Styleguide 3.4.1
+
+@each $position in (left, top, right, bottom) {
+  .#{$bitstyles-namespace}t-padding--#{$position} {
+    //styleguide:ignore:start
+    padding-#{$position}: $bitstyles-spacing;
+    //styleguide:ignore:end
+  }
+}
+
+// Padding, all sides
+//
+// Add ad-hoc padding to elements.
+//
+// Markup:
+// <div class="background-grey">
+//   <div class="t-padding">Some content here.</div>
+// </div>
+//
+// Styleguide 3.4.2
+
+.#{$bitstyles-namespace}t-padding {
+  padding: $bitstyles-spacing;
+}

data/scss/bitstyles/trumps/_text-align.scss

@@ -0,0 +1,21 @@
+// Text Align
+//
+// Overide text-align on an element
+// Named `.t-text-` for consistency with the other text/font-related trumps.
+//
+// markup:
+// <p class="{$modifiers}">Some content here</p>
+//
+//                      - Base text
+// .t-text-align--left    - Align text left
+// .t-text-align--right   - Align text right.
+// .t-text-align--center  - Centre align text.
+// .t-text-align--justify - Justify text.
+//
+// Styleguide 3.5
+
+@each $position in (left, right, center, justify) {
+  .#{$bitstyles-namespace}t-text-align--#{$position} {
+    text-align: $position;
+  }
+}

data/scss/bitstyles/trumps/_text-style.scss

@@ -0,0 +1,19 @@
+// Text-style
+//
+// Override font-style of an element.
+// Named `.t-text-` for consistency with the other text/font-related trumps
+//
+// markup:
+// <p class="{$modifiers}">Some content here</p>
+//
+//                        - Base text
+// .t-text-style--italic    - Italicise text.
+// .t-text-style--normal    - De-italicise text.
+//
+// Styleguide 3.6
+
+@each $style in (italic, normal) {
+  .#{$bitstyles-namespace}t-text-style--#{$style} {
+    font-style: $style;
+  }
+}

data/scss/bitstyles/trumps/_text-weight.scss

@@ -0,0 +1,25 @@
+// Font-weight
+//
+// Named `.t-text-` for consistency with the other text/font-related trumps.
+//
+// markup:
+// <p class="{$modifiers}">Some content here</p>
+//
+//                         - Base text.
+// .t-text-weight--light     - Ensure font-weight is light
+// .t-text-weight--normal    - Ensure font-weight is normal
+// .t-text-weight--bold      - Ensure font-weight is bold
+//
+// Styleguide 3.7
+
+.#{$bitstyles-namespace}t-text-weight--light {
+  font-weight: $bitstyles-font-weight-light;
+}
+
+.#{$bitstyles-namespace}t-text-weight--normal {
+  font-weight: $bitstyles-font-weight-normal;
+}
+
+.#{$bitstyles-namespace}t-text-weight--bold {
+  font-weight: $bitstyles-font-weight-bold;
+}

data/scss/bitstyles.scss

@@ -0,0 +1,167 @@
+/* stylelint-disable max-empty-lines */
+// SETTINGS
+// Global settings & settings for each object below (if needed).
+//
+// * No CSS output *
+
+//
+// ******** Add overrides for Bitstyles settings here ********
+//
+@import 'bitstyles/settings/global.setup';
+@import 'bitstyles/settings/global.layout';
+@import 'bitstyles/settings/global.breakpoints';
+@import 'bitstyles/settings/global.animation';
+@import 'bitstyles/settings/global.color-base';
+@import 'bitstyles/settings/global.color-theme';
+@import 'bitstyles/settings/global.typography';
+//
+// ******** Add global settings for your own project here ********
+//
+
+
+// Tools: Functions & Mixins
+//
+// Mixins and functions. Includes mixins we later use to build objects e.g. at different breakpoints,
+// and some we use only in the background as utilities.
+// * No CSS output *
+//
+// Styleguide 2.0
+@import 'bitstyles/tools/zindex';
+@import 'bitstyles/tools/absolute-cover';
+@import 'bitstyles/tools/fixed-ratio';
+@import 'bitstyles/tools/media-query';
+@import 'bitstyles/tools/absolute-center';
+@import 'bitstyles/tools/vertical-center';
+@import 'bitstyles/tools/break-long-words';
+@import 'bitstyles/tools/truncate-with-ellipsis';
+@import 'bitstyles/tools/clearfix';
+@import 'bitstyles/tools/hidden';
+@import 'bitstyles/tools/visuallyhidden';
+@import 'bitstyles/tools/list-reset';
+@import 'bitstyles/tools/font-face';
+@import 'bitstyles/tools/width';
+@import 'bitstyles/tools/typography';
+@import 'bitstyles/tools/typography-conversions';
+@import 'bitstyles/tools/block';
+@import 'bitstyles/tools/flex';
+@import 'bitstyles/tools/media';
+//
+// ******** Add project-specific tools here ********
+//
+
+
+// ******** GENERIC
+// Low-specificity, far-reaching rulesets (e.g. resets, normalise.css, box-sizing).
+@import 'bitstyles/generic/box-sizing';
+@import 'bitstyles/generic/normalize';
+
+// Base
+//
+// Unclassed elements. (Directly selects elements e.g. `<a>`, `<blockquote>`, `<address>`).
+//
+// sg-wrapper:
+// <div class="object-section">
+//   <sg-wrapper-content/>
+// </div>
+//
+// Styleguide 4.0
+@import 'bitstyles/base/typography';
+@import 'bitstyles/base/link';
+@import 'bitstyles/base/images';
+@import 'bitstyles/base/forms';    // FOR TESTING ONLY - Empty of styles
+@import 'bitstyles/base/media';    // FOR TESTING ONLY - Empty of styles
+@import 'bitstyles/base/hr';       // FOR TESTING ONLY - Empty of styles
+@import 'bitstyles/base/figure';   // FOR TESTING ONLY - Empty of styles
+
+// Layout
+//
+// Classes that enable the high-level layout of a page.
+//
+// sg-wrapper:
+// <div class="object-section">
+//   <sg-wrapper-content/>
+// </div>
+//
+// Styleguide 5.0
+@import 'bitstyles/layout/content';
+@import 'bitstyles/layout/grid';
+@import 'bitstyles/layout/width';
+@import 'bitstyles/layout/topbar';
+
+// Objects
+//
+// Objects, abstractions, and design patterns (e.g. .media, .icon, .button). Cosmetic-free.
+// These are intended to be reused throughout the site, composed together as needed e.g. <div class="button expander-toggle"></div>
+//
+// sg-wrapper:
+// <div class="object-section">
+//   <sg-wrapper-content/>
+// </div>
+//
+// Styleguide 1.0
+@import 'bitstyles/objects/icon';
+@import 'bitstyles/objects/button';
+@import 'bitstyles/objects/button--icon';
+@import 'bitstyles/objects/absolute-center';
+@import 'bitstyles/objects/absolute-cover';
+@import 'bitstyles/objects/break-long-words';
+@import 'bitstyles/objects/clearfix';
+@import 'bitstyles/objects/fixed-ratio';
+@import 'bitstyles/objects/hidden';
+@import 'bitstyles/objects/truncate-with-ellipsis';
+@import 'bitstyles/objects/vertical-center';
+@import 'bitstyles/objects/visuallyhidden';
+@import 'bitstyles/objects/flex';
+@import 'bitstyles/objects/bordered-header';
+@import 'bitstyles/objects/list-reset';
+@import 'bitstyles/objects/typography';
+@import 'bitstyles/objects/media';
+@import 'bitstyles/objects/block';
+@import 'bitstyles/objects/input';
+@import 'bitstyles/objects/label';
+@import 'bitstyles/objects/link';
+//
+// ******** Add project-specific low-level objects here ********
+//
+
+
+// Components
+//
+// Chunks of UI e.g. the structure for a page type, a single block of UI composed of smaller objects.
+//
+// sg-wrapper:
+// <div class="object-section">
+//   <sg-wrapper-content/>
+// </div>
+//
+// Styleguide 6.0
+@import 'bitstyles/components/modal';
+@import 'bitstyles/components/expander';
+//
+// ******** Add project-specific components here ********
+//
+
+
+// Trumps
+//
+// High-specificity overrides and helper classes (e.g. .hidden {}). `!important` exists here.
+//
+// sg-wrapper:
+// <div class="object-section">
+//   <sg-wrapper-content/>
+// </div>
+//
+// Styleguide 3.0
+@import 'bitstyles/trumps/text-weight';
+@import 'bitstyles/trumps/text-align';
+@import 'bitstyles/trumps/text-style';
+@import 'bitstyles/trumps/margin';
+@import 'bitstyles/trumps/padding';
+@import 'bitstyles/trumps/no-margin';
+@import 'bitstyles/trumps/no-padding';
+@import 'bitstyles/trumps/color';
+@import 'bitstyles/trumps/background-color';
+//
+// ******** Add project-specific trumps here ********
+//
+/* stylelint-enable */

data/styleguide/assets/images/icons.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <symbol id="icon-twitter" viewBox="0 0 500 500">
+      <title>Twitter logo</title>
+      <path d="M500,95.5a214.6,214.6,0,0,1-59.9,16.3c21.8-12.3,38.1-32.7,46.3-57.2C466,65.5,442.8,75,419.6,79.1a103.1,103.1,0,0,0-178.4,70.8,77.7,77.7,0,0,0,4.1,24.5c-85.8-4.1-160.8-45-211.2-107.6-9.5,16.3-13.6,32.7-13.6,53.1,0,36.8,19.1,68.1,46.3,84.5-17.7,0-32.7-4.1-46.3-12.3v1.4c0,50.4,36.8,91.3,83.1,100.8A104.6,104.6,0,0,1,75,298.4c-6.8,0-12.3,0-19.1-1.4,12.3,40.9,50.4,70.8,96.7,70.8-34.1,28.6-80.4,45-128.1,45-8.2,0-16.3,0-24.5-1.4,40.9,27.2,94,42.2,152.6,42.2,190.7,0,294.3-156.7,294.3-292.9V147.1c20.4-13.5,40.8-31.2,53.1-51.6h0Z"/>
+    </symbol>
+    <symbol id="icon-arrow-up" viewBox="0 0 200 200">
+      <title>arrow-up</title>
+      <path d="M100,57.3a2,2,0,0,1,1.6.8l81.5,84.8a.1.1,0,0,0,0-.1.9.9,0,0,1,.8,0L104.3,60,100,55.5,95.7,60,16.1,142.8a.9.9,0,0,1,.8,0,.1.1,0,0,0,0,.1L98.4,58a1.9,1.9,0,0,1,1.6-.8h0Zm0-11.9a13.3,13.3,0,0,0-10.5,4.8L8.3,134.7a11.7,11.7,0,0,0,0,16.3,11.2,11.2,0,0,0,15.8.6l.6-.6,79.6-82.8H95.7L175.3,151a11.2,11.2,0,0,0,15.8.6l.6-.6a11.7,11.7,0,0,0,0-16.3L110.2,49.8a13.8,13.8,0,0,0-10.1-4.4H100Z"/>
+    </symbol>
+  </defs>
+</svg>

data/styleguide/assets/javascripts/a11y-dialog.js

@@ -0,0 +1,135 @@
+/* eslint-disable */
+(function (global) {
+  'use strict';
+
+  // Helper function for dispatching cross browser dispatch events
+  // from http://youmightnotneedjquery.com/#trigger_custom
+  function dispatchEvent (el, eventName) {
+    // IE < Edge Polyfill
+    // from https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
+    function _CustomEvent (event, params) {
+      params = params || { bubbles: false, cancelable: false, detail: undefined };
+      var evt = document.createEvent('CustomEvent');
+      evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+      return evt;
+    }
+
+    _CustomEvent.prototype = global.Event.prototype;
+
+    var event;
+
+    if (global.CustomEvent) {
+      event = new global.CustomEvent(eventName);
+    } else {
+      event = new _CustomEvent(eventName)
+    }
+
+    event && el.dispatchEvent(event);
+  }
+
+  // Helper function to get all focusable children from a node
+  function getFocusableChildren (node) {
+    var focusableElements = ['a[href]', 'area[href]', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', 'iframe', 'object', 'embed', '[contenteditable]', '[tabindex]:not([tabindex^="-"])'];
+
+    return $$(focusableElements.join(','), node).filter(function (child) {
+      return !!(child.offsetWidth || child.offsetHeight || child.getClientRects().length);
+    });
+  }
+
+  // Helper function to get all nodes in context matching selector as an array
+  function $$ (selector, context) {
+    return Array.prototype.slice.call((context || document).querySelectorAll(selector));
+  }
+
+  // Helper function trapping the tab key inside a node
+  function trapTabKey (node, event) {
+    var focusableChildren = getFocusableChildren(node);
+    var focusedItemIndex = focusableChildren.indexOf(document.activeElement);
+
+    if (event.shiftKey && focusedItemIndex === 0) {
+      focusableChildren[focusableChildren.length - 1].focus();
+      event.preventDefault();
+    } else if (!event.shiftKey && focusedItemIndex === focusableChildren.length - 1) {
+      focusableChildren[0].focus();
+      event.preventDefault();
+    }
+  }
+
+  // Helper function to focus first focusable item in node
+  function setFocusToFirstItem (node) {
+    var focusableChildren = getFocusableChildren(node);
+    if (focusableChildren.length) focusableChildren[0].focus();
+  }
+
+  var focusedBeforeDialog;
+
+  /**
+   * A11yDialog constructor
+   * @param {Node} node - Dialog element
+   * @param {Node} main - Main element of the page
+   */
+  var A11yDialog = function (node, main) {
+    var namespace = 'data-a11y-dialog';
+    var that = this;
+    main = main || document.querySelector('#main');
+
+    this.shown = false;
+    this.show = show;
+    this.hide = hide;
+
+    $$('[' + namespace + '-show="' + node.id + '"]').forEach(function (opener) {
+      opener.addEventListener('click', show);
+    });
+
+    $$('[' + namespace + '-hide]', node).concat($$('[' + namespace + '-hide="' + node.id + '"]')).forEach(function (closer) {
+      closer.addEventListener('click', hide);
+    });
+
+    document.addEventListener('keydown', function (event) {
+      if (that.shown && event.which === 27) {
+        event.preventDefault();
+        hide();
+      }
+
+      if (that.shown && event.which === 9) {
+        trapTabKey(node, event);
+      }
+    });
+
+    function maintainFocus (event) {
+      if (that.shown && !node.contains(event.target)) {
+        setFocusToFirstItem(node);
+      }
+    }
+
+    function show () {
+      that.shown = true;
+      node.removeAttribute('aria-hidden');
+      main.setAttribute('aria-hidden', 'true');
+      focusedBeforeDialog = document.activeElement;
+      setFocusToFirstItem(node);
+      document.body.addEventListener('focus', maintainFocus, true);
+      dispatchEvent(node, 'dialog:show');
+    }
+
+    function hide () {
+      that.shown = false;
+      node.setAttribute('aria-hidden', 'true');
+      main.removeAttribute('aria-hidden');
+      focusedBeforeDialog && focusedBeforeDialog.focus();
+      document.body.removeEventListener('focus', maintainFocus, true);
+      dispatchEvent(node, 'dialog:hide');
+    }
+  };
+
+  if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = A11yDialog;
+  } else if (typeof define === 'function' && define.amd) {
+    define('A11yDialog', [], function () {
+      return A11yDialog;
+    });
+  } else if (typeof global === 'object') {
+    global.A11yDialog = A11yDialog;
+  }
+}(window));
+/* eslint-enable */