loomcss 0.1.0

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

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

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

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

data/assets/loom/80-utilities/_text-align.scss

@@ -0,0 +1,19 @@
+/// Toggle text-align class generation.
+///
+/// By default uses global setting.
+/// @group 80-utilities
+$LOOM-use-utility-classes-text-align: $LOOM-use-utility-classes !default;
+
+@if $LOOM-use-utility-classes-text-align {
+  .u-text-align-left {
+    text-align: left;
+  }
+
+  .u-text-align-right {
+    text-align: right;
+  }
+
+  .u-text-align-center {
+    text-align: center;
+  }
+}

data/assets/loom/80-utilities/_text-transform.scss

@@ -0,0 +1,19 @@
+/// Toggle text-transform class generation.
+///
+/// By default uses global setting.
+/// @group 80-utilities
+$LOOM-use-utility-classes-text-transform: $LOOM-use-utility-classes !default;
+
+@if $LOOM-use-utility-classes-text-transform {
+  .u-text-transform-uppercase {
+    text-transform: uppercase;
+  }
+
+  .u-text-transform-lowercase {
+    text-transform: lowercase;
+  }
+
+  .u-text-transform-capitalize {
+    text-transform: capitalize;
+  }
+}

data/assets/loom/80-utilities/_vertical-align.scss

@@ -0,0 +1,26 @@
+/// Toggle vertical-align class generation.
+///
+/// By default uses global setting.
+/// @group 80-utilities
+$LOOM-use-utility-classes-vertical-align: $LOOM-use-utility-classes !default;
+
+/// List of possible vertical-align values
+/// @group 80-utilities
+$LOOM-vertical-align: (
+  baseline,
+  sub,
+  super,
+  text-top,
+  text-bottom,
+  middle,
+  top,
+  bottom,
+);
+
+@if $LOOM-use-utility-classes-vertical-align {
+  @each $item in $LOOM-vertical-align {
+    .u-vertical-align-#{$item} {
+      vertical-align: $item;
+    }
+  }
+}

data/assets/loom/80-utilities/_white-space.scss

@@ -0,0 +1,27 @@
+/// Toggle white-space class generation.
+///
+/// By default uses global setting.
+/// @group 80-utilities
+$LOOM-use-utility-classes-white-space: $LOOM-use-utility-classes !default;
+
+@if $LOOM-use-utility-classes-white-space {
+  .u-white-space-normal {
+    white-space: normal;
+  }
+
+  .u-white-space-nowrap {
+    white-space: nowrap;
+  }
+
+  .u-white-space-pre {
+    white-space: pre;
+  }
+
+  .u-white-space-pre-wrap {
+    white-space: pre-wrap;
+  }
+
+  .u-white-space-pre-line {
+    white-space: pre-line;
+  }
+}

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

@@ -0,0 +1,11 @@
+/// Toggle width class generation.
+///
+/// By default uses global setting.
+/// @group 80-utilities
+$LOOM-use-utility-classes-width: $LOOM-use-utility-classes !default;
+
+@if $LOOM-use-utility-classes-width {
+  .u-width-full {
+    width: 100%;
+  }
+}

data/assets/loom/_10-global-settings.scss

@@ -0,0 +1,7 @@
+@import '10-global-settings/box-sizing';
+@import '10-global-settings/breakpoints';
+@import '10-global-settings/color';
+@import '10-global-settings/icons';
+@import '10-global-settings/misc';
+@import '10-global-settings/spacing';
+@import '10-global-settings/typography';

data/assets/loom/_20-tools.scss

@@ -0,0 +1,10 @@
+@import '20-tools/color';
+@import '20-tools/grid-columns';
+@import '20-tools/icons';
+@import '20-tools/misc';
+@import '20-tools/mq';
+@import '20-tools/spacing';
+@import '20-tools/transition';
+@import '20-tools/type-checking';
+@import '20-tools/typography';
+@import '20-tools/z-index';

data/assets/loom/_30-generic.scss

@@ -0,0 +1,2 @@
+@import '30-generic/box-sizing';
+@import '30-generic/normalize';

data/assets/loom/_40-base-elements.scss

@@ -0,0 +1,3 @@
+@import '40-base-elements/form-items';
+@import '40-base-elements/images';
+@import '40-base-elements/typography';

data/assets/loom/_50-layout.scss

@@ -0,0 +1 @@
+@import '50-layout/grid';

data/assets/loom/_60-objects.scss

@@ -0,0 +1,13 @@
+@import '60-objects/headings';
+@import '60-objects/list-reset';
+@import '60-objects/icon';
+@import '60-objects/button';
+@import '60-objects/absolute-center';
+@import '60-objects/absolute-cover';
+@import '60-objects/clearfix';
+@import '60-objects/fixed-ratio';
+@import '60-objects/vertical-center';
+@import '60-objects/media';
+@import '60-objects/hide-visually';
+@import '60-objects/container';
+@import '60-objects/list-inline';

data/assets/loom/_80-utilities.scss

@@ -0,0 +1,17 @@
+@import '80-utilities/background-color';
+@import '80-utilities/border';
+@import '80-utilities/color';
+@import '80-utilities/display';
+@import '80-utilities/font-family';
+@import '80-utilities/font-size';
+@import '80-utilities/font-style';
+@import '80-utilities/font-weight';
+@import '80-utilities/line-height';
+@import '80-utilities/margin';
+@import '80-utilities/padding';
+@import '80-utilities/position';
+@import '80-utilities/text-align';
+@import '80-utilities/text-transform';
+@import '80-utilities/vertical-align';
+@import '80-utilities/white-space';
+@import '80-utilities/width';

data/assets/main-shorthand.scss

@@ -0,0 +1,44 @@
+/*
+IMPORTANT - PLEASE READ
+This method of importing Loom is a bit quicker, and looks nicer in your
+application. It also retains all the power of the full import, as long as you
+disable/enable modules via Sass variables, and only import your own modules
+underneath existing Loom modules.
+*/
+
+// SETTINGS
+// ----->  ADD YOUR OWN MODULES HERE! :D
+@import 'loom/10-global-settings';
+// Don't add settings here! Settings need to be imported BEFORE the Loom modules!
+
+// TOOLS
+@import 'loom/20-tools';
+// ----->  ADD YOUR OWN MODULES HERE! :D
+
+// GENERIC
+@import 'loom/30-generic';
+// ----->  ADD YOUR OWN MODULES HERE! :D
+
+// BASE ELEMENTS
+@import 'loom/40-base-elements';
+// ----->  ADD YOUR OWN MODULES HERE! :D
+
+// LAYOUT
+@import 'loom/50-layout';
+// ----->  ADD YOUR OWN MODULES HERE! :D
+
+// OBJECTS
+@import 'loom/60-objects';
+// ----->  ADD YOUR OWN MODULES HERE! :D
+
+// UI COMPONENTS
+@import 'loom/70-ui-components';
+// ----->  ADD YOUR OWN MODULES HERE! :D
+
+// UTILITIES
+@import 'loom/80-utilities';
+// ----->  ADD YOUR OWN MODULES HERE! :D
+
+// TRUMPS
+@import 'loom/90-trumps';
+// ----->  ADD YOUR OWN MODULES HERE! :D

data/assets/main.scss

@@ -0,0 +1,108 @@
+// SETTINGS
+// All global settings. Nothing visual.
+// ----->  ADD YOUR OWN SETTINGS HERE! :D
+@import 'loom/10-global-settings/misc';
+@import 'loom/10-global-settings/typography';
+@import 'loom/10-global-settings/color';
+@import 'loom/10-global-settings/breakpoints';
+@import 'loom/10-global-settings/spacing';
+@import 'loom/10-global-settings/box-sizing';
+@import 'loom/10-global-settings/icons';
+// NOOOO! DON'T ADD YOUR OWN SETTINGS AT THE END! :( SEE THE TEXT ABOVE!
+// Why is this is different from every other layer? Because Sass is special,
+// and allows overrides to be set before the variables they override are
+// actually defined.
+
+// TOOLS
+// Mixins and functions. Nothing visual.
+@import 'loom/20-tools/misc';
+@import 'loom/20-tools/type-checking';
+@import 'loom/20-tools/typography';
+@import 'loom/20-tools/mq';
+@import 'loom/20-tools/spacing';
+@import 'loom/20-tools/color';
+@import 'loom/20-tools/transition';
+@import 'loom/20-tools/z-index';
+@import 'loom/20-tools/grid-columns';
+@import 'loom/20-tools/icons';
+// -----> ADD YOUR OWN TOOLS HERE! :D
+
+// GENERIC
+// Far reaching, global styles. Normalize, resets.
+@import 'loom/30-generic/box-sizing';
+@import 'loom/30-generic/normalize';
+// -----> ADD YOUR OWN GENERIC STYLES HERE! :D
+
+// BASE ELEMENTS
+// Unclassed elements. Basic spacing and sizing for raw HTML elements.
+// p {}
+@import 'loom/40-base-elements/images';
+@import 'loom/40-base-elements/typography';
+@import 'loom/40-base-elements/form-items';
+// -----> ADD YOUR OWN BASE ELEMENTS HERE! :D
+
+// LAYOUT
+// Grid systems and flex.
+// Should probably be used seperately from components (and objects/utilities, if they're being used for scaffolding). Ideally should be used as part of a wrapper element, as spacing and margins can conflict between layout and objects.
+// You can use all of these with your own classnames, as everything is available as a mixin.
+// .l-layout {}
+@import 'loom/50-layout/grid';
+// -----> ADD YOUR OWN LAYOUT ENGINES HERE! :D
+
+// OBJECTS
+// SRP objects. Common code patterns. They do useful things that are repeated over and over.
+// Each object has a mixin so that these can be applied directly to a component, and they have an optional class, so that they can be used for scaffolding.
+// .o-object {}
+@import 'loom/60-objects/headings';
+@import 'loom/60-objects/list-reset';
+@import 'loom/60-objects/icon';
+@import 'loom/60-objects/button';
+@import 'loom/60-objects/absolute-center';
+@import 'loom/60-objects/absolute-cover';
+@import 'loom/60-objects/clearfix';
+@import 'loom/60-objects/fixed-ratio';
+@import 'loom/60-objects/vertical-center';
+@import 'loom/60-objects/media';
+@import 'loom/60-objects/hide-visually';
+@import 'loom/60-objects/container';
+@import 'loom/60-objects/list-inline';
+// -----> ADD YOUR OWN OBJECTS HERE! :D
+
+// UI COMPONENTS
+// Styled visual components. $LOOM doesn't try to provide these. These will be specific to your project.
+// Build components with help from @included objects and $LOOM predefined variables.
+// .c-component {}
+@import 'loom/70-ui-components/example';
+// -----> ADD YOUR OWN UI COMPONENTS HERE! :D
+
+// UTILITIES
+// If a component does not handle it's own spacing, font-styling, sizing, then they can use these utility classes.
+// They only represent a single CSS rule. Useful for quickly scaffolding interfaces by adding classes to HTML. However, only a temporary solution as readibility is compromised - should probably be merged into a UI-component.
+// However, if you're into atomic CSS, you can use and extend the utilities here.
+// Rule of thumb: if the ruleset consists of a single line, it probably belongs in here. Multiple lines are generally objects.
+// .u-utility {}
+@import 'loom/80-utilities/background-color';
+@import 'loom/80-utilities/border';
+@import 'loom/80-utilities/color';
+@import 'loom/80-utilities/display';
+@import 'loom/80-utilities/font-family';
+@import 'loom/80-utilities/font-size';
+@import 'loom/80-utilities/font-style';
+@import 'loom/80-utilities/font-weight';
+@import 'loom/80-utilities/line-height';
+@import 'loom/80-utilities/margin';
+@import 'loom/80-utilities/padding';
+@import 'loom/80-utilities/position';
+@import 'loom/80-utilities/text-align';
+@import 'loom/80-utilities/text-transform';
+@import 'loom/80-utilities/vertical-align';
+@import 'loom/80-utilities/white-space';
+@import 'loom/80-utilities/width';
+// -----> ADD YOUR OWN UTILITIES HERE! :D
+
+// TRUMPS
+// Real ultimate overrides. Real nasty stuff. The plutonium of selectors.
+// Ideally, nothing should live here. (Sadly this is an imperfect world).
+// .t-trump {}
+// @import 'loom/90-trumps';
+// -----> ADD YOUR OWN TRUMPS HERE! :D

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "loomcss"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/gulpfile.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+var sassdoc = require('sassdoc');
+
+gulp.task('sass', function () {
+  return gulp.src('./assets/main.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(gulp.dest('./'));
+});
+
+gulp.task('sassdoc', function () {
+  return gulp.src('./assets/loom/**/*.scss')
+    .pipe(sassdoc({
+      dest: 'public/docs'
+    }));
+});
+
+gulp.task('watch', function() {
+  gulp.watch('./assets/loom/**/*.scss', ['sass', 'sassdoc']);
+});
+
+gulp.task('default', ['watch']);

data/index.html

@@ -0,0 +1,97 @@
+<!doctype html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Test library</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="main.css">
+  </head>
+  <body>
+
+    <header class="o-container">
+      <h1>Loom's internal patterns</h1>
+      <p>Here are examples of all the bare HTML touched by the `40-base-elements` layer and examples of the Object classes that ship by default.</p>
+    </header>
+
+    <article class="o-container">
+      <h1>Headings</h1>
+      <p>Headings receive some light styling by default, but their styling can be removed comletely by flipping the <code class="u-display-inline">$LOOM-generate-sizes-for-base-headings</code> variable. </p>
+      <p>This is useful if you want to add styling manually and retain HTML headings for their semantic value.</p>
+
+
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+
+      <p>Vidit assum prompta mel ex. <a href="http://google.com">Nec lorem volumus detraxit te</a>. Movet dolor quaerendum id eam, no quo ocurreret vulputate. Te quo facer graeci, at est mediocrem evertitur constituam, tempor impedit officiis mei in.</p>
+
+      <p>Dicit similique expetendis mea in, ei mel eleifend dissentiet, epicuri assueverit vim an. Viris maiorum postulant cu sit, mel cu habeo recusabo. Ius liber quaestio at, nam eu stet placerat oporteat. Eos eu dissentias contentiones, nemore feugiat eu qui. Harum dolore vim at, vulputate consectetuer sit et. Eum case eripuit interesset et, eam ad justo expetenda, usu enim quas dissentiet at.</p>
+
+      <p>Vel an solum debet, vis inani percipit ex, cum adhuc possit repudiare ei. Quis mazim mel cu, ei blandit phaedrum duo, accumsan suavitate urbanitas ex nam. Lobortis eleifend ad eum, his oratio nostrud sadipscing ei. Prima eligendi id eos, vel mandamus assueverit ex, duo hinc sensibus ex.</p>
+
+      <button class="o-button">
+        <svg class="o-icon" width="472" height="472" viewBox="0 0 472 472" xmlns="http://www.w3.org/2000/svg"><title>heart</title><path d="M433.601 67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7 13.6-92.4 38.3l-12.9 12.9-13.1-13.1c-24.7-24.7-57.6-38.4-92.5-38.4-34.8 0-67.6 13.6-92.2 38.2-24.7 24.7-38.3 57.5-38.2 92.4 0 34.9 13.7 67.6 38.4 92.3l187.8 187.8c2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-3.9l188.2-187.5c24.7-24.7 38.3-57.5 38.3-92.4.1-34.9-13.4-67.7-38.1-92.4zm-19.2 165.7l-178.7 178-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3 0-27.7 10.7-53.7 30.3-73.2 19.5-19.5 45.5-30.3 73.1-30.3 27.7 0 53.8 10.8 73.4 30.4l22.6 22.6c5.3 5.3 13.8 5.3 19.1 0l22.4-22.4c19.6-19.6 45.7-30.4 73.3-30.4 27.6 0 53.6 10.8 73.2 30.3 19.6 19.6 30.3 45.6 30.3 73.3.1 27.7-10.7 53.7-30.3 73.3z" fill-rule="evenodd"/></svg>
+        <span class="o-button__label">Hello world!</span>
+      </button>
+      <button class="o-button-icon">
+        <svg class="o-icon" width="472" height="472" viewBox="0 0 472 472" xmlns="http://www.w3.org/2000/svg"><title>heart</title><path d="M433.601 67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7 13.6-92.4 38.3l-12.9 12.9-13.1-13.1c-24.7-24.7-57.6-38.4-92.5-38.4-34.8 0-67.6 13.6-92.2 38.2-24.7 24.7-38.3 57.5-38.2 92.4 0 34.9 13.7 67.6 38.4 92.3l187.8 187.8c2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-3.9l188.2-187.5c24.7-24.7 38.3-57.5 38.3-92.4.1-34.9-13.4-67.7-38.1-92.4zm-19.2 165.7l-178.7 178-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3 0-27.7 10.7-53.7 30.3-73.2 19.5-19.5 45.5-30.3 73.1-30.3 27.7 0 53.8 10.8 73.4 30.4l22.6 22.6c5.3 5.3 13.8 5.3 19.1 0l22.4-22.4c19.6-19.6 45.7-30.4 73.3-30.4 27.6 0 53.6 10.8 73.2 30.3 19.6 19.6 30.3 45.6 30.3 73.3.1 27.7-10.7 53.7-30.3 73.3z" fill-rule="evenodd"/></svg>
+      </button>
+      <button class="o-button">Another button</button>
+
+      <h1 class="o-h1">Heading 1</h1>
+      <p>Lorem ipsum dolor sit amet, sea purto epicuri at. Recusabo voluptaria at vim, magna prompta ne pro. Duis quaestio eu nec. Cum tacimates perpetua no, solet viderer duo ut.</p>
+    </article>
+
+    <article class="o-container">
+      <h1 class="o-h1">Form items</h1>
+      <form>
+        <div>
+          <label for="inputA">Email</label>
+          <input type="text" id="inputA" placeholder="test@example.com">
+        </div>
+
+        <div>
+          <input type="checkbox" id="cbox2" value="second_checkbox"> <label for="cbox2">This is the second checkbox</label>
+        </div>
+
+        <div>
+          <label for="inputB">Select</label>
+          <select name="select" id="inputB">
+            <option value="value1">Value 1</option>
+            <option value="value2" selected>Value 2</option>
+            <option value="value3">Value 3</option>
+          </select>
+        </div>
+      </form>
+    </article>
+
+
+    <article class="o-container">
+      <h1 class="o-h1">Grid system</h1>
+      <div class="l-grid">
+        <div class="l-grid__item l-col-12-of-12">
+          12-of-12
+        </div>
+        <div class="l-grid__item l-col-6-of-12">
+          6-of-12
+        </div>
+        <div class="l-grid__item l-col-6-of-12">
+          6-of-12
+        </div>
+      </div>
+    </article>
+
+    <footer class="o-container">
+      <p>Copyright, trademark, lawyers etc.</p>
+    </footer>
+
+    <script src="js/main.js"></script>
+  </body>
+</html>