suitcss-rails 1.0.0

data/app/assets/stylesheets/suitcss/utils/size/md.css

@@ -0,0 +1,176 @@
+/**
+ * @define utilities
+ * Size: breakpoint 2 (medium)
+ */
+
+@media (--md-viewport) {
+
+    /* Proportional widths: breakpoint 2 (medium)
+       ======================================================================== */
+
+    /**
+     * Specify the proportional width of an object.
+     * Intentional redundancy build into each set of unit classes.
+     * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
+     *
+     * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
+     *    http://git.io/vllMD
+     */
+
+    /* postcss-bem-linter: ignore */
+
+    [class*="u-md-size"] {
+        flex-basis: auto !important; /* 1 */
+    }
+
+    .u-md-size1of12 {
+        width: calc(100% * 1 / 12) !important;
+    }
+
+    .u-md-size1of10 {
+        width: 10% !important;
+    }
+
+    .u-md-size1of8 {
+        width: 12.5% !important;
+    }
+
+    .u-md-size1of6,
+    .u-md-size2of12 {
+        width: calc(100% * 1 / 6) !important;
+    }
+
+    .u-md-size1of5,
+    .u-md-size2of10 {
+        width: 20% !important;
+    }
+
+    .u-md-size1of4,
+    .u-md-size2of8,
+    .u-md-size3of12 {
+        width: 25% !important;
+    }
+
+    .u-md-size3of10 {
+        width: 30% !important;
+    }
+
+    .u-md-size1of3,
+    .u-md-size2of6,
+    .u-md-size4of12 {
+        width: calc(100% * 1 / 3) !important;
+    }
+
+    .u-md-size3of8 {
+        width: 37.5% !important;
+    }
+
+    .u-md-size2of5,
+    .u-md-size4of10 {
+        width: 40% !important;
+    }
+
+    .u-md-size5of12 {
+        width: calc(100% * 5 / 12) !important;
+    }
+
+    .u-md-size1of2,
+    .u-md-size2of4,
+    .u-md-size3of6,
+    .u-md-size4of8,
+    .u-md-size5of10,
+    .u-md-size6of12 {
+        width: 50% !important;
+    }
+
+    .u-md-size7of12 {
+        width: calc(100% * 7 / 12) !important;
+    }
+
+    .u-md-size3of5,
+    .u-md-size6of10 {
+        width: 60% !important;
+    }
+
+    .u-md-size5of8 {
+        width: 62.5% !important;
+    }
+
+    .u-md-size2of3,
+    .u-md-size4of6,
+    .u-md-size8of12 {
+        width: calc(100% * 2 / 3) !important;
+    }
+
+    .u-md-size7of10 {
+        width: 70% !important;
+    }
+
+    .u-md-size3of4,
+    .u-md-size6of8,
+    .u-md-size9of12 {
+        width: 75% !important;
+    }
+
+    .u-md-size4of5,
+    .u-md-size8of10 {
+        width: 80% !important;
+    }
+
+    .u-md-size5of6,
+    .u-md-size10of12 {
+        width: calc(100% * 5 / 6) !important;
+    }
+
+    .u-md-size7of8 {
+        width: 87.5% !important;
+    }
+
+    .u-md-size9of10 {
+        width: 90% !important;
+    }
+
+    .u-md-size11of12 {
+        width: calc(100% * 11 / 12) !important;
+    }
+
+    /* Intrinsic widths
+       ======================================================================== */
+
+    /**
+     * Make an element fill the remaining space.
+     *
+     * 1. Be explicit to work around IE10 bug with shorthand flex
+     *    http://git.io/vllC7
+     * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes
+     *    http://git.io/vllMt
+     */
+
+    .u-md-sizeFill {
+        flex: 1 1 0% !important; /* 1 */
+        flex-basis: 0% !important; /* 2 */
+    }
+
+    /**
+     * An alternative method to make an element fill the remaining space.
+     * Distributes space based on the initial width and height of the element
+     *
+     * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
+     */
+
+    .u-md-sizeFillAlt {
+        flex: 1 1 auto !important;
+        flex-basis: auto !important;
+    }
+
+    /**
+     * Make an element the width of its parent.
+     */
+
+    .u-md-sizeFull {
+        box-sizing: border-box !important;
+        display: block !important;
+        width: 100% !important;
+    }
+
+}

data/app/assets/stylesheets/suitcss/utils/size/sm.css

@@ -0,0 +1,176 @@
+/**
+ * @define utilities
+ * Size: breakpoint 1 (small)
+ */
+
+@media (--sm-viewport) {
+
+    /* Proportional widths: breakpoint 1 (small)
+       ======================================================================== */
+
+    /**
+     * Specify the proportional width of an object.
+     * Intentional redundancy build into each set of unit classes.
+     * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
+     *
+     * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
+     *    http://git.io/vllMD
+     */
+
+    /* postcss-bem-linter: ignore */
+
+    [class*="u-sm-size"] {
+        flex-basis: auto !important; /* 1 */
+    }
+
+    .u-sm-size1of12 {
+        width: calc(100% * 1 / 12) !important;
+    }
+
+    .u-sm-size1of10 {
+        width: 10% !important;
+    }
+
+    .u-sm-size1of8 {
+        width: 12.5% !important;
+    }
+
+    .u-sm-size1of6,
+    .u-sm-size2of12 {
+        width: calc(100% * 1 / 6) !important;
+    }
+
+    .u-sm-size1of5,
+    .u-sm-size2of10 {
+        width: 20% !important;
+    }
+
+    .u-sm-size1of4,
+    .u-sm-size2of8,
+    .u-sm-size3of12 {
+        width: 25% !important;
+    }
+
+    .u-sm-size3of10 {
+        width: 30% !important;
+    }
+
+    .u-sm-size1of3,
+    .u-sm-size2of6,
+    .u-sm-size4of12 {
+        width: calc(100% * 1 / 3) !important;
+    }
+
+    .u-sm-size3of8 {
+        width: 37.5% !important;
+    }
+
+    .u-sm-size2of5,
+    .u-sm-size4of10 {
+        width: 40% !important;
+    }
+
+    .u-sm-size5of12 {
+        width: calc(100% * 5 / 12) !important;
+    }
+
+    .u-sm-size1of2,
+    .u-sm-size2of4,
+    .u-sm-size3of6,
+    .u-sm-size4of8,
+    .u-sm-size5of10,
+    .u-sm-size6of12 {
+        width: 50% !important;
+    }
+
+    .u-sm-size7of12 {
+        width: calc(100% * 7 / 12) !important;
+    }
+
+    .u-sm-size3of5,
+    .u-sm-size6of10 {
+        width: 60% !important;
+    }
+
+    .u-sm-size5of8 {
+        width: 62.5% !important;
+    }
+
+    .u-sm-size2of3,
+    .u-sm-size4of6,
+    .u-sm-size8of12 {
+        width: calc(100% * 2 / 3) !important;
+    }
+
+    .u-sm-size7of10 {
+        width: 70% !important;
+    }
+
+    .u-sm-size3of4,
+    .u-sm-size6of8,
+    .u-sm-size9of12 {
+        width: 75% !important;
+    }
+
+    .u-sm-size4of5,
+    .u-sm-size8of10 {
+        width: 80% !important;
+    }
+
+    .u-sm-size5of6,
+    .u-sm-size10of12 {
+        width: calc(100% * 5 / 6) !important;
+    }
+
+    .u-sm-size7of8 {
+        width: 87.5% !important;
+    }
+
+    .u-sm-size9of10 {
+        width: 90% !important;
+    }
+
+    .u-sm-size11of12 {
+        width: calc(100% * 11 / 12) !important;
+    }
+
+    /* Intrinsic widths
+       ======================================================================== */
+
+    /**
+     * Make an element fill the remaining space.
+     *
+     * 1. Be explicit to work around IE10 bug with shorthand flex
+     *    http://git.io/vllC7
+     * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes
+     *    http://git.io/vllMt
+     */
+
+    .u-sm-sizeFill {
+        flex: 1 1 0% !important; /* 1 */
+        flex-basis: 0% !important; /* 2 */
+    }
+
+    /**
+     * An alternative method to make an element fill the remaining space.
+     * Distributes space based on the initial width and height of the element
+     *
+     * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
+     */
+
+    .u-sm-sizeFillAlt {
+        flex: 1 1 auto !important;
+        flex-basis: auto !important;
+    }
+
+    /**
+     * Make an element the width of its parent.
+     */
+
+    .u-sm-sizeFull {
+        box-sizing: border-box !important;
+        display: block !important;
+        width: 100% !important;
+    }
+
+}

data/app/assets/stylesheets/suitcss/utils/text.css

@@ -0,0 +1,76 @@
+/**
+ * Word breaking
+ *
+ * Break strings when their length exceeds the width of their container.
+ */
+
+.u-textBreak {
+    word-wrap: break-word !important;
+}
+
+/**
+ * Horizontal text alignment
+ */
+
+.u-textCenter {
+    text-align: center !important;
+}
+
+.u-textLeft {
+    text-align: left !important;
+}
+
+.u-textRight {
+    text-align: right !important;
+}
+
+/**
+ * Inherit the ancestor's text color.
+ */
+
+.u-textInheritColor {
+    color: inherit !important;
+}
+
+/**
+ * Enables font kerning in all browsers.
+ * http://blog.typekit.com/2014/02/05/kerning-on-the-web/
+ *
+ * 1. Chrome (not Windows), Firefox, IE 10+
+ * 2. Safari 7 and future browsers
+ * 3. Chrome (not Windows), Firefox, Safari 6+, iOS, Android
+ */
+
+.u-textKern {
+    font-feature-settings: "kern" 1; /* 1 */
+    font-kerning: normal; /* 2 */
+    text-rendering: optimizeLegibility; /* 3 */
+}
+
+/**
+ * Prevent whitespace wrapping
+ */
+
+.u-textNoWrap {
+    white-space: nowrap !important;
+}
+
+/**
+ * Text truncation
+ *
+ * Prevent text from wrapping onto multiple lines, and truncate with an
+ * ellipsis.
+ *
+ * 1. Ensure that the node has a maximum width after which truncation can
+ *    occur.
+ * 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
+ *    nodes.
+ */
+
+.u-textTruncate {
+    max-width: 100%; /* 1 */
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+    word-wrap: normal !important; /* 2 */
+}

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "suitcss/rails"
+
+# 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