suitcss-rails 1.0.0

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

@@ -0,0 +1,66 @@
+/**
+ * @define utilities
+ * Contain floats
+ *
+ * Make an element expand to contain floated children.
+ * Uses pseudo-elements (micro clearfix).
+ *
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    `contenteditable` attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of the
+ *    element.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+
+.u-cf::before,
+.u-cf::after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+
+.u-cf::after {
+    clear: both;
+}
+
+/**
+ * New block formatting context
+ *
+ * This affords some useful properties to the element. It won't wrap under
+ * floats. Will also contain any floated children.
+ * N.B. This will clip overflow. Use the alternative method below if this is
+ * problematic.
+ */
+
+.u-nbfc {
+    overflow: hidden !important;
+}
+
+/**
+ * New block formatting context (alternative)
+ *
+ * Alternative method when overflow must not be clipped.
+ *
+ * 1. Create a new block formatting context (NBFC).
+ * 2. Avoid shrink-wrap behaviour of table-cell.
+ *
+ * N.B. This breaks down in some browsers when elements within this element
+ * exceed its width.
+ */
+
+.u-nbfcAlt {
+    display: table-cell !important; /* 1 */
+    width: 10000px !important; /* 2 */
+}
+
+/**
+ * Floats
+ */
+
+.u-floatLeft {
+    float: left !important;
+}
+
+.u-floatRight {
+    float: right !important;
+}

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

@@ -0,0 +1,55 @@
+/**
+ * @define utilities
+ * Clean link
+ *
+ * A link without any text-decoration at all.
+ */
+
+.u-linkClean,
+.u-linkClean:hover,
+.u-linkClean:focus,
+.u-linkClean:active {
+    text-decoration: none !important;
+}
+
+/**
+ * Link complex
+ *
+ * A common pattern is to have a link with several pieces of text and/or an
+ * icon, where only one piece of text should display the underline when the
+ * link is the subject of user interaction.
+ *
+ * Example HTML:
+ *
+ * <a class="u-linkComplex" href="#">
+ *   Link complex
+ *   <span class="u-linkComplexTarget">target</span>
+ * </a>
+ */
+
+.u-linkComplex,
+.u-linkComplex:hover,
+.u-linkComplex:focus,
+.u-linkComplex:active {
+    text-decoration: none !important;
+}
+
+.u-linkComplex:hover .u-linkComplexTarget,
+.u-linkComplex:focus .u-linkComplexTarget,
+.u-linkComplex:active .u-linkComplexTarget {
+    text-decoration: underline !important;
+}
+
+/**
+ * Block-level link
+ *
+ * Combination of traits commonly used in vertical navigation lists.
+ */
+
+.u-linkBlock,
+.u-linkBlock:hover,
+.u-linkBlock:focus,
+.u-linkBlock:active {
+    display: block !important;
+    text-decoration: none !important;
+}

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

@@ -0,0 +1,2 @@
+@import "after";
+@import "before";

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

@@ -0,0 +1,48 @@
+/** @define utilities */
+
+.u-posFit,
+.u-posAbsoluteCenter,
+.u-posAbsolute {
+    position: absolute !important;
+}
+
+/**
+ * Element will be centered to its nearest relatively-positioned
+ * ancestor.
+ */
+
+.u-posFixedCenter,
+.u-posAbsoluteCenter {
+    left: 50% !important;
+    top: 50% !important;
+    transform: translate(-50%, -50%) !important;
+}
+
+.u-posFit,
+.u-posFullScreen {
+    bottom: 0 !important;
+    left: 0 !important;
+    margin: auto !important;
+    right: 0 !important;
+    top: 0 !important;
+}
+
+/**
+ * 1. Make sure fixed elements are promoted into a new layer, for performance
+ *    reasons.
+ */
+
+.u-posFullScreen,
+.u-posFixedCenter,
+.u-posFixed {
+    backface-visibility: hidden; /* 1 */
+    position: fixed !important;
+}
+
+.u-posRelative {
+    position: relative !important;
+}
+
+.u-posStatic {
+    position: static !important;
+}

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

@@ -0,0 +1,4 @@
+@import "size/index";
+@import "size/sm";
+@import "size/md";
+@import "size/lg";

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

@@ -0,0 +1,172 @@
+/**
+ * @define utilities
+ * Sizing utilities
+ */
+
+/* Proportional widths
+   ========================================================================== */
+
+/**
+ * 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-size"] {
+    flex-basis: auto !important; /* 1 */
+}
+
+.u-size1of12 {
+    width: calc(100% * 1 / 12) !important;
+}
+
+.u-size1of10 {
+    width: 10% !important;
+}
+
+.u-size1of8 {
+    width: 12.5% !important;
+}
+
+.u-size1of6,
+.u-size2of12 {
+    width: calc(100% * 1 / 6) !important;
+}
+
+.u-size1of5,
+.u-size2of10 {
+    width: 20% !important;
+}
+
+.u-size1of4,
+.u-size2of8,
+.u-size3of12 {
+    width: 25% !important;
+}
+
+.u-size3of10 {
+    width: 30% !important;
+}
+
+.u-size1of3,
+.u-size2of6,
+.u-size4of12 {
+    width: calc(100% * 1 / 3) !important;
+}
+
+.u-size3of8 {
+    width: 37.5% !important;
+}
+
+.u-size2of5,
+.u-size4of10 {
+    width: 40% !important;
+}
+
+.u-size5of12 {
+    width: calc(100% * 5 / 12) !important;
+}
+
+.u-size1of2,
+.u-size2of4,
+.u-size3of6,
+.u-size4of8,
+.u-size5of10,
+.u-size6of12 {
+    width: 50% !important;
+}
+
+.u-size7of12 {
+    width: calc(100% * 7 / 12) !important;
+}
+
+.u-size3of5,
+.u-size6of10 {
+    width: 60% !important;
+}
+
+.u-size5of8 {
+    width: 62.5% !important;
+}
+
+.u-size2of3,
+.u-size4of6,
+.u-size8of12 {
+    width: calc(100% * 2 / 3) !important;
+}
+
+.u-size7of10 {
+    width: 70% !important;
+}
+
+.u-size3of4,
+.u-size6of8,
+.u-size9of12 {
+    width: 75% !important;
+}
+
+.u-size4of5,
+.u-size8of10 {
+    width: 80% !important;
+}
+
+.u-size5of6,
+.u-size10of12 {
+    width: calc(100% * 5 / 6) !important;
+}
+
+.u-size7of8 {
+    width: 87.5% !important;
+}
+
+.u-size9of10 {
+    width: 90% !important;
+}
+
+.u-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-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-sizeFillAlt {
+    flex: 1 1 auto !important;
+    flex-basis: auto !important;
+}
+
+/**
+ * Make an element the width of its parent.
+ */
+
+.u-sizeFull {
+    box-sizing: border-box !important;
+    display: block !important;
+    width: 100% !important;
+}

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

@@ -0,0 +1,176 @@
+/**
+ * @define utilities
+ * Size: breakpoint 3 (large)
+ */
+
+@media (--lg-viewport) {
+
+    /* Proportional widths: breakpoint 3 (large)
+       ======================================================================== */
+
+    /**
+     * 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-lg-size"] {
+        flex-basis: auto !important; /* 1 */
+    }
+
+    .u-lg-size1of12 {
+        width: calc(100% * 1 / 12) !important;
+    }
+
+    .u-lg-size1of10 {
+        width: 10% !important;
+    }
+
+    .u-lg-size1of8 {
+        width: 12.5% !important;
+    }
+
+    .u-lg-size1of6,
+    .u-lg-size2of12 {
+        width: calc(100% * 1 / 6) !important;
+    }
+
+    .u-lg-size1of5,
+    .u-lg-size2of10 {
+        width: 20% !important;
+    }
+
+    .u-lg-size1of4,
+    .u-lg-size2of8,
+    .u-lg-size3of12 {
+        width: 25% !important;
+    }
+
+    .u-lg-size3of10 {
+        width: 30% !important;
+    }
+
+    .u-lg-size1of3,
+    .u-lg-size2of6,
+    .u-lg-size4of12 {
+        width: calc(100% * 1 / 3) !important;
+    }
+
+    .u-lg-size3of8 {
+        width: 37.5% !important;
+    }
+
+    .u-lg-size2of5,
+    .u-lg-size4of10 {
+        width: 40% !important;
+    }
+
+    .u-lg-size5of12 {
+        width: calc(100% * 5 / 12) !important;
+    }
+
+    .u-lg-size1of2,
+    .u-lg-size2of4,
+    .u-lg-size3of6,
+    .u-lg-size4of8,
+    .u-lg-size5of10,
+    .u-lg-size6of12 {
+        width: 50% !important;
+    }
+
+    .u-lg-size7of12 {
+        width: calc(100% * 7 / 12) !important;
+    }
+
+    .u-lg-size3of5,
+    .u-lg-size6of10 {
+        width: 60% !important;
+    }
+
+    .u-lg-size5of8 {
+        width: 62.5% !important;
+    }
+
+    .u-lg-size2of3,
+    .u-lg-size4of6,
+    .u-lg-size8of12 {
+        width: calc(100% * 2 / 3) !important;
+    }
+
+    .u-lg-size7of10 {
+        width: 70% !important;
+    }
+
+    .u-lg-size3of4,
+    .u-lg-size6of8,
+    .u-lg-size9of12 {
+        width: 75% !important;
+    }
+
+    .u-lg-size4of5,
+    .u-lg-size8of10 {
+        width: 80% !important;
+    }
+
+    .u-lg-size5of6,
+    .u-lg-size10of12 {
+        width: calc(100% * 5 / 6) !important;
+    }
+
+    .u-lg-size7of8 {
+        width: 87.5% !important;
+    }
+
+    .u-lg-size9of10 {
+        width: 90% !important;
+    }
+
+    .u-lg-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-lg-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-lg-sizeFillAlt {
+        flex: 1 1 auto !important;
+        flex-basis: auto !important;
+    }
+
+    /**
+     * Make an element the width of its parent.
+     */
+
+    .u-lg-sizeFull {
+        box-sizing: border-box !important;
+        display: block !important;
+        width: 100% !important;
+    }
+
+}