Converting utilities into objects

objects/README.md

@@ -0,0 +1,3 @@
+# Scally Objects
+
+*Coming soon*

objects/_o-drop-down.scss

@@ -0,0 +1,112 @@
+/* ============================================================================
+   @OBJECTS -> DROP DOWN
+   ========================================================================= */
+
+
+/**
+ * A generic drop down object powered by some JavaScript which toggles a
+ * class e.g. `is-visible` on the drop down trigger (the button that makes the
+ * drop down visible and invisible) and the target (the actual drop down).
+ * This class will be used to make the drop down target visible when the
+ * trigger is selected. There is also a version for showing the drop down via
+ * the `:hover` pseudo class which is turned off for touch devices.
+ *
+ * @markup
+   <div class="o-drop-down">
+     <!-- The trigger -->
+     <button class="o-drop-down__trigger"> ... </button>
+     <!-- The target -->
+     <div class="o-drop-down__target"> ... </div>
+   </div>
+ */
+
+
+/**
+ * Settings.
+ */
+
+/**
+ * Apply at these breakpoints (turned off by default).
+ */
+
+$o-drop-down-apply-at-breakpoints:               $default-breakpoints !default;
+
+// From the above breakpoints choose what you wish to apply it too
+$o-drop-down-apply-at-breakpoints-for-default:   false !default;
+
+$o-drop-down-apply-at-breakpoints-for-target:    false !default;
+
+$o-drop-down-apply-at-breakpoints-for-on-hover:  false !default;
+
+/**
+ * State classes.
+ */
+
+// The state class that is powered by JavaScript
+$o-drop-down-state-class:                        is-visible !default;
+
+// Class that is used to identify touch support
+$o-drop-down-touch-support-class:                is-touch !default;
+
+
+/**
+ * Drop down container for the trigger and target.
+ *
+ * 1. Sets the positioning context for the target.
+ */
+
+%o-drop-down,
+.o-drop-down {position: relative;} // [1]
+
+@if $o-drop-down-apply-at-breakpoints-for-default {
+  @include generate-at-breakpoints('.o-drop-down',
+    $o-drop-down-apply-at-breakpoints) {position: relative;}
+}// end if
+
+
+  /**
+   * The target, the actual drop down.
+   */
+
+  %o-drop-down__target,
+  .o-drop-down__target {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+
+    // Show the drop down via the JavaScript powered state class and via the
+    // hover modifier.
+    &.#{$o-drop-down-state-class},
+    .o-drop-down--on-hover:hover & {display: block;}
+  }
+
+  @if $o-drop-down-apply-at-breakpoints-for-target {
+    @include generate-at-breakpoints('.o-drop-down__target',
+      $o-drop-down-apply-at-breakpoints) {
+      display: none;
+      position: absolute;
+      top: 100%;
+      left: 0;
+
+      &.#{$o-drop-down-state-class},
+      .o-drop-down--on-hover:hover & {display: block;}
+    }
+  }// end if
+
+
+  /**
+   * Disable for touch devices as they don't have `:hover` support.
+   *
+   * N.B. this will require functionality that can append a hook to an element
+   * (typically the `html` element) if touch is supported.
+   */
+
+  %#{$o-drop-down-touch-support-class} .o-drop-down--on-hover .o-drop-down__target,
+  .#{$o-drop-down-touch-support-class} .o-drop-down--on-hover .o-drop-down__target {display: none;}
+
+  @if $o-drop-down-apply-at-breakpoints-for-on-hover {
+    @include generate-at-breakpoints('.#{$o-drop-down-touch-support-class}
+      .o-drop-down--on-hover .o-drop-down__target',
+      $o-drop-down-apply-at-breakpoints) {display: none;}
+  }// end if

objects/_o-flexible-embed.scss

@@ -0,0 +1,153 @@
+/* ============================================================================
+   @OBJECTS -> FLEXIBLE EMBED
+   ========================================================================= */
+
+
+/**
+ * For use with embeds like videos, iframes, or even images that need to retain
+ * a specific aspect ratio but adapt to the width of their containing element.
+ *
+ * @markup
+   <div class="o-flexible-embed">
+     <!-- The content e.g. a video (`iframe`) -->
+     <div class="o-flexible-embed__content"> ... </div>
+     <!-- Empty element to maintain aspect ratio -->
+     <div class="o-flexible-embed__ratio o-flexible-embed__ratio--16-by-9"></div>
+   </div>
+ *
+ * @credit
+ * https://github.com/suitcss/components-flex-embed/blob/master/lib/flex-embed.css
+ */
+
+
+/**
+ * Settings.
+ */
+
+/**
+ * Apply at these breakpoints (turned off by default).
+ */
+
+$o-flexible-embed-apply-at-breakpoints:                     $default-breakpoints !default;
+
+// From the above breakpoints choose what you wish to apply it too
+$o-flexible-embed-apply-at-breakpoints-for-default:         false !default;
+
+$o-flexible-embed-apply-at-breakpoints-for-ratio:           false !default;
+
+$o-flexible-embed-apply-at-breakpoints-for-ratio-16-by-9:   false !default;
+
+$o-flexible-embed-apply-at-breakpoints-for-ratio-3-by-1:    false !default;
+
+$o-flexible-embed-apply-at-breakpoints-for-ratio-2-by-1:    false !default;
+
+$o-flexible-embed-apply-at-breakpoints-for-ratio-4-by-3:    false !default;
+
+$o-flexible-embed-apply-at-breakpoints-for-content:         false !default;
+
+
+%o-flexible-embed,
+.o-flexible-embed {
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+
+@if $o-flexible-embed-apply-at-breakpoints-for-default {
+  @include generate-at-breakpoints('.o-flexible-embed',
+    $o-flexible-embed-apply-at-breakpoints) {
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+}// end if
+
+
+  /**
+   * The aspect-ratio hack is applied to an empty element because it allows
+   * the component to respect `max-height`.
+   *
+   * N.B. default aspect ratio is 1:1.
+   */
+
+  %o-flexible-embed__ratio,
+  .o-flexible-embed__ratio {
+    display: block;
+    padding-bottom: 100%;
+    width: 100%;
+  }
+
+  @if $o-flexible-embed-apply-at-breakpoints-for-ratio {
+    @include generate-at-breakpoints('.o-flexible-embed__ratio',
+      $o-flexible-embed-apply-at-breakpoints) {
+      display: block;
+      padding-bottom: 100%;
+      width: 100%;
+    }
+  }// end if
+
+
+  /**
+   * Modifiers: common aspect ratios.
+   */
+
+  // 16:9 aspect ratio
+  %o-flexible-embed__ratio--16-by-9,
+  .o-flexible-embed__ratio--16-by-9 {padding-bottom: 56.25%;}
+
+  @if $o-flexible-embed-apply-at-breakpoints-for-ratio-16-by-9 {
+    @include generate-at-breakpoints('.o-flexible-embed__ratio--16-by-9',
+      $o-flexible-embed-apply-at-breakpoints) {padding-bottom: 56.25%;}
+  }// end if
+
+  // 3:1 aspect ratio
+  %o-flexible-embed__ratio--3-by-1,
+  .o-flexible-embed__ratio--3-by-1 {padding-bottom: (100/3)*1%;}
+
+  @if $o-flexible-embed-apply-at-breakpoints-for-ratio-3-by-1 {
+    @include generate-at-breakpoints('.o-flexible-embed__ratio--3-by-1',
+      $o-flexible-embed-apply-at-breakpoints) {padding-bottom: (100/3)*1%;}
+  }// end if
+
+  // 2:1 aspect ratio
+  %o-flexible-embed__ratio--2-by-1,
+  .o-flexible-embed__ratio--2-by-1 {padding-bottom: 50%;}
+
+  @if $o-flexible-embed-apply-at-breakpoints-for-ratio-2-by-1 {
+    @include generate-at-breakpoints('.o-flexible-embed__ratio--2-by-1',
+      $o-flexible-embed-apply-at-breakpoints) {padding-bottom: 50%;}
+  }// end if
+
+  // 4:3 aspect ratio
+  %o-flexible-embed__ratio--4-by-3,
+  .o-flexible-embed__ratio--4-by-3 {padding-bottom: 75%;}
+
+  @if $o-flexible-embed-apply-at-breakpoints-for-ratio-4-by-3 {
+    @include generate-at-breakpoints('.o-flexible-embed__ratio--4-by-3',
+      $o-flexible-embed-apply-at-breakpoints) {padding-bottom: 75%;}
+  }// end if
+
+
+  /**
+   * The content e.g. a video (`iframe`).
+   */
+
+  %o-flexible-embed__content,
+	.o-flexible-embed__content {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+
+  @if $o-flexible-embed-apply-at-breakpoints-for-content {
+    @include generate-at-breakpoints('.o-flexible-embed__content',
+      $o-flexible-embed-apply-at-breakpoints) {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }// end if

objects/_o-link-complex.scss

@@ -0,0 +1,91 @@
+/* ============================================================================
+   @OBJECTS -> LINK COMPLEX
+   ========================================================================= */
+
+
+/**
+ * A common pattern is to have a link with several pieces of text and/or an
+ * icon, where only one piece of text should act like a link when the link is
+ * the subject of user interaction.
+ *
+ * @markup
+   <a class="o-link-complex" href="#">
+     Link complex
+     <span class="o-link-complex__target">target</span>
+   </a>
+ *
+ * @credit
+ * https://github.com/suitcss/utils-link/blob/master/lib/link.css
+ */
+
+
+/**
+ * Settings.
+ */
+
+/**
+ * Apply at these breakpoints (turned off by default).
+ */
+
+$o-link-complex-apply-at-breakpoints:              $default-breakpoints !default;
+
+// From the above breakpoints choose what you wish to apply it too
+$o-link-complex-apply-at-breakpoints-for-default:  false !default;
+
+$o-link-complex-apply-at-breakpoints-for-target:   false !default;
+
+
+%o-link-complex,
+.o-link-complex {
+  &,
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    color: inherit;
+    cursor: text;
+  }
+}
+
+@if $o-link-complex-apply-at-breakpoints-for-default {
+  @include generate-at-breakpoints('.o-link-complex',
+    $o-link-complex-apply-at-breakpoints) {
+    &,
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      color: inherit;
+      cursor: text;
+    }
+  }
+}// end if
+
+
+  /**
+   * The piece of the link that needs to act like a link.
+   */
+
+  %o-link-complex__target,
+  .o-link-complex__target {
+    color: $link-colour;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+      color: $link-colour-hover;
+    }
+  }
+
+  @if $o-link-complex-apply-at-breakpoints-for-target {
+    @include generate-at-breakpoints('.o-link-complex__target',
+      $o-link-complex-apply-at-breakpoints) {
+      color: $link-colour;
+      cursor: pointer;
+
+      &:hover,
+      &:focus {
+        text-decoration: underline;
+        color: $link-colour-hover;
+      }
+    }
+  }// end if