uikit3-rails 0.1.0

data/assets/stylesheets/components/grid.less

@@ -0,0 +1,363 @@
+// Name:            Grid
+// Description:     Component to create responsive, fluid and nestable grids
+//
+// Component:       `uk-grid`
+//
+// Modifiers:       `uk-grid-small`
+//                  `uk-grid-medium`
+//                  `uk-grid-large`
+//                  `uk-grid-collapse`
+//                  `uk-grid-divider`
+//                  `uk-grid-match`
+//                  `uk-grid-stack`
+//                  `uk-grid-margin`
+//                  `uk-grid-margin-small`
+//                  `uk-grid-margin-medium`
+//                  `uk-grid-margin-large`
+//                  `uk-grid-margin-collapse`
+//
+// States:          `uk-first-column`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@grid-gutter-horizontal:                        @global-gutter;
+@grid-gutter-vertical:                          @grid-gutter-horizontal;
+@grid-gutter-horizontal-l:                      @global-medium-gutter;
+@grid-gutter-vertical-l:                        @grid-gutter-horizontal-l;
+
+@grid-small-gutter-horizontal:                  @global-small-gutter;
+@grid-small-gutter-vertical:                    @grid-small-gutter-horizontal;
+
+@grid-medium-gutter-horizontal:                 @global-gutter;
+@grid-medium-gutter-vertical:                   @grid-medium-gutter-horizontal;
+
+@grid-large-gutter-horizontal:                  @global-medium-gutter;
+@grid-large-gutter-vertical:                    @grid-large-gutter-horizontal;
+@grid-large-gutter-horizontal-l:                @global-large-gutter;
+@grid-large-gutter-vertical-l:                  @grid-large-gutter-horizontal-l;
+
+@grid-divider-border-width:                     @global-border-width;
+@grid-divider-border:                           @global-border;
+
+
+/* ========================================================================
+   Component: Grid
+ ========================================================================== */
+
+/*
+ * 1. Allow cells to wrap into the next line
+ * 2. Reset lists
+ */
+
+.uk-grid {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    /* 1 */
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    /* 2 */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/*
+ * Grid cell
+ * Note: Space is allocated solely based on content dimensions, but shrinks: 0 1 auto
+ * Reset margin for e.g. paragraphs
+ */
+
+.uk-grid > * { margin: 0; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-grid > * > :last-child { margin-bottom: 0; }
+
+
+/* Gutter
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+/* Horizontal */
+.uk-grid { margin-left: -@grid-gutter-horizontal; }
+.uk-grid > * { padding-left: @grid-gutter-horizontal; }
+
+/* Vertical */
+.uk-grid + .uk-grid,
+.uk-grid > .uk-grid-margin,
+* + .uk-grid-margin { margin-top: @grid-gutter-vertical; }
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    /* Horizontal */
+    .uk-grid { margin-left: -@grid-gutter-horizontal-l; }
+    .uk-grid > * { padding-left: @grid-gutter-horizontal-l; }
+
+    /* Vertical */
+    .uk-grid + .uk-grid,
+    .uk-grid > .uk-grid-margin,
+    * + .uk-grid-margin { margin-top: @grid-gutter-vertical-l; }
+
+}
+
+/*
+ * Small
+ */
+
+/* Horizontal */
+.uk-grid-small { margin-left: -@grid-small-gutter-horizontal; }
+.uk-grid-small > * { padding-left: @grid-small-gutter-horizontal; }
+
+/* Vertical */
+.uk-grid + .uk-grid-small,
+.uk-grid-small > .uk-grid-margin,
+* + .uk-grid-margin-small { margin-top: @grid-small-gutter-vertical; }
+
+/*
+ * Medium
+ */
+
+/* Horizontal */
+.uk-grid-medium { margin-left: -@grid-medium-gutter-horizontal; }
+.uk-grid-medium > * { padding-left: @grid-medium-gutter-horizontal; }
+
+/* Vertical */
+.uk-grid + .uk-grid-medium,
+.uk-grid-medium > .uk-grid-margin,
+* + .uk-grid-margin-medium { margin-top: @grid-medium-gutter-vertical; }
+
+/*
+ * Large
+ */
+
+/* Horizontal */
+.uk-grid-large { margin-left: -@grid-large-gutter-horizontal; }
+.uk-grid-large > * { padding-left: @grid-large-gutter-horizontal; }
+
+/* Vertical */
+.uk-grid + .uk-grid-large,
+.uk-grid-large > .uk-grid-margin,
+* + .uk-grid-margin-large { margin-top: @grid-large-gutter-vertical; }
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    /* Horizontal */
+    .uk-grid-large { margin-left: -@grid-large-gutter-horizontal-l; }
+    .uk-grid-large > * { padding-left: @grid-large-gutter-horizontal-l; }
+
+    /* Vertical */
+    .uk-grid + .uk-grid-large,
+    .uk-grid-large > .uk-grid-margin,
+    * + .uk-grid-margin-large { margin-top: @grid-large-gutter-vertical-l; }
+
+}
+
+/*
+ * Collapse
+ */
+
+/* Horizontal */
+.uk-grid-collapse { margin-left: 0; }
+.uk-grid-collapse > * { padding-left: 0; }
+
+/* Vertical */
+.uk-grid + .uk-grid-collapse,
+.uk-grid-collapse > .uk-grid-margin { margin-top: 0; }
+
+
+/* Divider
+ ========================================================================== */
+
+.uk-grid-divider > * { position: relative; }
+
+.uk-grid-divider > :not(.uk-first-column)::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    border-left: @grid-divider-border-width solid @grid-divider-border;
+}
+
+/* Vertical */
+.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    border-top: @grid-divider-border-width solid @grid-divider-border;
+}
+
+/*
+ * Default
+ */
+
+/* Horizontal */
+.uk-grid-divider { margin-left: -(@grid-gutter-horizontal * 2); }
+.uk-grid-divider > * { padding-left: (@grid-gutter-horizontal * 2); }
+
+.uk-grid-divider > :not(.uk-first-column)::before { left: @grid-gutter-horizontal; }
+
+/* Vertical */
+.uk-grid-divider.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-gutter-vertical * 2); }
+
+.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
+    top: -@grid-gutter-vertical;
+    left: (@grid-gutter-horizontal * 2);
+}
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    /* Horizontal */
+    .uk-grid-divider { margin-left: -(@grid-gutter-horizontal-l * 2); }
+    .uk-grid-divider > * { padding-left: (@grid-gutter-horizontal-l * 2); }
+
+    .uk-grid-divider > :not(.uk-first-column)::before { left: @grid-gutter-horizontal-l; }
+
+    /* Vertical */
+    .uk-grid-divider.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-gutter-vertical-l * 2); }
+
+    .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
+        top: -@grid-gutter-vertical-l;
+        left: (@grid-gutter-horizontal-l * 2);
+    }
+
+}
+
+/*
+ * Small
+ */
+
+/* Horizontal */
+.uk-grid-divider.uk-grid-small { margin-left: -(@grid-small-gutter-horizontal * 2); }
+.uk-grid-divider.uk-grid-small > * { padding-left: (@grid-small-gutter-horizontal * 2); }
+
+.uk-grid-divider.uk-grid-small > :not(.uk-first-column)::before { left: @grid-small-gutter-horizontal; }
+
+/* Vertical */
+.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-small-gutter-vertical * 2); }
+
+.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin::before {
+    top: -@grid-small-gutter-vertical;
+    left: (@grid-small-gutter-horizontal * 2);
+}
+
+/*
+ * Medium
+ */
+
+/* Horizontal */
+.uk-grid-divider.uk-grid-medium { margin-left: -(@grid-medium-gutter-horizontal * 2); }
+.uk-grid-divider.uk-grid-medium > * { padding-left: (@grid-medium-gutter-horizontal * 2); }
+
+.uk-grid-divider.uk-grid-medium > :not(.uk-first-column)::before { left: @grid-medium-gutter-horizontal; }
+
+/* Vertical */
+.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-medium-gutter-vertical * 2); }
+
+.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin::before {
+    top: -@grid-medium-gutter-vertical;
+    left: (@grid-medium-gutter-horizontal * 2);
+}
+
+/*
+ * Large
+ */
+
+/* Horizontal */
+.uk-grid-divider.uk-grid-large { margin-left: -(@grid-large-gutter-horizontal * 2); }
+.uk-grid-divider.uk-grid-large > * { padding-left: (@grid-large-gutter-horizontal * 2); }
+
+.uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before { left: @grid-large-gutter-horizontal; }
+
+/* Vertical */
+.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-large-gutter-vertical * 2); }
+
+.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
+    top: -@grid-large-gutter-vertical;
+    left: (@grid-large-gutter-horizontal * 2);
+}
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    /* Horizontal */
+    .uk-grid-divider.uk-grid-large { margin-left: -(@grid-large-gutter-horizontal-l * 2); }
+    .uk-grid-divider.uk-grid-large > * { padding-left: (@grid-large-gutter-horizontal-l * 2); }
+
+    .uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before { left: @grid-large-gutter-horizontal-l; }
+
+    /* Vertical */
+    .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-large-gutter-vertical-l * 2); }
+
+    .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
+        top: -@grid-large-gutter-vertical-l;
+        left: (@grid-large-gutter-horizontal-l * 2);
+    }
+
+}
+
+
+/* Match child of a grid cell
+ ========================================================================== */
+
+/*
+ * Behave like a block element
+ * 1. Wrap into the next line
+ * 2. Take the full width, at least 100%. Only if no class from the Width component is set.
+ * 3. Expand width even if larger than 100%, e.g. because of negative margin (Needed for nested grids)
+ */
+
+.uk-grid-match > * {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    /* 1 */
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+
+.uk-grid-match > * > *:not([class*='uk-width']) {
+    /* 2 */
+    box-sizing: border-box;
+    width: 100%;
+    /* 3 */
+    -ms-flex: auto;
+    -webkit-flex: auto;
+    flex: auto;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-grid-misc;
+
+.hook-grid-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-grid-divider-border:                  @inverse-global-border;
+
+.hook-inverse() {
+
+    .uk-grid-divider > :not(.uk-first-column)::before { border-left-color: @inverse-grid-divider-border; }
+    .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before { border-top-color: @inverse-grid-divider-border; }
+
+}

data/assets/stylesheets/components/heading.less

@@ -0,0 +1,238 @@
+// Name:            Heading
+// Description:     Styles for headings
+//
+// Component:       `uk-heading-primary`
+//                  `uk-heading-hero`
+//                  `uk-heading-divider`
+//                  `uk-heading-bullet`
+//                  `uk-heading-line`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@heading-primary-font-size:                     @global-xxlarge-font-size;
+@heading-primary-line-height:                   1.2;
+
+@heading-primary-font-size-m:                   3.75rem; // 54px
+@heading-primary-line-height-m:                 1.1;
+
+@heading-hero-font-size:                        4rem; // 64px
+@heading-hero-line-height:                      1.1;
+
+@heading-hero-font-size-s:                      6rem; // 96px
+@heading-hero-line-height-s:                    1;
+
+@heading-hero-font-size-m:                      8rem; // 128px
+@heading-hero-line-height-m:                    1;
+
+@heading-divider-padding-bottom:                10px;
+@heading-divider-border-width:                  @global-border-width;
+@heading-divider-border:                        @global-border;
+
+@heading-bullet-top:                            ~'calc(-0.1 * 1em)';
+@heading-bullet-height:                         0.9em;
+@heading-bullet-margin-right:                   10px;
+@heading-bullet-border-width:                   5px;
+@heading-bullet-border:                         @global-border;
+
+@heading-line-height:                           @heading-line-border-width;
+@heading-line-border-width:                     @global-border-width;
+@heading-line-border:                           @global-border;
+@heading-line-margin-horizontal:                0.6em;
+
+
+/* ========================================================================
+   Component: Heading
+ ========================================================================== */
+
+
+/* Primary
+ ========================================================================== */
+
+.uk-heading-primary {
+    font-size: @heading-primary-font-size;
+    line-height: @heading-primary-line-height;
+    .hook-heading-primary;
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-heading-primary {
+        font-size: @heading-primary-font-size-m;
+        line-height: @heading-primary-line-height-m;
+    }
+
+}
+
+
+/* Hero
+ ========================================================================== */
+
+.uk-heading-hero {
+    font-size: @heading-hero-font-size;
+    line-height: @heading-hero-line-height;
+    .hook-heading-hero;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-heading-hero {
+        font-size: @heading-hero-font-size-s;
+        line-height: @heading-hero-line-height-s;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-heading-hero {
+        font-size: @heading-hero-font-size-m;
+        line-height: @heading-hero-line-height-m;
+    }
+
+}
+
+
+/* Divider
+ ========================================================================== */
+
+.uk-heading-divider {
+    padding-bottom: @heading-divider-padding-bottom;
+    border-bottom: @heading-divider-border-width solid @heading-divider-border;
+    .hook-heading-divider;
+}
+
+
+/* Bullet
+ ========================================================================== */
+
+.uk-heading-bullet { position: relative; }
+
+/*
+ * 1. Using `inline-block` to make it work with text alignment
+ * 2. Center vertically
+ * 3. Style
+ */
+
+.uk-heading-bullet::before {
+    content: "";
+    /* 1 */
+    display: inline-block;
+    /* 2 */
+    position: relative;
+    top: @heading-bullet-top;
+    vertical-align: middle;
+    /* 3 */
+    height: @heading-bullet-height;
+    margin-right: @heading-bullet-margin-right;
+    border-left: @heading-bullet-border-width solid @heading-bullet-border;
+    .hook-heading-bullet;
+}
+
+
+/* Line
+ ========================================================================== */
+
+/*
+ * Clip the child element
+ */
+
+.uk-heading-line { overflow: hidden; }
+
+/*
+ * Extra markup is needed to make it work with text align
+ */
+
+.uk-heading-line > * {
+    display: inline-block;
+    position: relative;
+}
+
+/*
+ * 1. Center vertically
+ * 2. Make the element as large as possible. It's clipped by the container.
+ * 3. Style
+ */
+
+.uk-heading-line > :before,
+.uk-heading-line > :after {
+    content: "";
+    /* 1 */
+    position: absolute;
+    top: ~'calc(50% + (@{heading-line-height} / 2))';
+    /* 2 */
+    width: 2000px;
+    /* 3 */
+    border-bottom: @heading-line-border-width solid @heading-line-border;
+    .hook-heading-line;
+}
+
+.uk-heading-line > :before {
+    right: 100%;
+    margin-right: @heading-line-margin-horizontal;
+}
+.uk-heading-line > :after {
+    left: 100%;
+    margin-left: @heading-line-margin-horizontal;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-heading-misc;
+
+.hook-heading-primary() {}
+.hook-heading-hero() {}
+.hook-heading-divider() {}
+.hook-heading-bullet() {}
+.hook-heading-line() {}
+.hook-heading-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-heading-divider-border:                  @inverse-global-border;
+@inverse-heading-bullet-border:                   @inverse-global-border;
+@inverse-heading-line-border:                     @inverse-global-border;
+
+.hook-inverse() {
+
+    .uk-heading-primary {
+        .hook-inverse-heading-primary;
+    }
+
+    .uk-heading-hero {
+        .hook-inverse-heading-hero;
+    }
+
+    .uk-heading-divider {
+        border-bottom-color: @inverse-heading-divider-border;
+        .hook-inverse-heading-divider;
+    }
+
+    .uk-heading-bullet::before {
+        border-left-color: @inverse-heading-bullet-border;
+        .hook-inverse-heading-bullet;
+    }
+
+    .uk-heading-line > :before,
+    .uk-heading-line > :after {
+        border-bottom-color: @inverse-heading-line-border;
+        .hook-inverse-heading-line;
+    }
+
+}
+
+.hook-inverse-heading-primary() {}
+.hook-inverse-heading-hero() {}
+.hook-inverse-heading-divider() {}
+.hook-inverse-heading-bullet() {}
+.hook-inverse-heading-line() {}