bitstyles 0.8.0

data/scss/bitstyles/objects/_block.scss

@@ -0,0 +1,14 @@
+/** @define block */
+//
+// Block
+//
+// Display an element as a block.
+//
+// Markup:
+// <span class="o-block background-grey">Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</span>
+//
+// Styleguide 1.25
+
+.#{$bitstyles-namespace}o-block {
+  @include block;
+}

data/scss/bitstyles/objects/_bordered-header.scss

@@ -0,0 +1,39 @@
+/** @define bordered-header */
+//
+// Bordered Header
+//
+// Creates equally-sized horizontal lines to the left & right of the element.
+//
+// markup:
+// <h2 class="o-bordered-header">Bordered header</h2>
+//
+// Styleguide 1.17
+
+@import '../settings/bordered-header';
+
+.#{$bitstyles-namespace}o-bordered-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  text-align: center;
+  white-space: nowrap;
+
+  &::before,
+  &::after {
+    display: inline-block;
+    vertical-align: middle;
+    flex-grow: 1;
+    min-width: $bitstyles-bordered-header-line-min-width;
+    border-top: $bitstyles-bordered-header-border;
+    content: '';
+  }
+
+  &::before {
+    margin-right: $bitstyles-bordered-header-gutter;
+  }
+
+  &::after {
+    margin-left: $bitstyles-bordered-header-gutter;
+  }
+}

data/scss/bitstyles/objects/_break-long-words.scss

@@ -0,0 +1,15 @@
+/** @define o-break-long-words */
+//
+// Break long words
+//
+// A cross-browser friendly emthod of ensuring no words exceed the width of the container.
+// Use especially with user-generated content.
+//
+// markup:
+// <p class="o-break-long-words">LongcontentwithnolinebreaksgoeshereLongcontentwithnolinebreaksgoeshereLongcontentwithnolinebreaksgoeshereLongcontentwithnolinebreaksgoeshereLongcontentwithnolinebreaksgoeshere</p>
+//
+// Styleguide 1.8
+
+.#{$bitstyles-namespace}o-break-long-words {
+  @include break-long-words;
+}

data/scss/bitstyles/objects/_button--icon.scss

@@ -0,0 +1,30 @@
+// Icon Button
+//
+// A specialised button type — (visible) content is intended to be only an icon.
+// Specify the svg `<title>` when `<use>`ing the icon element so the button has valid text to use as button label (see example markup),
+// or provide a `<span class="visuallyhidden"></span>` as sibling to the icon.
+//
+// markup:
+// <button class="o-button o-button--icon {$modifiers}">
+//   <svg class="o-icon">
+//     <title>Twitter logo</title>
+//     <use xlink:href="assets/images/icons.svg#icon-twitter"></use>
+//   </svg>
+// </button>
+//
+//               - Base state
+// :hover        - Hover state.
+// :focus        - Focus state.
+//
+// Styleguide 1.2
+
+@import '../settings/button--icon';
+
+.#{$bitstyles-namespace}o-button--icon {
+  padding: $bitstyles-button-icon-padding;
+  line-height: 1;
+  color: $bitstyles-button-icon-color;
+  background-color: $bitstyles-button-icon-background-color;
+  border: $bitstyles-button-icon-border;
+  border-radius: $bitstyles-button-icon-border-radius;
+}

data/scss/bitstyles/objects/_button.scss

@@ -0,0 +1,103 @@
+/** @define button */
+//
+// Button
+//
+// Styleguide 1.1
+
+// Button - generic
+//
+// Produces a larger-than-text hit target. Intended to be an action, not a link — most often a `<button>` rather than `<a href="#">`.
+//
+// markup:
+// <button class="o-button {$modifiers}">
+//   <span class="o-button__label">Button Text</span>
+// </button>
+//
+//              - Base state
+// :hover       - Hover state.
+// :focus       - Focus state.
+// :disabled    - Disabled state.
+//
+// Styleguide 1.1.1
+
+@import '../settings/button';
+
+.#{$bitstyles-namespace}o-button {
+  position: relative;
+  display: inline-block;
+  padding: $bitstyles-button-padding-vertical $bitstyles-button-padding-horizontal;
+  margin: 0;
+  overflow: visible;
+  font: inherit;
+  color: $bitstyles-button-color;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  background: $bitstyles-button-background-color;
+  border: $bitstyles-button-border;
+  border-radius: $bitstyles-button-border-radius;
+  transition: $bitstyles-button-transition;
+  -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
+  user-select: none;
+  touch-action: manipulation;
+
+  &:hover,
+  &:focus {
+    color: $bitstyles-button-color-hover;
+    background: $bitstyles-button-background-color-hover;
+    outline: none;
+  }
+
+  &:disabled {
+    background: $bitstyles-button-background-color-disabled;
+    border-color: $bitstyles-button-border-color-disabled;
+    color: $bitstyles-button-color-disabled;
+    cursor: default;
+  }
+}
+
+.#{$bitstyles-namespace}o-button__label {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+// Button - with icon
+//
+// A button can be used with an optional decorative icon, placed before the
+// text. Source order dictates icon position.
+//
+// markup:
+// <button class="o-button {$modifiers}">
+//   <svg class="o-button__icon o-icon"><use xlink:href="assets/images/icons.svg#icon-twitter"></use></svg><span class="o-button__label">Button Text</span>
+// </button>
+//
+//              - Base state
+// :hover       - Hover state.
+// :focus       - Focus state.
+//
+// Styleguide 1.1.2
+
+// Button - with icon, reversed
+//
+// A button can be used with an optional decorative icon, placed before the
+// text. Source order dictates icon position.
+//
+// markup:
+// <button class="o-button {$modifiers}">
+//   <span class="o-button__label">Button Text</span><svg class="o-button__icon o-icon"><use xlink:href="assets/images/icons.svg#icon-twitter"></use></svg>
+// </button>
+//
+//              - Base state
+// :hover       - Hover state.
+// :focus       - Focus state.
+//
+// Styleguide 1.1.3
+
+.#{$bitstyles-namespace}o-button__icon + .#{$bitstyles-namespace}o-button__label {
+  margin-left: $bitstyles-button-icon-spacing;
+}
+
+.#{$bitstyles-namespace}o-button__label + .#{$bitstyles-namespace}o-button__icon {
+  margin-left: $bitstyles-button-icon-spacing;
+}

data/scss/bitstyles/objects/_clearfix.scss

@@ -0,0 +1,19 @@
+/** @define clearfix */
+//
+// Clearfix
+//
+// Force an element to behave as if its floated children have been `clear: both`ed.
+// The element will therefore be of the correct height (including backgrounds etc.)
+// and will be separated from other content (as cleared elements are).
+//
+// markup:
+// <div class="o-clearfix background-grey">
+//   <div class="floated-element">Content goes here</div>
+//   <div class="floated-element">Content goes here</div>
+// </div>
+//
+// Styleguide 1.7
+
+.#{$bitstyles-namespace}o-clearfix {
+  @include clearfix;
+}

data/scss/bitstyles/objects/_expander.scss

@@ -0,0 +1,45 @@
+// Expander
+//
+// Needs JS to function. The toggle is an interactive element of some kind (button, link),
+// the body is the content you want to be revealed — it starts at zero height,
+// expands to size of content once active.
+//
+// Use the `.o-button` classes on the `.o-expander-toggle` to set size & appearance.
+//
+// markup:
+// <p>
+//   <button class="o-expander-toggle o-button" aria-expanded="false" aria-controls="expander-0" id="expander_button">
+//     Toggle content
+//     <svg class="o-icon o-expander-toggle__indicator">
+//       <use xlink:href="assets/images/icons.svg#icon-arrow-up"></use>
+//     </svg>
+//   </button>
+// </p>
+// <p>Other content</p>
+// <div class="o-expander-body" id="expander-0" aria-hidden="true">
+//   <p>Pudding oat cake brownie. Gummies jelly beans apple pie. Donut sugar plum cotton candy sesame snaps muffin oat cake. Lemon drops carrot cake croissant gingerbread danish. Gingerbread liquorice soufflé croissant dessert sweet roll candy sweet roll. Pastry chocolate bar donut tiramisu marshmallow donut. Brownie chupa chups macaroon cupcake. Marzipan soufflé jelly sweet roll sesame snaps chocolate bar cake cotton candy brownie.</p>
+//   <p>Powder sweet roll sesame snaps. Sweet roll fruitcake ice cream cheesecake croissant. Candy cupcake cake brownie muffin oat cake gummi bears bear claw. Chupa chups liquorice jelly cotton candy gummies gummies. Jujubes lemon drops candy gummi bears cake cake fruitcake tart pastry. Cake topping candy canes. Lollipop dragée icing chocolate cake sugar plum. Jujubes halvah tootsie roll chocolate gingerbread sweet roll danish. Biscuit bonbon sweet.</p>
+// </div>
+//
+// Styleguide 1.9
+
+.#{$bitstyles-namespace}o-expander-toggle__indicator {
+  transform: rotate(180deg);
+  transition: transform $bitstyles-transition-duration $bitstyles-transition-easing;
+
+  .#{$bitstyles-namespace}o-expander-toggle[aria-expanded="true"] & {
+    transform: rotate(0deg); /* stylelint-disable-line length-zero-no-unit */
+  }
+}
+
+.#{$bitstyles-namespace}o-expander-body {
+  height: auto;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height $bitstyles-transition-duration-long $bitstyles-transition-easing;
+
+  &[aria-hidden="false"] {
+    max-height: 999rem;
+    max-height: 200vh; // stylelint-disable-line declaration-block-no-duplicate-properties
+  }
+}

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

@@ -0,0 +1,23 @@
+/** @define fixed-ratio */
+//
+// Fixed-ratio
+//
+// Enforces an aspect ratio on this element anbd its contents. Default ratio is 16:9, element take 100% width and height matches.
+//
+// markup:
+// <figure>
+//   <div class="o-fixed-ratio">
+//     <img class="o-fixed-ratio__inner" src="assets/images/placeholder_16-9.png">
+//   </div>
+//   <figcaption>An image at 16:9 aspect ratio</figcaption>
+// </figure>
+//
+// Styleguide 1.18
+
+.#{$bitstyles-namespace}o-fixed-ratio {
+  @include fixed-ratio;
+}
+
+.#{$bitstyles-namespace}o-fixed-ratio__inner {
+  @include fixed-ratio__inner;
+}

data/scss/bitstyles/objects/_flex.scss

@@ -0,0 +1,24 @@
+/** @define flex */
+//
+// Flex
+//
+// Simple flex layout.
+// Make one of the children `.o-flex__primary` to make it take as much space as is available.
+//
+// markup:
+// <ul class="o-flex">
+//  <li>Some content here</li>
+//  <li class="o-flex__primary">Some more important content here</li>
+//  <li>Some content here</li>
+//  <li>Some content here</li>
+// </ul>
+//
+// Styleguide 1.10
+
+.#{$bitstyles-namespace}o-flex {
+  @include flex;
+}
+
+.#{$bitstyles-namespace}o-flex__primary {
+  @include flex__primary;
+}

data/scss/bitstyles/objects/_hidden.scss

@@ -0,0 +1,33 @@
+/** @define hidden */
+//
+// Hidden
+//
+// Fully hides an element & its children — does not affect document flow, does not get read by google or screenreaders.
+// Available at every breakpoint defined in `$hidden-breakpoints`.
+//
+// .o-hidden          - Hide this element always (generally so it can be revealed using JS)
+// .o-hidden@small    - Hide this content on smallscreens
+// .o-hidden@large    - Hide this content on larger screens
+//
+// markup:
+// <p>Paragraph 1 content</p>
+// <p class="{$modifiers}">Paragraph 2 content</p>
+// <p>Paragraph 3 content</p>
+// <p class="{$modifiers}">Paragraph 4 content</p>
+// <p>Paragraph 5 content</p>
+//
+// Styleguide 1.13
+
+@import '../settings/hidden';
+
+.#{$bitstyles-namespace}o-hidden {
+  @include hidden;
+}
+
+@each $breakpoint in $hidden-breakpoints {
+  @include media-query($breakpoint) {
+    .#{$bitstyles-namespace}o-hidden\@#{$breakpoint} {
+      @include hidden;
+    }
+  }
+}

data/scss/bitstyles/objects/_icon.scss

@@ -0,0 +1,43 @@
+/** @define icon */
+//
+// Icons
+//
+// We use an svg-based icon system. All icons are present as symbols within `icons.svg`, and are used by embedding svg tags (see example markup).
+// Provide a `<title>` element at the point an icon is used to ensure there is some text content (equivalent to the alt property on `<img>`s.)
+// Set icon sizes by overiding the `$bitstyles-icon-sizes` map (see settings file). Default icon size is the same as surrounding text i.e. `1em`.
+//
+// markup:
+// <svg class="o-icon {$modifiers}">
+//   <title>Twitter logo</title>
+//   <use xlink:href="assets/images/icons.svg#icon-twitter"></use>
+// </svg>
+//
+// default          - Base size, matches font-size of parent element.
+// .o-icon--small     - Small icon (given default vars).
+// .o-icon--medium    - Medium icon (given default vars).
+// .o-icon--large     - Large icon (given default vars).
+//
+// Styleguide 1.3
+
+@import '../settings/icon';
+
+.#{$bitstyles-namespace}o-icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  font-size: 1em;
+  vertical-align: middle;
+  outline: none;
+  transition: fill $bitstyles-transition-duration $bitstyles-transition-easing, stroke $bitstyles-transition-duration $bitstyles-transition-easing, background-color $bitstyles-transition-duration $bitstyles-transition-easing, transform $bitstyles-transition-duration $bitstyles-transition-easing;
+  fill: currentColor;
+}
+
+@each $icon-size in $bitstyles-icon-sizes {
+  $alias: nth($icon-size, 1);
+  $size: nth($icon-size, 2);
+
+  /* postcss-bem-linter: ignore */
+  .#{$bitstyles-namespace}o-icon--#{$alias} {
+    font-size: $size;
+  }
+}

data/scss/bitstyles/objects/_input.scss

@@ -0,0 +1,83 @@
+/** @define input */
+// Form inputs
+//
+// Basic styling for input elements. All inputs stretch to fill their parent —
+// their width can be constrained by the parent element.
+//
+// Styleguide 1.22
+
+@import '../settings/input';
+
+// Form inputs - text
+//
+// Text inputs are those that accept a string input — text, email, number, date.
+//
+// Markup:
+//   <label class="o-label" for="input_1">This is labeling text</label>
+//   <input type="text" class="o-input o-input--text {$modifiers}" id="input_1" placeholder="Placeholder text" />
+//
+//
+//              - default state
+// :disabled    - Disabled state.
+// :active      - Active/focus state
+//
+// Styleguide 1.22.1
+
+.#{$bitstyles-namespace}o-input {
+  @include block;
+
+  width: 100%;
+}
+
+.#{$bitstyles-namespace}o-input--text {
+  padding: $bitstyles-input-padding;
+  background-color: $bitstyles-input-background;
+  border: $bitstyles-input-border;
+  border-radius: $bitstyles-input-border-radius;
+  color: $bitstyles-input-color;
+
+  &::placeholder {
+    color: $bitstyles-input-placeholder-color;
+  }
+
+  &:disabled {
+    background: $bitstyles-input-background-color-disabled;
+    color: $bitstyles-input-color-disabled;
+    cursor: default;
+  }
+
+  &:active,
+  &:focus {
+    border: $bitstyles-input-border-active;
+  }
+}
+
+// Form inputs - Select
+//
+// Markup:
+//   <label class="o-label" for="select_1">This is labeling text</label>
+//   <select class="o-input" id="select_1">
+//     <option value="value1">Value 1</option>
+//     <option value="value2" selected>Value 2</option>
+//     <option value="value3">Value 3</option>
+//   </select>
+//
+// Styleguide 1.22.2
+
+// Form inputs - Checkbox
+//
+// Markup:
+//    <label class="o-label">
+//      <input type="checkbox" class="o-input o-input--checkbox">
+//      This is labeling text. Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer. Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer. Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer. Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.
+//    </label>
+//
+// Styleguide 1.22.3
+
+.#{$bitstyles-namespace}o-input--checkbox {
+  display: inline-block;
+  width: $bitstyles-input-checkbox-size;
+  height: $bitstyles-input-checkbox-size;
+  margin-right: $bitstyles-input-padding;
+  vertical-align: middle;
+}

data/scss/bitstyles/objects/_label.scss

@@ -0,0 +1,15 @@
+/** @define label */
+// Form labels
+//
+// Default styling for form labels.
+//
+// Markup:
+//   <label class="o-label" for="input_1">This is label text</label>
+//   <input class="o-input o-input--text" type="text" placeholder="Placeholder text" id="input_1" />
+//
+// Styleguide 1.23
+
+.#{$bitstyles-namespace}o-label {
+  display: block;
+  margin-bottom: 0;
+}

data/scss/bitstyles/objects/_link.scss

@@ -0,0 +1,29 @@
+/* @define Link */
+// Link
+//
+// Mimicking standard anchors e.g. allows a `<button>` to look like a link
+//
+// Markup:
+// <p>Read our <button class="o-link">Privacy Policy</button>.</p>
+//
+// Styleguide 1.26
+
+@import '../settings/link';
+
+.#{$bitstyles-namespace}o-link {
+  padding: 0;
+  background: none;
+  color: $bitstyles-color-link;
+  border: 0;
+  cursor: pointer;
+  -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
+
+  &:visited {
+    color: $bitstyles-color-link-visited;
+  }
+
+  &:hover,
+  &:focus {
+    color: $bitstyles-color-link-hover;
+  }
+}

data/scss/bitstyles/objects/_list-reset.scss

@@ -0,0 +1,25 @@
+/** @define list-reset */
+// List reset
+//
+// List reset removes the default margin, padding and bullets on a list, making
+// it more useful as a semantic container.
+//
+// Markup:
+// <ul class="{$modifiers}">
+//   <li>Item 1</li>
+//   <li>Item 2</li>
+//   <li>Item 3</li>
+// </ul>
+//
+// o-list-reset                 - Remove padding, margin and list-style-type
+// o-list-reset--bullets-only   - Remove list-style-type only. Does not rely on `list-reset`. Useful if `list-reset` would adversely affect the margin or padding of another component.
+//
+// Styleguide 1.19
+
+.#{$bitstyles-namespace}o-list-reset {
+  @include list-reset();
+}
+
+.#{$bitstyles-namespace}o-list-reset--bullets-only {
+  @include list-reset(false);
+}

data/scss/bitstyles/objects/_media.scss

@@ -0,0 +1,20 @@
+/** @define media */
+// Media
+//
+// Nicole Sullivan’s OOCSS media object.
+//
+// markup:
+// <div class="o-media">
+//   <img class="o-media__feature" src="assets/images/placeholder_16-9.png"/>
+//   <p>Some text here that sits against the featured image on its left</p>
+// </div>
+//
+// Styleguide 1.21
+
+.#{$bitstyles-namespace}o-media {
+  @include media;
+}
+
+.#{$bitstyles-namespace}o-media__feature {
+  @include media__feature;
+}

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

@@ -0,0 +1,18 @@
+/** @define truncate-with-ellipsis */
+//
+// Truncate with ellipsis
+//
+// Truncates text with an ellipsis (…). 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.
+//
+// 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
+
+.#{$bitstyles-namespace}o-truncate-with-ellipsis {
+  @include truncate-with-ellipsis;
+}