loomcss 0.1.0

data/assets/loom/60-objects/_fixed-ratio.scss

@@ -0,0 +1,42 @@
+/// Toggle fixed-ratio class generation.
+///
+/// By default uses global setting.
+/// @group 60-objects
+$LOOM-use-object-classes-fixed-ratio: $LOOM-use-object-classes !default;
+
+@mixin fixed-ratio($ratio-percentage-a: 16, $ratio-percentage-b: 9) {
+  $calculated-ratio: percentage($ratio-percentage-b / $ratio-percentage-a);
+
+  display: block;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+
+  &::before {
+    content: '';
+    display: block;
+    padding-top: $calculated-ratio;
+  }
+}
+
+@mixin fixed-ratio__inner($distance: 0) {
+  bottom: $distance;
+  display: block;
+  height: auto;
+  left: $distance;
+  min-height: 100%;
+  position: absolute;
+  right: $distance;
+  top: $distance;
+  width: 100%;
+}
+
+@if $LOOM-use-object-classes-fixed-ratio {
+  .o-fixed-ratio {
+    @include fixed-ratio();
+  }
+
+  .o-fixed-ratio__inner {
+    @include fixed-ratio__inner();
+  }
+}

data/assets/loom/60-objects/_headings.scss

@@ -0,0 +1,28 @@
+/// Toggle headings class generation.
+///
+/// By default uses global setting.
+/// @group 60-objects
+$LOOM-use-object-classes-headings: $LOOM-use-object-classes !default;
+
+// NOTE: These are one of the only project objects not to define mixins in the source file. To consume header objects, use `@include font-size()`.
+
+// NOTE: The default heading list, `$LOOM-h-object-sizes`, is defined in `10-global-settings/typography`
+
+@if ($LOOM-use-object-classes-headings) {
+  $heading-list: $LOOM-h-object-sizes;
+
+  @each $name in $heading-list {
+    .o-h-#{$name} {
+      @include font-size($name, smaller-viewport);
+    }
+  }
+
+  // NOTE: At $LOOM-typography-breakpoint larger fonts will be used. This is because you typicall want small fonts on mobile. larger on desktop.
+  @include mq($from: $LOOM-typography-breakpoint) {
+    @each $name in $heading-list {
+      .o-h-#{$name} {
+        @include font-size($name, larger-viewport);
+      }
+    }
+  }
+}

data/assets/loom/60-objects/_hide-visually.scss

@@ -0,0 +1,23 @@
+/// Toggle hide-visually class generation.
+///
+/// By default uses global setting.
+/// @group 60-objects
+$LOOM-use-object-classes-hide-visually: $LOOM-use-object-classes !default;
+
+@mixin hide-visually() {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: circle(1% at 1% 1%);
+  height: 1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+// Classes
+@if $LOOM-use-object-classes-hide-visually {
+  .o-hide-visually {
+    @include hide-visually();
+  }
+}

data/assets/loom/60-objects/_icon.scss

@@ -0,0 +1,30 @@
+/// Toggle icon class generation.
+///
+/// By default uses global setting.
+/// @group 60-objects
+$LOOM-use-object-classes-icon: $LOOM-use-object-classes !default;
+
+@mixin icon($icon-font-size: 1em) {
+  $size: null;
+
+  @if (is-number($icon-font-size)) {
+    $size: $icon-font-size;
+  } @else { // stylelint-disable-line
+    $size: get-icon-size($icon-font-size);
+  }
+
+  color: inherit;
+  display: inline-block;
+  fill: currentColor;
+  font-size: $size;
+  height: 1em;
+  outline: none;
+  vertical-align: middle;
+  width: 1em;
+}
+
+@if $LOOM-use-object-classes-icon {
+  .o-icon {
+    @include icon();
+  }
+}

data/assets/loom/60-objects/_list-inline.scss

@@ -0,0 +1,37 @@
+/// Toggle list-inline class generation.
+///
+/// By default uses global setting.
+/// @group 60-objects
+$LOOM-use-object-classes-list-inline: $LOOM-use-object-classes !default;
+
+// LIST-INLINE
+
+// Mixin
+// NOTE: Displays list elements inline to each other. For use on OL or UL.
+// NOTE: REQUIRES LIST-RESET
+@mixin list-inline($nest-inline: false) {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  @if $nest-inline {
+    & > li {
+      display: inline-block;
+    }
+  }
+}
+
+@mixin list-inline__item() {
+  display: inline-block;
+}
+
+// Classes
+@if $LOOM-use-object-classes-list-inline {
+  .o-list-inline {
+    @include list-inline();
+  }
+
+  .o-list-inline__item {
+    @include list-inline__item();
+  }
+}

data/assets/loom/60-objects/_list-reset.scss

@@ -0,0 +1,25 @@
+/// Toggle list-reset class generation.
+///
+/// By default uses global setting.
+/// @group 60-objects
+$LOOM-use-object-classes-list-reset: $LOOM-use-object-classes !default;
+
+// LIST-RESET
+
+// Mixin
+// NOTE: Removes all padding, margin and list-style-type from a list.
+@mixin list-reset($list-reset-spacing: true) {
+  @if $list-reset-spacing {
+    margin: 0;
+    padding: 0;
+  }
+
+  list-style-type: none;
+}
+
+// Classes
+@if $LOOM-use-object-classes-list-reset {
+  .o-list-reset {
+    @include list-reset();
+  }
+}

data/assets/loom/60-objects/_media.scss

@@ -0,0 +1,35 @@
+/// Toggle media class generation.
+///
+/// By default uses global setting.
+/// @group 60-objects
+$LOOM-use-object-classes-media: $LOOM-use-object-classes !default;
+
+@mixin media() {
+  @include clearfix();
+
+  display: block;
+}
+
+@mixin media__primary($spacing: get-spacing(xsmall)) {
+  float: left;
+  margin-right: $spacing;
+}
+
+@mixin media__secondary() {
+  display: block;
+  overflow: hidden;
+}
+
+@if $LOOM-use-object-classes-media {
+  .o-media {
+    @include media();
+  }
+
+  .o-media__primary {
+    @include media__primary();
+  }
+
+  .o-media__secondary {
+    @include media__secondary();
+  }
+}

data/assets/loom/60-objects/_vertical-center.scss

@@ -0,0 +1,18 @@
+/// Toggle vertical-center class generation.
+///
+/// By default uses global setting.
+/// @group 60-objects
+$LOOM-use-object-classes-vertical-center: $LOOM-use-object-classes !default;
+
+@mixin vertical-center {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+// Classes
+@if $LOOM-use-object-classes-vertical-center {
+  .o-vertical-center {
+    @include vertical-center();
+  }
+}

data/assets/loom/70-ui-components/_example.scss

@@ -0,0 +1,22 @@
+// .c-example {
+//   display: block;
+// }
+//
+// .c-example__header {
+//   @include fixed-ratio();
+// }
+//
+// .c-example__image {
+//   @include fixed-ratio__inner();
+// }
+//
+// .c-example__title {
+//   @include generic-heading();
+//   @include font-size(alpha);
+// }
+
+@include mq($from: large) {
+  body {
+    // background-color: pink !important;
+  }
+}

data/assets/loom/80-utilities/_background-color.scss

@@ -0,0 +1,13 @@
+/// Toggle background-color class generation.
+///
+/// By default uses global setting.
+/// @group 80-utilities
+$LOOM-use-utility-classes-background-color: $LOOM-use-utility-classes !default;
+
+@if $LOOM-use-utility-classes-background-color {
+  @each $color-name, $color-value in $LOOM-colors-list {
+    .o-background-color-#{$color-name} {
+      background-color: $color-value;
+    }
+  }
+}

data/assets/loom/80-utilities/_border.scss

@@ -0,0 +1,10 @@
+/// Toggle border class generation.
+///
+/// By default uses global setting.
+/// @group 80-utilities
+$LOOM-use-utility-classes-border: $LOOM-use-utility-classes !default;
+
+@if $LOOM-use-utility-classes-border {
+  // nothing yet
+  // all  colours as border colours. Mix with an array of possible border-styles and possible border-widths
+}

data/assets/loom/80-utilities/_color.scss

@@ -0,0 +1,13 @@
+/// Toggle color class generation.
+///
+/// By default uses global setting.
+/// @group 80-utilities
+$LOOM-use-utility-classes-color: $LOOM-use-utility-classes !default;
+
+@if $LOOM-use-utility-classes-color {
+  @each $color-name, $color-value in $LOOM-colors-list {
+    .o-color-#{$color-name} {
+      color: $color-value;
+    }
+  }
+}

data/assets/loom/80-utilities/_display.scss

@@ -0,0 +1,31 @@
+/// Toggle display class generation.
+///
+/// By default uses global setting.
+/// @group 80-utilities
+$LOOM-use-utility-classes-display: $LOOM-use-utility-classes !default;
+
+@if $LOOM-use-utility-classes-display {
+  .u-display-block {
+    display: block;
+  }
+
+  .u-display-inline {
+    display: inline;
+  }
+
+  .u-display-inline-block {
+    display: inline-block;
+  }
+
+  .u-display-none {
+    display: none;
+  }
+
+  @each $key, $value in $LOOM-display-none-breakpoints {
+    @include mq($key) {
+      .u-display-none\@#{$key} {
+        display: none;
+      }
+    }
+  }
+}

data/assets/loom/80-utilities/_font-family.scss

@@ -0,0 +1,20 @@
+/// Toggle font-family class generation.
+///
+/// By default uses global setting.
+/// @group 80-utilities
+$LOOM-use-utility-classes-font-family: $LOOM-use-utility-classes !default;
+
+@if $LOOM-use-utility-classes-font-family {
+  // For each in the font-family list, generate a utility class here.
+  @each $key, $name in $LOOM-fonts {
+    .u-font-family-#{$key} {
+      font-family: get-font-family($key);
+
+      @if $LOOM-fonts-loaded {
+        .#{$LOOM-fonts-loaded} & {
+          font-family: get-font-family($key, webfont);
+        }
+      }
+    }
+  }
+}

data/assets/loom/80-utilities/_font-size.scss

@@ -0,0 +1,24 @@
+/// Toggle font-size class generation.
+///
+/// By default uses global setting.
+/// @group 80-utilities
+$LOOM-use-utility-classes-font-size: $LOOM-use-utility-classes !default;
+
+@if $LOOM-use-utility-classes-font-size {
+  // for each font size, generate a utility class.
+
+  @each $key, $name in $LOOM-font-sizes {
+    .u-font-size-#{$key} {
+      @include font-size($key, smaller-viewport);
+    }
+  }
+
+  // NOTE: At $LOOM-typography-breakpoint larger fonts will be used. This is because you typically want small fonts on mobile, larger on desktop.
+  @include mq($from: $LOOM-typography-breakpoint) {
+    @each $key, $name in $LOOM-font-sizes {
+      .u-font-size-#{$key} {
+        @include font-size($key, larger-viewport);
+      }
+    }
+  }
+}

data/assets/loom/80-utilities/_font-style.scss

@@ -0,0 +1,15 @@
+/// Toggle font-style class generation.
+///
+/// By default uses global setting.
+/// @group 80-utilities
+$LOOM-use-utility-classes-font-style: $LOOM-use-utility-classes !default;
+
+@if $LOOM-use-utility-classes-font-style {
+  .u-font-style-italic {
+    font-style: $LOOM-font-style-italic;
+  }
+
+  .u-font-style-normal {
+    font-style: $LOOM-font-style-normal;
+  }
+}

data/assets/loom/80-utilities/_font-weight.scss

@@ -0,0 +1,15 @@
+/// Toggle font-weight class generation.
+///
+/// By default uses global setting.
+/// @group 80-utilities
+$LOOM-use-utility-classes-font-weight: $LOOM-use-utility-classes !default;
+
+@if $LOOM-use-utility-classes-font-weight {
+  .u-font-weight-bold {
+    font-weight: $LOOM-font-weight-bold;
+  }
+
+  .u-font-weight-normal {
+    font-weight: $LOOM-font-weight-normal;
+  }
+}

data/assets/loom/80-utilities/_margin.scss

@@ -0,0 +1,33 @@
+/// Toggle margin class generation.
+///
+/// By default uses global setting.
+/// @group 80-utilities
+$LOOM-use-utility-classes-margin: $LOOM-use-utility-classes !default;
+
+@if $LOOM-use-utility-classes-margin {
+  // Margins for each spacing unit and position.
+
+  // Margins for each breakpoint
+
+  .u-margin-none {
+    margin: 0;
+  }
+
+  @each $position in (left, top, right, bottom) {
+    .u-margin-#{$position}-none {
+      margin-#{$position}: 0;
+    }
+  }
+
+  @each $key, $value in $LOOM-spacing {
+    .u-margin-#{$key} {
+      margin: $value;
+    }
+
+    @each $position in (left, top, right, bottom) {
+      .u-margin-#{$position}-#{$key} {
+        margin-#{$position}: $value;
+      }
+    }
+  }
+}