loomcss 0.1.0

data/assets/loom/10-global-settings/_typography.scss

@@ -0,0 +1,201 @@
+/// The default global font stack for your site.
+/// Each font stack has a default and a webfont version.
+///
+/// Fonts are called using get-font-family().
+///
+/// @group 10-global-settings
+/// @type map
+/// @example scss - Get fonts example
+///   .class {
+///     font-family: get-font-family(primary);
+///   }
+$LOOM-font-list: (
+  'primary': (
+    'default': sans-serif,
+    'webfont': sans-serif
+  ),
+  'secondary': (
+    'default': serif,
+    'webfont': serif
+  )
+) !default;
+
+/// Use your own font map as the default global font list for use by the get-font-family() function.
+///
+/// @group 10-global-settings
+$LOOM-fonts: $LOOM-font-list !default;
+
+/// The classname name to use to place loaded webfonts behind.
+///
+/// If set to 'false' webfont strategies in Loom will be disabled.
+///
+/// @group 10-global-settings
+/// @type string | boolean
+/// @link https://fontfaceobserver.com/ See examples of how to use with Fontfaceobserver
+$LOOM-fonts-loaded: 'fonts-loaded' !default;
+
+// --- FONT WEIGHTS AND STYLES ---
+// NOTE: These are abstracted so that we may easily switch between keywords and numbers as a project demands.
+
+/// Set the default bold weight value
+///
+/// @group 10-global-settings
+/// @type string
+$LOOM-font-weight-bold: bold !default;
+
+/// Set the default normal weight value
+///
+/// @group 10-global-settings
+/// @type string
+$LOOM-font-weight-normal: normal !default;
+
+/// Set the default italic style value
+///
+/// @group 10-global-settings
+/// @type string
+$LOOM-font-style-italic: italic !default;
+
+/// Set the default normal style value
+///
+/// @group 10-global-settings
+/// @type string
+$LOOM-font-style-normal: normal !default;
+
+/// Set the default line-height.
+///
+/// @group 10-global-settings
+/// @type number
+$LOOM-line-height: 1.5 !default;
+
+/// Defines the font sizes to be used in your site.
+/// Each font size has a smaller-viewport and a larger-viewport version,
+/// as generally fonts need to be slightly large on mobile devices.
+///
+/// There should always ideally be an "default" font that defines the base size
+/// for the site.
+///
+/// Fonts are called using get-font-size().
+///
+/// @group 10-global-settings
+/// @type map
+$LOOM-font-sizes: (
+  'default':   (
+    'smaller-viewport': ('font-size': 18px, 'line-height': 1.5),
+    'larger-viewport': ('font-size': 16px, 'line-height': 1.5)
+  ),
+  'alpha':   (
+    'smaller-viewport': ('font-size': 36px, 'line-height': 1.5),
+    'larger-viewport': ('font-size': 32px, 'line-height': 1.5)
+  ),
+  'beta':   (
+    'smaller-viewport': ('font-size': 30px, 'line-height': 1.5),
+    'larger-viewport': ('font-size': 28px, 'line-height': 1.5)
+  ),
+  'gamma':   (
+    'smaller-viewport': ('font-size': 26px, 'line-height': 1.5),
+    'larger-viewport': ('font-size': 24px, 'line-height': 1.5)
+  ),
+  'delta':   (
+    'smaller-viewport': ('font-size': 22px, 'line-height': 1.5),
+    'larger-viewport': ('font-size': 20px, 'line-height': 1.5)
+  ),
+  'epsilon':   (
+    'smaller-viewport': ('font-size': 20px, 'line-height': 1.5),
+    'larger-viewport': ('font-size': 18px, 'line-height': 1.5)
+  ),
+  'zeta':   (
+    'smaller-viewport': ('font-size': 18px, 'line-height': 1.5),
+    'larger-viewport': ('font-size': 16px, 'line-height': 1.5)
+  )
+) !default;
+
+/// Sizes that are applied to base HTML element headings
+///
+/// @group 10-global-settings
+/// @type map
+$LOOM-h-element-sizes: (
+  'h1': 'alpha',
+  'h2': 'beta',
+  'h3': 'gamma',
+  'h4': 'delta',
+  'h5': 'epsilon',
+  'h6': 'zeta'
+) !default;
+
+/// If set to TRUE, base headings will receive default sizes and will appear
+/// as "traditional" headings. If FALSE, base headings will receive the same
+/// sizing and styling as the body text.
+///
+/// @group 10-global-settings
+/// @type boolean
+$LOOM-generate-sizes-for-default-headings: true !default;
+
+/// If this list is defined, the following sizes will be generated as object
+/// classes (`.o-alpha {}`).
+///
+/// Objects be also consumed directly with '@include font-size($name)';
+///
+/// @group 10-global-settings
+/// @type list
+$LOOM-h-object-sizes: (
+  'alpha',
+  'beta',
+  'gamma',
+  'delta',
+  'epsilon',
+  'zeta'
+) !default;
+
+/// At what breakpoint does the typography switch from fonts sizes appropiate
+/// for smaller devices to font sizes appropiate for larger devices?
+///
+/// Must match one of the breakpoints in $LOOM-mq-breakpoints.
+///
+/// @group 10-global-settings
+/// @type boolean
+/// @see $LOOM-mq-breakpoints
+$LOOM-typography-breakpoint: medium !default;
+
+/// Default value for when primary base fonts are called.
+///
+/// Intended to be overriden by user choices.
+///
+/// @group 10-global-settings
+/// @access private
+$LOOM-font-family-primary-default: sans-serif !default;
+
+/// Default value for when primary web fonts are called.
+///
+/// Intended to be overriden by user choices.
+///
+/// @group 10-global-settings
+/// @access private
+$LOOM-font-family-primary-webfont: sans-serif !default;
+
+/// Default value for when secondary base fonts are called.
+///
+/// Intended to be overriden by user choices.
+///
+/// @group 10-global-settings
+/// @access private
+$LOOM-font-family-seconday-default: serif !default;
+
+/// Default value for when secondary web fonts are called.
+///
+/// Intended to be overriden by user choices.
+///
+/// @group 10-global-settings
+/// @access private
+$LOOM-font-family-seconday-webfont: serif !default;
+
+/// Default base font size, small screen devices.
+///
+/// Intended to be overridden by user choices.
+/// @group 10-global-settings
+$LOOM-font-size-on-smaller-screens: 18px !default;
+
+/// Default font size, large screen devices.
+///
+/// Intended to be overridden by user choices.
+/// @group 10-global-settings
+$LOOM-font-size-on-larger-screens: 16px !default;

data/assets/loom/20-tools/_color.scss

@@ -0,0 +1,22 @@
+/// Extract a color value from a map.
+///
+/// @group 20-tools
+/// @parameter {string} $color-name - The key name for a colour key/value pair.
+/// @parameter {map} $color-list - A map of spacing key/value pairs to use. Defaults to $LOOM-colors-list.
+@function get-color($color-name, $color-list: $LOOM-colors-list) {
+  $color-name: inspect($color-name);  // Force value to a string, as if a key value happens to match a CSS colour value, it will be imported as a Sass colour, not a string, causing an error in map-get().
+
+  @if map-has-key($color-list, $color-name) {
+    $output: map-get($color-list, $color-name);
+
+    @if type-of($output) != color {
+      @error $color-name " could not be found in the global colour list.";
+    }
+
+    @return $output;
+  }
+
+  @else {
+    @return null;
+  }
+}

data/assets/loom/20-tools/_grid-columns.scss

@@ -0,0 +1,23 @@
+/// Generate grid columns. The column widths will be calculated automatically.
+///
+/// @group 20-tools
+/// @parameter {number} $columns - The number of columns to generate.
+/// @parameter {string} $breakpoint - If defined, each column will have this breakpoint name appended at the end.
+@mixin grid-columns($columns, $breakpoint: null) {
+  @each $column-item in $columns {
+    @if ($columns == 1) {
+      .l-col-1-of-1#{$breakpoint} {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+      }
+    } @else { // stylelint-disable-line
+      @for $i from 1 to ($column-item + 1) {
+        .l-col-#{$i}-of-#{$column-item}#{$breakpoint} {
+          flex-basis: ($i / $column-item) * 100%;
+          max-width: ($i / $column-item) * 100%;
+        }
+      }
+    }
+  }
+}

data/assets/loom/20-tools/_icons.scss

@@ -0,0 +1,16 @@
+/// Get an icon size from a name.
+///
+/// @group 20-tools
+/// @parameter {string} $icon-name - An icon size name, corresponding to a key in $icon-size-map
+/// @parameter {map} $icon-size-map - A map of icon names to sizes.
+@function get-icon-size($icon-name: default, $icon-size-map: $LOOM-icon-sizes) {
+  @if map-has-key($icon-size-map, $icon-name) {
+    @return map-get($icon-size-map, $icon-name);
+  }
+
+  @else {
+    @warn "#{$icon-name} not found in get-icon-size";
+
+    @return null;
+  }
+}

data/assets/loom/20-tools/_misc.scss

@@ -0,0 +1,12 @@
+/// Get a value from a nested sass map.
+///
+/// @group 20-tools
+/// @parameter {map} $map - A multi-level Sass map.
+/// @parameter {arglist} $keys - A list of keys, representing a traversel of the nested Sass map.
+@function get-map-deep($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+
+  @return $map;
+}

data/assets/loom/20-tools/_mq.scss

@@ -0,0 +1,126 @@
+// Lovingly repurposed from https://github.com/sass-mq/sass-mq
+
+@charset "UTF-8";
+// Fixes an issue where Ruby locale is not set properly
+// See https://github.com/sass-mq/sass-mq/pull/10
+
+/// Get a breakpoint's width
+///
+/// @param {String} $name - Name of the breakpoint. One of $LOOM-mq-breakpoints
+///
+/// @example scss
+///  $tablet-width: get-breakpoint(tablet);
+///  @media (min-width: get-breakpoint(desktop)) {}
+///
+/// @requires {Variable} $LOOM-mq-breakpoints
+/// @group 20-tools
+/// @returns {Number} Value in pixels
+@function get-breakpoint($name, $breakpoints: $LOOM-mq-breakpoints) {
+  @if map-has-key($breakpoints, $name) {
+    @return map-get($breakpoints, $name);
+  } @else { // stylelint-disable-line
+    @warn "Breakpoint #{$name} wasn't found in $breakpoints.";
+  }
+}
+
+/// Media Query mixin
+///
+/// Lovingly repurposed from https://github.com/sass-mq/sass-mq
+///
+/// @parameter {String | Boolean} $from (false) - One of $LOOM-mq-breakpoints
+/// @parameter {String | Boolean} $until (false) - One of $LOOM-mq-breakpoints
+/// @parameter {String | Boolean} $and (false) - Additional media query parameters
+/// @parameter {String} $media-type ($LOOM-mq-media-type) - Media type: screen, print…
+///
+/// @ignore Undocumented API, for advanced use only:
+/// @ignore @param {Map} $breakpoints ($LOOM-mq-breakpoints)
+///
+///
+/// @requires {Variable} $LOOM-mq-media-type
+/// @requires {Variable} $LOOM-mq-breakpoints
+/// @requires {function} convert-px-to-em
+/// @requires {function} get-breakpoint
+///
+/// @example scss
+///  .element {
+///    @include mq($from: mobile) {
+///      color: red;
+///    }
+///    @include mq($until: tablet) {
+///      color: blue;
+///    }
+///    @include mq(mobile, tablet) {
+///      color: green;
+///    }
+///    @include mq($from: tablet, $and: '(orientation: landscape)') {
+///      color: teal;
+///    }
+///    @include mq(950px) {
+///      color: hotpink;
+///    }
+///    @include mq(tablet, $media-type: screen) {
+///      color: hotpink;
+///    }
+///  }
+/// @group 20-tools
+@mixin mq(
+  $from: false,
+  $until: false,
+  $and: false,
+  $media-type: $LOOM-mq-media-type,
+  $breakpoints: $LOOM-mq-breakpoints
+) {
+  $min-width: 0;
+  $max-width: 0;
+  $media-query: '';
+
+  // From: this breakpoint (inclusive)
+  @if $from {
+    @if type-of($from) == number {
+      $min-width: convert-px-to-em($from);
+    } @else { // stylelint-disable-line
+      $min-width: convert-px-to-em(get-breakpoint($from, $breakpoints));
+    }
+  }
+
+  // Until: that breakpoint (exclusive)
+  @if $until {
+    @if type-of($until) == number {
+      $max-width: convert-px-to-em($until);
+    } @else { // stylelint-disable-line
+      $max-width: convert-px-to-em(get-breakpoint($until, $breakpoints)) - 0.01em;
+    }
+  }
+
+  @if $min-width != 0 { $media-query: '#{$media-query} and (min-width: #{$min-width})'; }
+
+  @if $max-width != 0 { $media-query: '#{$media-query} and (max-width: #{$max-width})'; }
+
+  @if $and { $media-query: '#{$media-query} and #{$and}'; }
+
+  // Remove unnecessary media query prefix 'all and '
+  @if ($media-type == 'all' and $media-query != '') {
+    $media-type: '';
+    $media-query: str-slice(unquote($media-query), 6);
+  }
+
+  @media #{$media-type + $media-query} {
+    @content;
+  }
+}
+
+/// Add a breakpoint
+///
+/// @param {String} $name - Name of the breakpoint
+/// @param {Number} $width - Width of the breakpoint
+///
+/// @requires {Variable} $LOOM-mq-breakpoints
+///
+/// @example scss
+///  @include add-breakpoint(tvscreen, 1920px);
+///  @include mq(tvscreen) {}
+/// @group 20-tools
+@mixin add-breakpoint($name, $width) {
+  $new-breakpoint: ($name: $width);
+  $LOOM-mq-breakpoints: map-merge($LOOM-mq-breakpoints, $new-breakpoint) !global;
+}

data/assets/loom/20-tools/_spacing.scss

@@ -0,0 +1,14 @@
+/// Retrieve a spacing value.
+///
+/// @group 20-tools
+/// @parameter {string} $spacing-name - The key for a spacing pair. Defaults to "default".
+/// @parameter {map} $spacing-list - A map of spacing key/value pairs to use. Defaults to $LOOM-spacing.
+@function get-spacing($spacing-name: default, $spacing-list: $LOOM-spacing) {
+  @if map-has-key($spacing-list, $spacing-name) {
+    @return map-get($LOOM-spacing, $spacing-name);
+  }
+
+  @else {
+    @return null;
+  }
+}

data/assets/loom/20-tools/_transition.scss

@@ -0,0 +1,10 @@
+/// Retrieve a CSS transition
+///
+/// @group 20-tools
+/// @parameter {string} $transition-property-name - Which property to animate. Defaults to "all".
+/// @parameter {time} $transition-duration - How long should the animation take.
+/// @parameter {string} $transition-timing-function - What timing/easing function should be used.
+/// @parameter {time} $transition-delay - What delay is at the start of the transition.
+@function get-transition($transition-property-name: all, $transition-duration: $LOOM-transition-duration, $transition-timing-function: $LOOM-transition-timing-function, $transition-delay: 0s) {
+  @return $transition-property-name $transition-duration $transition-timing-function $transition-delay;
+}

data/assets/loom/20-tools/_type-checking.scss

@@ -0,0 +1,52 @@
+////
+/// A collection of function for advanced type checking
+/// @author Hugo Giraudel
+////
+
+@function is-number($value) {
+  @return type-of($value) == 'number';
+}
+
+@function is-time($value) {
+  @return is-number($value) and index('ms' 's', unit($value)) != null;
+}
+
+@function is-duration($value) {
+  @return is-time($value);
+}
+
+@function is-angle($value) {
+  @return is-number($value) and index('deg' 'rad' 'grad' 'turn', unit($value)) != null;
+}
+
+@function is-frequency($value) {
+  @return is-number($value) and index('Hz' 'kHz', unit($value)) != null;
+}
+
+@function is-integer($value) {
+  @return is-number($value) and round($value) == $value;
+}
+
+@function is-relative-length($value) {
+  @return is-number($value) and index('em' 'ex' 'ch' 'rem' 'vw' 'vh' 'vmin' 'vmax', unit($value)) != null;
+}
+
+@function is-absolute-length($value) {
+  @return is-number($value) and index('cm' 'mm' 'in' 'px' 'pt' 'pc', unit($value)) != null;
+}
+
+@function is-percentage($value) {
+  @return is-number($value) and unit($value) == '%';
+}
+
+@function is-length($value) {
+  @return is-relative-length($value) or is-absolute-length($value);
+}
+
+@function is-resolution($value) {
+  @return is-number($value) and index('dpi' 'dpcm' 'dppx', unit($value)) != null;
+}
+
+@function is-position($value) {
+  @return is-length($value) or is-percentage($value) or index('top' 'right' 'bottom' 'left' 'center', $value) != null;
+}