loomcss 0.1.0

data/assets/loom/30-generic/_reset.scss

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

data/assets/loom/40-base-elements/_form-items.scss

@@ -0,0 +1,50 @@
+/// Default color for inputs
+/// @group 40-base-elements
+$LOOM-input-color: $LOOM-color-dark-gray !default;
+
+/// Default color for inputs (placeholder text)
+/// @group 40-base-elements
+$LOOM-input-placeholder-color: $LOOM-color-medium-gray !default;
+
+/// Default color for borders
+/// @group 40-base-elements
+$LOOM-input-border-color: $LOOM-color-medium-gray !default;
+
+/// Default padding for texty inputs
+/// @group 40-base-elements
+$LOOM-input-padding: get-spacing(xsmall);
+
+input[type=text],
+input[type=url],
+input[type=tel],
+input[type=number],
+input[type=color],
+input[type=email],
+input[type=date],
+input[type=datetime],
+input[type=month],
+input[type=password],
+input[type=search],
+input[type=week],
+input[type=time] {
+  border: $LOOM-border-width $LOOM-border-style $LOOM-input-border-color;
+  border-radius: $LOOM-border-radius;
+  color: $LOOM-input-color;
+  padding: $LOOM-input-padding;
+}
+
+input {
+  &::placeholder {
+    color: $LOOM-input-placeholder-color;
+  }
+}
+
+textarea {
+  border: $LOOM-border-width $LOOM-border-style $LOOM-input-border-color;
+  color: $LOOM-input-color;
+  padding: $LOOM-input-padding;
+}
+
+label {
+  font-weight: $LOOM-font-weight-bold;
+}

data/assets/loom/40-base-elements/_images.scss

@@ -0,0 +1,5 @@
+// NOTE: By default images grow to fill their parent container. We <3 responsiveness.
+img {
+  height: auto;
+  max-width: 100%;
+}

data/assets/loom/40-base-elements/_typography.scss

@@ -0,0 +1,138 @@
+/// Default color for the html root
+/// @group 40-base-elements
+$LOOM-html-color: $LOOM-color-black !default;
+
+/// Default background color for the html root
+/// @group 40-base-elements
+$LOOM-html-background-color: $LOOM-color-white !default;
+
+/// Default color for links
+/// @group 40-base-elements
+$LOOM-a-color: $LOOM-color-medium-gray !default;
+
+/// Default color for links (visited)
+/// @group 40-base-elements
+$LOOM-a-color-visited: $LOOM-color-dark-gray !default;
+
+/// Default color for links (hover)
+/// @group 40-base-elements
+$LOOM-a-color-hover: $LOOM-color-black !default;
+
+/// Check to see if a "default" font is available in the global font LOOM-font-list
+/// @group 40-base-elements
+$LOOM-font-size-default-available: if(get-font-size(default), true, false) !default;
+
+html {
+  background: $LOOM-html-background-color;
+  color: $LOOM-html-color;
+  font-family: $LOOM-font-family-primary-default;
+  line-height: $LOOM-line-height;
+
+  @if $LOOM-font-size-default-available {
+    @include font-size(default, smaller-viewport);
+  }
+
+  @else {
+    font-size: $LOOM-font-size-on-smaller-screens;
+  }
+
+  .#{$LOOM-fonts-loaded} & { // NOTE: make use of a font loading system here
+    font-family: $LOOM-font-family-primary-webfont;
+  }
+}
+
+// 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) {
+  html {
+    @if $LOOM-font-size-default-available {
+      @include font-size(default, larger-viewport);
+    }
+
+    @else {
+      font-size: $LOOM-font-size-on-larger-screens;
+    }
+  }
+}
+
+a {
+  color: $LOOM-a-color;
+  transition: get-transition(color);
+
+  &:visited {
+    color: $LOOM-a-color-visited;
+  }
+
+  &:hover,
+  &:focus {
+    color: $LOOM-a-color-hover;
+  }
+}
+
+p {
+  margin: 0 0 $LOOM-spacing-vertical;
+}
+
+@if ($LOOM-generate-sizes-for-default-headings) {
+  // Make all headings use a sizing heirarchy.
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @include generic-heading;
+  }
+
+  // Give each base element heading a value as described in $LOOM-h-element-sizes.
+  @each $name, $value in $LOOM-h-element-sizes {
+    #{$name} {
+      @include font-size($value, smaller-viewport);
+    }
+  }
+
+  // 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 $name, $value in $LOOM-h-element-sizes {
+      #{$name} {
+        @include font-size($value, larger-viewport);
+      }
+    }
+  }
+} @else { // stylelint-disable-line
+  // Just give each HTML heading the same size.
+  // We equalise the sizes so that semantic values do not interfere with designs. Sizes must be imparted conciously.
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @include generic-heading($margin-size: 0, $font-weight: $LOOM-font-weight-normal);
+
+    @if $LOOM-font-size-default-available {
+      @include font-size(default, smaller-viewport);
+    }
+
+    @else {
+      font-size: $LOOM-font-size-on-smaller-screens;
+    }
+  }
+
+  // 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) {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      @if $LOOM-font-size-default-available {
+        @include font-size(default, larger-viewport);
+      }
+
+      @else {
+        font-size: $LOOM-font-size-on-larger-screens;
+      }
+    }
+  }
+}

data/assets/loom/50-layout/_grid.scss

@@ -0,0 +1,37 @@
+$LOOM-grid-gutter-value: get-spacing($LOOM-grid-gutter) !default;
+
+.l-grid {
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-left: -$LOOM-grid-gutter-value;
+  margin-right: -$LOOM-grid-gutter-value;
+}
+
+.l-grid--reverse {
+  flex-direction: row-reverse;
+}
+
+.l-grid__item {
+  padding-left: $LOOM-grid-gutter-value;
+  padding-right: $LOOM-grid-gutter-value;
+}
+
+@include grid-columns($LOOM-grid-columns);
+
+@if variable-exists(LOOM-grid-breakpoints) {
+  @each $grid-breakpoint-alias in $LOOM-grid-breakpoints {
+    $breakpoint-condition: map-get($LOOM-mq-breakpoints, $grid-breakpoint-alias);
+
+    @if ($breakpoint-condition) {
+      @include mq($from: $grid-breakpoint-alias) {
+        @each $i in $LOOM-grid-columns-responsive {
+          @include grid-columns($i, \@#{$grid-breakpoint-alias});
+        }
+      }
+    } @else { // stylelint-disable-line
+      @error "It looks like ‘#{$grid-breakpoint-alias}’ does not exist in $LOOM-grid-breakpoints.";
+    }
+  }
+}

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

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

data/assets/loom/60-objects/_absolute-cover.scss

@@ -0,0 +1,19 @@
+/// Toggle absolute-cover class generation.
+///
+/// By default uses global setting.
+/// @group 60-objects
+$LOOM-use-object-classes-absolute-cover: $LOOM-use-object-classes !default;
+
+@mixin absolute-cover($distance: 0) {
+  bottom: $distance;
+  left: $distance;
+  position: absolute;
+  right: $distance;
+  top: $distance;
+}
+
+@if $LOOM-use-object-classes-absolute-cover {
+  .o-absolute-cover {
+    @include absolute-cover();
+  }
+}

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

@@ -0,0 +1,93 @@
+/// Toggle button class generation.
+///
+/// By default uses global setting.
+/// @group 60-objects
+$LOOM-use-object-classes-button: $LOOM-use-object-classes !default;
+
+$LOOM-button-background-color: $LOOM-color-light-gray !default;
+$LOOM-button-border-color: transparent !default;
+$LOOM-button-color: $LOOM-color-dark-gray !default;
+$LOOM-button-padding-horizontal: get-spacing(small) !default;
+$LOOM-button-padding-vertical: get-spacing(xsmall) !default;
+$LOOM-button-line-height: normal !default;
+
+@mixin button(
+  $color: $LOOM-button-color,
+  $background-color: $LOOM-button-background-color,
+  $border-color: $LOOM-button-border-color,
+  $border-thickness: $LOOM-border-width,
+  $border-radius: $LOOM-border-radius,
+  $background-color-hover: null,
+  $border-color-hover: null,
+  $color-hover: null,
+  $padding-horizontal: $LOOM-button-padding-horizontal,
+  $padding-vertical: $LOOM-button-padding-vertical,
+  $line-height: normal
+) {
+  background-color: $background-color;
+  border: $border-thickness solid $border-color;
+  border-radius: $border-radius;
+  color: $color;
+  cursor: pointer;
+  display: inline-block;
+  font: inherit;
+  line-height: $line-height;
+  padding: $padding-vertical $padding-horizontal;
+  text-align: center;
+  text-decoration: none;
+  transition: get-transition(color), get-transition(background-color);
+  user-select: none;
+  vertical-align: middle;
+
+  &:visited {
+    color: $color;
+  }
+
+  &:hover,
+  &:focus {
+    // NOTE: Oh, these are horribly ugly. So sorry. I could have made it a ternary operator, but that involved extra variable to store stuff. Look, I'm sorry, okay?
+    @if ($background-color-hover != null) {
+      background-color: $background-color-hover;
+    } @else { // stylelint-disable-line
+      background-color: darken($background-color, 20%);
+    }
+
+    @if ($border-color-hover != null) {
+      border-color: $border-color-hover;
+    } @else { // stylelint-disable-line
+      border-color: darken($border-color, 20%);
+    }
+
+    @if ($color-hover != null) {
+      color: $color-hover;
+    } @else { // stylelint-disable-line
+      color: darken($color, 20%);
+    }
+  }
+}
+
+@mixin button__inner() {
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+}
+
+@if $LOOM-use-object-classes-button {
+  .o-button {
+    @include button();
+  }
+
+  .o-button__label {
+    @include button__inner();
+  }
+
+  // A round button surrounding an SVG icon.
+  .o-button-icon {
+    @include button(
+      $border-radius: $LOOM-border-radius-circle,
+      $padding-horizontal: get-spacing(xsmall),
+      $padding-vertical: get-spacing(xsmall),
+      $line-height: 1
+    );
+  }
+}

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

@@ -0,0 +1,19 @@
+/// Toggle clearfix class generation.
+///
+/// By default uses global setting.
+/// @group 60-objects
+$LOOM-use-object-classes-clearfix: $LOOM-use-object-classes !default;
+
+@mixin clearfix() {
+  &::after {
+    clear: both;
+    content: '';
+    display: block;
+  }
+}
+
+@if $LOOM-use-object-classes {
+  .o-clearfix {
+    @include clearfix();
+  }
+}

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

@@ -0,0 +1,34 @@
+/// Toggle container class generation.
+///
+/// By default uses global setting.
+/// @group 60-objects
+$LOOM-use-object-classes-container: $LOOM-use-object-classes !default;
+
+@mixin container(
+  $max-width: $LOOM-single-column-width,
+  $padding-horizontal: get-spacing(default),
+  $padding-horizontal-large: get-spacing(large),
+  $margin-vertical: get-spacing(default),
+  $breakpoint-switch: medium
+) {
+  display: block;
+  margin-bottom: $margin-vertical;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: $max-width;
+  padding-left: $padding-horizontal;
+  padding-right: $padding-horizontal;
+  transition: get-transition(padding);
+  width: 100%;
+
+  @include mq($from: $breakpoint-switch) {
+    padding-left: $padding-horizontal-large;
+    padding-right: $padding-horizontal-large;
+  }
+}
+
+@if $LOOM-use-object-classes-container {
+  .o-container {
+    @include container();
+  }
+}