From ab0f8bf1b7fb93e147c5ed5818353a79f65d999b Mon Sep 17 00:00:00 2001 From: HOG Date: Wed, 23 Aug 2017 16:15:33 +0300 Subject: [PATCH 1/2] Added susy 3.0 instead of Zen-grid. --- STARTERKIT/components/_init.scss | 10 +- .../asset-builds/twig/kss-example-chroma.twig | 2 +- STARTERKIT/components/init/_variables.scss | 60 +- .../layouts/layout-3col/_layout-3col.scss | 162 -- .../layouts/layout-3col/layout-3col.twig | 58 - .../layouts/layout-center/_layout-center.scss | 67 +- .../layouts/layout-center/layout-center.json | 3 - .../layouts/layout-center/layout-center.twig | 3 - .../layouts/layout-swap/_layout-swap.scss | 8 - .../layouts/layout-swap/layout-swap.twig | 4 - STARTERKIT/components/layouts/layouts.scss | 4 - .../components/style-guide/kss-only.scss | 10 - STARTERKIT/package.json | 4 +- STARTERKIT/styleguide/index.html | 101 +- STARTERKIT/styleguide/kss-assets/kss.css | 2 +- STARTERKIT/styleguide/kss-assets/kss.scss | 274 ++- STARTERKIT/styleguide/kss-assets/scrollspy.js | 3 +- STARTERKIT/styleguide/section-base.html | 1923 +++++++++++++++-- STARTERKIT/styleguide/section-components.html | 1235 +++++++++-- STARTERKIT/styleguide/section-forms.html | 1406 ++++++++++-- STARTERKIT/styleguide/section-layouts.html | 390 +--- STARTERKIT/styleguide/section-navigation.html | 750 +++++-- STARTERKIT/styleguide/section-sass.html | 206 +- 23 files changed, 5211 insertions(+), 1474 deletions(-) delete mode 100644 STARTERKIT/components/layouts/layout-3col/_layout-3col.scss delete mode 100644 STARTERKIT/components/layouts/layout-3col/layout-3col.twig delete mode 100644 STARTERKIT/components/layouts/layout-center/layout-center.json delete mode 100644 STARTERKIT/components/layouts/layout-center/layout-center.twig delete mode 100644 STARTERKIT/components/layouts/layout-swap/layout-swap.twig diff --git a/STARTERKIT/components/_init.scss b/STARTERKIT/components/_init.scss index 1b6860e..0f8153a 100644 --- a/STARTERKIT/components/_init.scss +++ b/STARTERKIT/components/_init.scss @@ -28,6 +28,12 @@ @import 'breakpoint-sass'; @import 'chroma-sass/sass/chroma/functions'; +// Add susy grid system. +@import 'susy'; +// @import 'susy/sass/plugins/svg-grid'; +@import 'susy/sass/plugins/svg-grid/prefix'; + + @import 'init/colors'; @import 'init/variables'; @@ -39,7 +45,7 @@ // - [Chroma](https://github.com/JohnAlbin/chroma) // - [Support-for](https://github.com/JohnAlbin/support-for) // - [Typey](https://github.com/jptaranto/typey) -// - [Zen Grids](http://zengrids.com/help/) +// - [Susy](http://oddbird.net/susy/) // // Additional pre-built libraries can be found on the [Sache website](http://www.sache.in/). // @@ -52,8 +58,6 @@ @import 'support-for'; // Add typey to manage font sizes and margins. @import 'typey'; -// Add the Zen Grids responsive layout mixins. -@import 'zen-grids'; // Mixins diff --git a/STARTERKIT/components/asset-builds/twig/kss-example-chroma.twig b/STARTERKIT/components/asset-builds/twig/kss-example-chroma.twig index a3cedf4..86ca942 100644 --- a/STARTERKIT/components/asset-builds/twig/kss-example-chroma.twig +++ b/STARTERKIT/components/asset-builds/twig/kss-example-chroma.twig @@ -1 +1 @@ -

branding

The site's main colors. Can be used to define colors in other color schemes.

color(black) uses the color: #000 This color is inherited by: grey-dark, grey, grey-light, grey-extra-light, text, border, autocomplete, button, button-disabled, fieldset-summary, menu-active, progress-bar-bg, progress-bar-border, resizable-grippie, row-stripe, row-disabled, skip-link-bg, status-highlight, warning, tabs-border, tab, tab-bg, tab-secondary, watermark
color(grey-dark) uses the color: #666666 (black) This color is inherited by: progress-bar-border, skip-link-bg, tab-secondary
color(grey) uses the color: #999999 (black) This color is inherited by: button-disabled, fieldset-summary
color(grey-light) uses the color: #cccccc (black) This color is inherited by: border, progress-bar-bg, row-disabled, tabs-border, tab-bg
color(grey-extra-light) uses the color: #eeeeee (black) This color is inherited by: resizable-grippie, row-stripe, watermark
color(white) uses the color: #fff This color is inherited by: text-bg, autocomplete-bg, autocomplete-select, body-bg, skip-link, tabs-bg, tab-text-shadow
color(blue) uses the color: #0072b9 This color is inherited by: link, link-visited, autocomplete-select-bg, progress-bar, status, status-bg
color(red) uses the color: #c00 This color is inherited by: link-active, form-error, mark-highlight, error, error-bg
color(yellow) uses the color: #fd0 This color is inherited by: mark-bg, preview-bg, warning-bg, warning-border, table-drag, table-select

functional

Colors used by functional parts of the design.

color(text) uses the color: #000 (black) This color is inherited by: autocomplete, button, menu-active, status-highlight, warning, tab
color(text-bg) uses the color: #fff (white) This color is inherited by: autocomplete-bg, body-bg, tabs-bg
color(link) uses the color: #0072b9 (blue)
color(link-visited) uses the color: #003353 (blue)
color(link-active) uses the color: #c00 (red)
color(border) uses the color: #cccccc (grey-light) This color is inherited by: tabs-border
color(autocomplete) uses the color: #000 (text)
color(autocomplete-bg) uses the color: #fff (text-bg)
color(autocomplete-select) uses the color: #fff (white)
color(autocomplete-select-bg) uses the color: #0072b9 (blue)
color(body-bg) uses the color: #fff (text-bg)
color(button) uses the color: #000 (text)
color(button-disabled) uses the color: #999999 (grey)
color(fieldset-summary) uses the color: #999999 (grey)
color(form-error) uses the color: #c00 (red)
color(mark-highlight) uses the color: #c00 (red)
color(mark-bg) uses the color: #fd0 (yellow)
color(menu-active) uses the color: #000 (text)
color(preview-bg) uses the color: #fffadb (yellow)
color(progress-bar) uses the color: #0072b9 (blue)
color(progress-bar-bg) uses the color: #cccccc (grey-light)
color(progress-bar-border) uses the color: #666666 (grey-dark)
color(resizable-grippie) uses the color: #eeeeee (grey-extra-light)
color(row-stripe) uses the color: #eeeeee (grey-extra-light)
color(row-disabled) uses the color: #cccccc (grey-light)
color(skip-link) uses the color: #fff (white)
color(skip-link-bg) uses the color: #666666 (grey-dark)
color(status) uses the color: #0072b9 (blue) This color is inherited by: status-bg
color(status-bg) uses the color: #f6fcff (status)
color(status-highlight) uses the color: #000 (text)
color(warning) uses the color: #000 (text)
color(warning-bg) uses the color: #fffce6 (yellow)
color(warning-border) uses the color: #fd0 (yellow)
color(error) uses the color: #c00 (red) This color is inherited by: error-bg
color(error-bg) uses the color: #fff0f0 (error)
color(tabs-border) uses the color: #cccccc (border)
color(tabs-bg) uses the color: #fff (text-bg)
color(tab) uses the color: #000 (text)
color(tab-text-shadow) uses the color: #fff (white)
color(tab-bg) uses the color: #dddddd (grey-light)
color(tab-secondary) uses the color: #666666 (grey-dark)
color(table-drag) uses the color: #fffadb (yellow)
color(table-select) uses the color: #fffdf0 (yellow)
color(watermark) uses the color: #eeeeee (grey-extra-light)
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey

branding

The site's main colors. Can be used to define colors in other color schemes.

color(black) uses the color: #000 This color is inherited by: grey-dark, grey, grey-light, grey-extra-light, text, border, autocomplete, button, button-disabled, fieldset-summary, menu-active, progress-bar-bg, progress-bar-border, resizable-grippie, row-stripe, row-disabled, skip-link-bg, status-highlight, warning, tabs-border, tab, tab-bg, tab-secondary, watermark
color(grey-dark) uses the color: #666666 (black) This color is inherited by: progress-bar-border, skip-link-bg, tab-secondary
color(grey) uses the color: #999999 (black) This color is inherited by: button-disabled, fieldset-summary
color(grey-light) uses the color: #cccccc (black) This color is inherited by: border, progress-bar-bg, row-disabled, tabs-border, tab-bg
color(grey-extra-light) uses the color: #eeeeee (black) This color is inherited by: resizable-grippie, row-stripe, watermark
color(white) uses the color: #fff This color is inherited by: text-bg, autocomplete-bg, autocomplete-select, body-bg, skip-link, tabs-bg, tab-text-shadow
color(navy) uses the color: #001f3f
color(blue) uses the color: #0074d9 This color is inherited by: link, link-visited, autocomplete-select-bg, progress-bar, status, status-bg
color(aqua) uses the color: #7fdbff
color(teal) uses the color: #39cccc
color(olive) uses the color: #3d9970
color(green) uses the color: #2ecc40
color(lime) uses the color: #01ff70
color(yellow) uses the color: #ffdc00 This color is inherited by: mark-bg, preview-bg, warning-bg, warning-border, table-drag, table-select
color(orange) uses the color: #ff851b
color(red) uses the color: #ff4136 This color is inherited by: link-active, form-error, mark-highlight, error, error-bg
color(fuchsia) uses the color: #f012be
color(purple) uses the color: #b10dc9
color(maroon) uses the color: #85144b
color(silver) uses the color: #ddd

functional

Colors used by functional parts of the design.

color(text) uses the color: #000 (black) This color is inherited by: autocomplete, button, menu-active, status-highlight, warning, tab
color(text-bg) uses the color: #fff (white) This color is inherited by: autocomplete-bg, body-bg, tabs-bg
color(link) uses the color: #0074d9 (blue)
color(link-visited) uses the color: #003d73 (blue)
color(link-active) uses the color: #ff4136 (red)
color(border) uses the color: #cccccc (grey-light) This color is inherited by: tabs-border
color(autocomplete) uses the color: #000 (text)
color(autocomplete-bg) uses the color: #fff (text-bg)
color(autocomplete-select) uses the color: #fff (white)
color(autocomplete-select-bg) uses the color: #0074d9 (blue)
color(body-bg) uses the color: #fff (text-bg)
color(button) uses the color: #000 (text)
color(button-disabled) uses the color: #999999 (grey)
color(fieldset-summary) uses the color: #999999 (grey)
color(form-error) uses the color: #ff4136 (red)
color(mark-highlight) uses the color: #ff4136 (red)
color(mark-bg) uses the color: #ffdc00 (yellow)
color(menu-active) uses the color: #000 (text)
color(preview-bg) uses the color: #fffadb (yellow)
color(progress-bar) uses the color: #0074d9 (blue)
color(progress-bar-bg) uses the color: #cccccc (grey-light)
color(progress-bar-border) uses the color: #666666 (grey-dark)
color(resizable-grippie) uses the color: #eeeeee (grey-extra-light)
color(row-stripe) uses the color: #eeeeee (grey-extra-light)
color(row-disabled) uses the color: #cccccc (grey-light)
color(skip-link) uses the color: #fff (white)
color(skip-link-bg) uses the color: #666666 (grey-dark)
color(status) uses the color: #0074d9 (blue) This color is inherited by: status-bg
color(status-bg) uses the color: white (status)
color(status-highlight) uses the color: #000 (text)
color(warning) uses the color: #000 (text)
color(warning-bg) uses the color: #fffce6 (yellow)
color(warning-border) uses the color: #ffdc00 (yellow)
color(error) uses the color: #ff4136 (red) This color is inherited by: error-bg
color(error-bg) uses the color: white (error)
color(tabs-border) uses the color: #cccccc (border)
color(tabs-bg) uses the color: #fff (text-bg)
color(tab) uses the color: #000 (text)
color(tab-text-shadow) uses the color: #fff (white)
color(tab-bg) uses the color: #dddddd (grey-light)
color(tab-secondary) uses the color: #666666 (grey-dark)
color(table-drag) uses the color: #fffadb (yellow)
color(table-select) uses the color: #fffdf0 (yellow)
color(watermark) uses the color: #eeeeee (grey-extra-light)
diff --git a/STARTERKIT/components/init/_variables.scss b/STARTERKIT/components/init/_variables.scss index 7a7daf0..1b5ae13 100644 --- a/STARTERKIT/components/init/_variables.scss +++ b/STARTERKIT/components/init/_variables.scss @@ -119,53 +119,27 @@ $rem-fallback: false; // // Style guide: sass.variables.breakpoints -@include add-breakpoint(xxxs, (333px, 'no-query' true)); -@include add-breakpoint(xxs, (444px, 'no-query' true)); -@include add-breakpoint(xs, (555px, 'no-query' true)); -@include add-breakpoint(s, (666px, 'no-query' true)); -@include add-breakpoint(m, (777px, 'no-query' true)); -@include add-breakpoint(l, (888px, 'no-query' true)); -@include add-breakpoint(xl, (999px, 'no-query' true)); -@include add-breakpoint(xxl, (1111px)); -@include add-breakpoint(xxxl, (1222px)); +@include add-breakpoint(mobile, (640px, 'no-query' true)); +@include add-breakpoint(tablet, (641px, 'no-query' true)); +@include add-breakpoint(desktop, (1025px, 'no-query' true)); + + +// Container width. +$mobile: 640px; +$tablet: 960px; +$desktop: 1200px; + // Output media queries where the above px are converted to ems. // @include breakpoint-set('to ems', true); - -// Zen grids -// -// The default grid system is built using the Zen Grids sass module. Full -// documentation is available on the [Zen Grids website](http://zengrids.com/). -// -// Note: if you are more comfortable using another grid system, you can easily -// remove Zen Grids and its layouts. -// -// Style guide: sass.variables.zen-grids - -// These are needed for all breakpoints on all layouts. -$zen-auto-include-grid-item-base: false; -$zen-box-sizing: universal-border-box; - -// First we set the values we need for the mobile version of our layouts (the -// version that does _not_ appear inside any @media queries.) -$zen-columns: 1; -$zen-gutters: 40px; - -// Then we set the values we need for each of the layouts at larger media query -// sizes. Note how the names of the layouts match the names of our breakpoints -// above. That allows a single zen-respond-to() to both use the proper item -// from $zen-layouts and from $breakpoints. -$zen-layouts: ( - m: ( - columns: 2, - // The gutters in the layouts are larger on mobile. - gutters: 25px, - ), - xl: ( - columns: 3, - gutters: 25px, - ), +// Susy settings. +$susy: ( + 'columns': susy-repeat(12), + 'gutters': 15px, + 'spread': 'narrow', + 'container-spread': 'narrow', + 'svg-grid-colors': hsl(334, 65%, 52%), ); // See $include-rtl below. diff --git a/STARTERKIT/components/layouts/layout-3col/_layout-3col.scss b/STARTERKIT/components/layouts/layout-3col/_layout-3col.scss deleted file mode 100644 index 4206e6f..0000000 --- a/STARTERKIT/components/layouts/layout-3col/_layout-3col.scss +++ /dev/null @@ -1,162 +0,0 @@ -// Responsive 3-column grid -// -// The `.layout-3col` layout is a responsive grid layout that is: -// - 1 column at mobile sizes -// - 2 columns at tablet sizes -// - 3 columns at desktop sizes -// -// The `.layout-3col` class is used on the container div for the layout. A *grid -// item* in the container can be created using one of the following classes: -// -// - `.layout-3col__full` : 3-column wide grid item; starts a new row -// - `.layout-3col__left-content` : 2-column wide grid item, spanning columns 1 -// and 2; starts a new row -// - `.layout-3col__right-content` : 2-column wide grid item, spanning columns 2 -// and 3; starts a new row -// - `.layout-3col__left-sidebar` : 1-column wide grid item spanning column 1; -// starts a new row on tablet screens -// - `.layout-3col__first-left-sidebar` : 1-column wide grid item spanning column 1; -// spans column 1 and starts a new row on tablet screens only -// - `.layout-3col__second-left-sidebar` : 1-column wide grid item spanning column 1; -// spans column 2 on tablet screens only -// - `.layout-3col__right-sidebar` : 1-column wide grid item spanning column 3; -// starts a new row on tablet screens -// - `.layout-3col__col-1` : 1-column wide grid item spanning column 1; starts a -// new row -// - `.layout-3col__col-2` : 1-column wide grid item spanning column 2 -// - `.layout-3col__col-3` : 1-column wide grid item spanning column 3; starts a -// new row on tablet screens -// - `.layout-3col__col-4` : At tablet sizes, the `__col-x` grid items will form -// an irregular layout of 2 items in the first row and 1 item in the second -// row. The `__col-4` is a "hidden" item that does not appear on the -// large-screen 3-column grid, but is a 1-column wide grid item spanning -// column 2 on tablet screens. -// - `.layout-3col__col-x` : 1-column wide grid item spanning column 1; when -// several of these are used inside a `.layout-3col__grid-item-container` or -// `.layout-3col`, the first one is positioned like `__col-1`, the -// second like `__col-2`, etc. -// -// There are 2 ways to do a nested grid: -// 1. Place a grid container div inside a grid item. Just apply the normal -// classes to the nested grid container and its grid items. -// 2. The grid item's div is also the grid container for the nested grid. In -// this case, the `.layout3-col__grid-item-container` class should be added -// to the div to ensure its nested grid items align with the parent grid. -// -// Markup: layout-3col.twig -// -// Style guide: layouts.layout-3col - -.layout-3col, -%layout-3col { - // We set the context to flow, so that this container can be used in most - // places in the HTML, i.e. it must be nested inside something that has - // padding. - @include zen-grid-container($context: flow); - - &__full, - &__left-content, - &__right-content, - &__left-sidebar, - &__right-sidebar, - &__first-left-sidebar, - &__second-left-sidebar, - &__col-1, - &__col-2, - &__col-3, - &__col-4, - &__col-x { - @include zen-new-row(both); - @include zen-grid-item-base(); - @include zen-grid-item(1, 1); - } - - @include zen-respond-to(m) { - // Since our container's context is "flow" and we changed the gutter size, - // we need to re-apply the container's negative left/right margins. - @include zen-grid-container($context: flow); - - &__full, - &__left-content, - &__right-content, - &__left-sidebar, - &__right-sidebar { - @include zen-grid-item(2, 1); - // Since we changed the gutter size for this media query, we need to - // re-apply the padding to every grid item. - @include zen-apply-gutter-padding(); - } - - &__first-left-sidebar, - &__col-1, - &__col-3, - &__col-x:nth-child(2n + 1) { - @include zen-grid-item(1, 1); - @include zen-apply-gutter-padding(); - } - - &__second-left-sidebar, - &__col-2, - &__col-4, - &__col-x:nth-child(2n) { - // Since this inherits from the mobile layout, we have to explicitly turn - // off the new-row mixin. - @include zen-new-row(none); - @include zen-grid-item(1, 2); - @include zen-apply-gutter-padding(); - } - } - - @include zen-respond-to(xl) { - &__full { - @include zen-grid-item(3, 1); - } - - &__left-content { - @include zen-grid-item(2, 1); - } - - &__right-content { - @include zen-grid-item(2, 2); - } - - &__left-sidebar, - &__first-left-sidebar, - &__second-left-sidebar { - @include zen-new-row(right); - @include zen-grid-item(1, 3, right); - } - - &__right-sidebar { - @include zen-new-row(right); - @include zen-grid-item(1, 1, right); - } - - &__col-1, - &__col-x:nth-child(3n+1) { - @include zen-new-row(both); - @include zen-grid-item(1, 1); - } - - &__col-2, - &__col-x:nth-child(3n+2) { - @include zen-new-row(none); - @include zen-grid-item(1, 2); - } - - &__col-3, - &__col-x:nth-child(3n) { - @include zen-new-row(none); - @include zen-grid-item(1, 3); - } - - &__col-4 { - display: none; - } - } - - // Place last so it can override the padding of grid items. - &__grid-item-container { - @include zen-grid-container($context: grid-item); - } -} diff --git a/STARTERKIT/components/layouts/layout-3col/layout-3col.twig b/STARTERKIT/components/layouts/layout-3col/layout-3col.twig deleted file mode 100644 index 5c90ce7..0000000 --- a/STARTERKIT/components/layouts/layout-3col/layout-3col.twig +++ /dev/null @@ -1,58 +0,0 @@ -
-
- The .layout-3col__full grid item. -
-
- The .layout-3col__left-content grid item. -
-
- The .layout-3col__right-sidebar grid item. -
-
- The .layout-3col__right-content grid item. -
-
- The .layout-3col__left-sidebar grid item. -
-
- The .layout-3col__right-content grid item. -
-
- The .layout-3col__first-left-sidebar grid item. -
-
- The .layout-3col__second-left-sidebar grid item. -
-
- The .layout-3col__col-1 grid item. -
-
- The .layout-3col__col-2 grid item. -
-
- The .layout-3col__col-3 grid item. Don't forget to look for the .layout-3col__col-4 grid item at tablet sizes. -
-
- The .layout-3col__col-4 grid item. -
-
-
- The first .layout-3col__col-x grid item in this nested grid. -
-
- The second .layout-3col__col-x grid item in this nested grid. -
-
- The third .layout-3col__col-x grid item in this nested grid. -
-
- The fourth .layout-3col__col-x grid item in this nested grid. -
-
- The fifth .layout-3col__col-x grid item in this nested grid. -
-
- The sixth .layout-3col__col-x grid item in this nested grid. -
-
-
diff --git a/STARTERKIT/components/layouts/layout-center/_layout-center.scss b/STARTERKIT/components/layouts/layout-center/_layout-center.scss index 846a321..1e32664 100644 --- a/STARTERKIT/components/layouts/layout-center/_layout-center.scss +++ b/STARTERKIT/components/layouts/layout-center/_layout-center.scss @@ -1,64 +1,15 @@ -// Dependencies. -// Allow layout-center's margin/padding to override layout-3col. -@import 'layouts/layout-3col/layout-3col'; - -// Layout Center -// -// All other layouts should be nested inside this centered layout to ensure that -// content does not get too wide on very large screens. -// -// Applying a `.layout-*` class to the same HTML element as `.layout-center` -// would cause that element's grid to mis-align with the rest of the grid on the -// page, but this component will automatically detect the other `.layout-*` -// class and automatically use the `.layout-center--shared-grid` variant -// instead. -// -// .layout-center--shared-grid - If `.layout-center` is applied to the same div -// as another .layout-* class, then this variant should be used to prevent the -// shared layout's grid from mis-aligning. Note: Each time a new .layout-* -// component is created, this component will need to be modified. -// -// Markup: layout-center.twig -// -// Weight: -1 -// -// Style guide: layouts.layout-center - .layout-center, %layout-center { - @include zen-apply-gutter-padding(); + background: susy-svg-grid() no-repeat scroll; + max-width: $mobile; margin: 0 auto; + width: 100%; - // We wrap the max-width declaration with zen-layout() so we can see the value - // of $zen-gutters when it is at the larger "xl"-sized media query. - @include zen-layout(xl) { - // The max content width is 1140px (the container width minus the gutters.) - max-width: 1140px + $zen-gutters; - } - - @include zen-respond-to(m) { - // Since we are using zen-respond-to(), the values in $zen-layouts will - // override the global value for $zen-gutters. - @include zen-apply-gutter-padding(); - } - - // Since .layout-center has overridden the negative margin on another - // .layout-* container, the grid children will be misaligned due to - // .layout-center's gutter padding. So we remove it. - &--shared-grid { - padding-left: 0; - padding-right: 0; - } -} - -// -// Fugly selectors. -// + @include respond-to(tablet) { + max-width: $tablet; + }; -.layout-center { - // Ensure the .layout-center--shared-grid variant is automatically used by - // adding all other .layout-* classes here. - &.layout-3col { - @extend %layout-center--shared-grid; - } + @include respond-to(desktop) { + max-width: $desktop; + }; } diff --git a/STARTERKIT/components/layouts/layout-center/layout-center.json b/STARTERKIT/components/layouts/layout-center/layout-center.json deleted file mode 100644 index 52ac132..0000000 --- a/STARTERKIT/components/layouts/layout-center/layout-center.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "content": "This layout-center component has content that is centered on larger screens." -} diff --git a/STARTERKIT/components/layouts/layout-center/layout-center.twig b/STARTERKIT/components/layouts/layout-center/layout-center.twig deleted file mode 100644 index cc71f16..0000000 --- a/STARTERKIT/components/layouts/layout-center/layout-center.twig +++ /dev/null @@ -1,3 +0,0 @@ -
- {{ content }} -
diff --git a/STARTERKIT/components/layouts/layout-swap/_layout-swap.scss b/STARTERKIT/components/layouts/layout-swap/_layout-swap.scss index 8d68d5e..ffa22a3 100644 --- a/STARTERKIT/components/layouts/layout-swap/_layout-swap.scss +++ b/STARTERKIT/components/layouts/layout-swap/_layout-swap.scss @@ -2,14 +2,6 @@ $layout-swap-height: 2 * $base-line-height; // Layout swap -// -// Uses absolute positioning and selective padding to make 2 elements appear to -// swap places in the visual order while maintaining their original HTML source -// order. -// -// Markup: layout-swap.twig -// -// Style guide: layouts.layout-swap .layout-swap, %layout-swap { diff --git a/STARTERKIT/components/layouts/layout-swap/layout-swap.twig b/STARTERKIT/components/layouts/layout-swap/layout-swap.twig deleted file mode 100644 index a246ec7..0000000 --- a/STARTERKIT/components/layouts/layout-swap/layout-swap.twig +++ /dev/null @@ -1,4 +0,0 @@ -
-
This element comes first in the HTML source order.
-
This element comes second in the HTML source order.
-
diff --git a/STARTERKIT/components/layouts/layouts.scss b/STARTERKIT/components/layouts/layouts.scss index 05a4f24..4901523 100644 --- a/STARTERKIT/components/layouts/layouts.scss +++ b/STARTERKIT/components/layouts/layouts.scss @@ -7,8 +7,4 @@ // // Style guide: layouts -@import 'layout-3col/layout-3col'; @import 'layout-center/layout-center'; -// The layout-swap isn't used in page.html.twig. You may wish to remove it to -// improve front-end performance. -@import 'layout-swap/layout-swap'; diff --git a/STARTERKIT/components/style-guide/kss-only.scss b/STARTERKIT/components/style-guide/kss-only.scss index 288b653..e31ed13 100644 --- a/STARTERKIT/components/style-guide/kss-only.scss +++ b/STARTERKIT/components/style-guide/kss-only.scss @@ -10,13 +10,3 @@ [id^='kssref-layouts-'] [class^='layout-'][class*='__'] { outline: 1px dotted color('grey'); } - -// Because our grids assume a container has some padding, add the standard -// padding to the example wrapper. -#kssref-layouts-layout-3column .kss-modifier__example { - @include zen-apply-gutter-padding(); - - @include zen-respond-to(m) { - @include zen-apply-gutter-padding(); - } -} diff --git a/STARTERKIT/package.json b/STARTERKIT/package.json index 68a6d55..987c94e 100644 --- a/STARTERKIT/package.json +++ b/STARTERKIT/package.json @@ -26,8 +26,8 @@ "node-sass-import-once": "^1.2.0", "sass-lint": "^1.7.0", "support-for": "^1.0.6", - "typey": "^1.0.0", - "zen-grids": "^2.0.3" + "susy": "^3.0.0", + "typey": "^1.0.0" }, "engines": { "node": ">=4.0.0" diff --git a/STARTERKIT/styleguide/index.html b/STARTERKIT/styleguide/index.html index 3181d00..84d1cad 100644 --- a/STARTERKIT/styleguide/index.html +++ b/STARTERKIT/styleguide/index.html @@ -9,43 +9,43 @@ - - - - + + + + + + + + + - - - - - - - - - - - - - - + + + + + + + + + - +
@@ -93,47 +93,80 @@

STARTERKIT Style Guide

-
-

Style Guide for the STARTERKIT Theme

-

This style guide documents the designs of this website which are built with component-based styles and Sass variables, functions and mixins. To ensure it is always up-to-date, this style guide is automatically generated from comments in the Sass files.

+
+

Style Guide for the STARTERKIT Theme

+

This style guide documents the designs of this website which are built +with component-based styles and Sass variables, functions and mixins. +To ensure it is always up-to-date, this style guide is automatically +generated from comments in the Sass files.

Organization

-

Design components are reusable designs that can be applied using just the CSS class names specified in the component. We categorize our components to make them easy to find.

+

Design components are reusable designs that can be applied using just +the CSS class names specified in the component. We categorize our +components to make them easy to find.

Defaults
-
components/base — The default “base” components apply to HTML elements. Since all of the rulesets in this class of styles are HTML elements, the styles apply automatically.
+
components/base — The default “base” components apply to HTML +elements. Since all of the rulesets in this class of styles are HTML +elements, the styles apply automatically.
Layouts
-
components/layouts — Layout components position major chunks of the page. They just apply positioning, no other styles.
+
components/layouts — Layout components position major chunks of +the page. They just apply positioning, no other styles.
Components
-
components/components — Miscellaneous components are grouped together, but feel free to further categorize these.
+
components/components — Miscellaneous components are grouped +together, but feel free to further categorize these.
Navigation
-
components/navigation — Navigation components are specialized design components that are applied to website navigation.
+
components/navigation — Navigation components are specialized +design components that are applied to website navigation.
Forms
-
components/forms — Form components are specialized design components that are applied to forms or form elements.
+
components/forms — Form components are specialized design +components that are applied to forms or form elements.
-

In addition to the components, our component library also contains these folders:

+

In addition to the components, our component library also contains +these folders:

Colors and Sass
-
components/init — This Sass documents the colors used throughout the site and various Sass variables, functions and mixins. It also initializes everything we need for all other Sass files: variables, 3rd-party libraries, custom mixins and custom functions.
+
components/init — This Sass documents the colors used throughout +the site and various Sass variables, functions and mixins. It also +initializes everything we need for all other Sass files: variables, +3rd-party libraries, custom mixins and custom functions.
Style guide helper files
-
components/style-guide — files needed to build this automated style guide; includes some CSS overrides for the default KSS style guide
+
components/style-guide — files needed to build this automated +style guide; includes some CSS overrides for the default KSS style +guide
Generated files
-
components/asset-builds — location of the generated CSS; don't alter these files
+
components/asset-builds — location of the generated CSS; don't +alter these files
-
-
+ + + + + diff --git a/STARTERKIT/styleguide/kss-assets/kss.css b/STARTERKIT/styleguide/kss-assets/kss.css index 55280dd..ec4c362 100644 --- a/STARTERKIT/styleguide/kss-assets/kss.css +++ b/STARTERKIT/styleguide/kss-assets/kss.css @@ -1 +1 @@ -.kss-style{color:#444;font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:24px}.kss-style a{color:#0645ad;text-decoration:none;transition-property:color;transition-duration:0.5s}.kss-style a:visited{color:#0645ad}.kss-style a:hover,.kss-style a:focus{color:#2272f7}.kss-style a:active{color:#faa700}.kss-style a:hover,.kss-style a:active{outline:0}.kss-style p{margin:12px 0 24px 0}.kss-style h1,.kss-style h2,.kss-style h3,.kss-style h4,.kss-style h5,.kss-style h6{margin:24px 0 0 0;font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;color:#111;line-height:1.15em}.kss-style h4,.kss-style h5,.kss-style h6{font-weight:bold}.kss-style h1{font-size:40px}.kss-style h2{font-size:36px}.kss-style h3{font-size:34px}.kss-style h4{font-size:32px}.kss-style h5{font-size:30px}.kss-style h6{font-size:28px}.kss-style blockquote{color:#666;margin:0;padding-left:24px;border-left:0.5em #d9d9d9 solid}.kss-style hr{display:block;height:2px;border:0;border-top:1px solid #ddd;border-bottom:1px solid #e6e6e6;margin:24px 0;padding:0}.kss-style pre,.kss-style code,.kss-style kbd,.kss-style samp{font-family:Menlo,"Ubuntu Mono","Lucida Console","Courier New",Courier,monospace;color:#2b2b2b;font-size:1em}.kss-style pre{white-space:pre;overflow:scroll}.kss-style ins{color:#111;background:#ff9;text-decoration:none}.kss-style mark{color:#111;background:#ff0;font-weight:bold}.kss-style sub,.kss-style sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}.kss-style sup{top:-0.5em}.kss-style sub{bottom:-0.25em}.kss-style ul,.kss-style ol{margin:24px 0;padding:0 0 0 24px}.kss-style li p:last-child{margin:0}.kss-style dd{margin:0 0 0 24px}.kss-style img{max-width:100%;border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}.kss-style table{border-collapse:collapse;border-spacing:0}.kss-style td{vertical-align:top}@media print{.kss-style a,.kss-style a:visited{text-decoration:underline}.kss-style hr{height:1px;border:0;border-bottom:1px solid black}.kss-style a[href]:after{content:" (" attr(href) ")"}.kss-style a[href^="javascript:"]:after,.kss-style a[href^="#"]:after{content:""}.kss-style abbr[title]:after{content:" (" attr(title) ")"}.kss-style pre,.kss-style blockquote{border:1px solid #999;padding-right:1em;page-break-inside:avoid}.kss-style tr,.kss-style img{page-break-inside:avoid}.kss-style img{max-width:100% !important}.kss-style p,.kss-style h2,.kss-style h3{orphans:3;widows:3}.kss-style h2,.kss-style h3{page-break-after:avoid}}#kss-node{margin:0;padding:20px;background:#fff}@media screen and (min-width: 769px){#kss-node{padding:0;background:#fff}#kss-node .kss-main,#kss-node .kss-sidebar{float:left;margin-right:-100%;box-sizing:border-box}}#kss-node .kss-main{width:100%;margin:0 auto}@media screen and (min-width: 769px){#kss-node .kss-main{width:80%;margin-left:20%;padding:0 20px 0 30px}}#kss-node .kss-sidebar{border-bottom:1px solid #ddd}@media screen and (min-width: 769px){#kss-node .kss-sidebar{position:fixed;width:20%;height:100%;overflow:auto;padding:0 10px 0 20px;border-bottom:0;background-image:url(noise-low.png),-ms-radial-gradient(#fff, #eee);background-image:url(noise-low.png),-o-radial-gradient(#fff, #eee);background-image:url(noise-low.png),-webkit-radial-gradient(#fff, #eee);background-image:url(noise-low.png),radial-gradient(#fff, #eee);box-shadow:inset -10px 0 10px -10px rgba(0,0,0,0.7)}}#kss-node .kss-doc-title{margin:0}@media screen and (min-width: 769px){#kss-node .kss-doc-title{font-size:1.5em}}@media screen and (min-width: 769px){#kss-node .kss-header,#kss-node .kss-nav{margin-top:2em}}#kss-node .kss-nav__menu{margin-top:12px;margin-bottom:12px;padding:0;list-style-type:none}#kss-node .kss-nav__menu-item{display:inline-block;padding-right:24px}@media screen and (min-width: 769px){#kss-node .kss-nav__menu-item{display:list-item;padding-right:0}}#kss-node .kss-nav__menu-link{position:relative;display:inline-block}@media screen and (min-width: 769px){#kss-node .kss-nav__menu-link:before{content:' ';position:absolute;left:-20px;width:0;height:100%;background-color:transparent}}#kss-node .kss-nav__menu-link.is-in-viewport:before{background-color:#000;width:5px;transition:background-color .4s, width .6s}#kss-node .kss-nav__menu-child{display:none}@media screen and (min-width: 769px){#kss-node .kss-nav__menu-child{display:block;list-style-type:none;margin:0;padding:0}#kss-node .kss-nav__menu-child li:first-child{margin-top:10px;border-top:1px solid #ccc;padding:10px 0 0}#kss-node .kss-nav__menu-child li:last-child{margin-bottom:10px;border-bottom:1px solid #ccc;padding:0 0 10px}}#kss-node .kss-nav__ref{color:#333;font-weight:bold}#kss-node .kss-nav__ref:after{content:' '}#kss-node .kss-nav__ref-child{font-weight:normal}#kss-node .kss-section{max-width:48em;margin-bottom:48px}#kss-node .kss-title{margin-bottom:0}#kss-node .kss-title__ref{display:block;font-size:16px;line-height:16px;color:#666}#kss-node .kss-title__ref:before{content:'Section '}#kss-node .kss-title__permalink{display:block;color:#000;text-decoration:none}#kss-node .kss-title__permalink:hover,#kss-node .kss-title__permalink:focus,#kss-node .kss-title__permalink:active{color:#0645ad}@media screen and (min-width: 607px){#kss-node .kss-title__permalink:hover .kss-title__permalink-hash,#kss-node .kss-title__permalink:focus .kss-title__permalink-hash,#kss-node .kss-title__permalink:active .kss-title__permalink-hash{display:inline}}#kss-node .kss-title__permalink-hash{display:none;color:#ccc}#kss-node .kss-parameters{display:table;list-style-type:none;margin-top:0;margin-left:0;padding-left:0}#kss-node .kss-parameters__title{font-weight:bold}#kss-node .kss-parameters__item{display:table-row}#kss-node .kss-parameters__name{display:table-cell;padding-right:20px;white-space:nowrap}#kss-node .kss-parameters__description{display:table-cell}#kss-node .kss-parameters__default-value code{white-space:nowrap}#kss-node .kss-modifier__wrapper{border:1px solid #ccc;padding:10px}#kss-node .kss-modifier__heading{margin:-10px -10px 10px -10px;padding:10px;border-bottom:1px solid #ccc;background-color:#eee;font-weight:bold}#kss-node .kss-modifier__default-name{font-weight:bold;margin-bottom:12px}#kss-node .kss-modifier__name{float:left;padding-right:10px;font-weight:bold}#kss-node .kss-modifier__description{margin-bottom:12px}#kss-node .kss-modifier__example{clear:left;padding:1px 0;position:relative;margin:0 0 23px 0}#kss-node .kss-modifier__example:last-child{margin:0}#kss-node .kss-markup{margin:-1px 0 24px 0;border:1px solid #999}#kss-node .kss-markup pre{margin:0}#kss-node .kss-source{font-size:80%}#kss-node .kss-github{display:none}@media screen and (min-width: 501px){#kss-node .kss-github{display:block;position:absolute;top:0;right:0}}#kss-node .kss-github img{border:0}#kss-node .pln{color:#000}#kss-node .str{color:#080}#kss-node .kwd{color:#008}#kss-node .com{color:#800}#kss-node .typ{color:#606}#kss-node .lit{color:#066}#kss-node .pun,#kss-node .opn,#kss-node .clo{color:#660}#kss-node .tag{color:#008}#kss-node .atn{color:#606}#kss-node .atv{color:#080}#kss-node .dec,#kss-node .var{color:#606}#kss-node .fun{color:red}@media print, projection{#kss-node .str{color:#060}#kss-node .kwd{color:#006;font-weight:bold}#kss-node .com{color:#600;font-style:italic}#kss-node .typ{color:#404;font-weight:bold}#kss-node .lit{color:#044}#kss-node .pun,#kss-node .opn,#kss-node .clo{color:#440}#kss-node .tag{color:#006;font-weight:bold}#kss-node .atn{color:#404}#kss-node .atv{color:#060}}#kss-node ol.linenums{margin:0;padding:0 0 3px 0;list-style-type:none}#kss-node ol.linenums li{min-height:24px;border-bottom:1px solid #eee;padding:0 10px;background:#fff}#kss-node ol.linenums li:first-child{padding-top:3px}#kss-node ol.linenums li.L0,#kss-node ol.linenums li.L2,#kss-node ol.linenums li.L4,#kss-node ol.linenums li.L6,#kss-node ol.linenums li.L8{background:#fcfcfc} +.kss-style{color:#444;font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:24px}.kss-style a{color:#0645ad;text-decoration:none;transition-property:color;transition-duration:0.5s}.kss-style a:visited{color:#0645ad}.kss-style a:hover,.kss-style a:focus{color:#2272f7}.kss-style a:active{color:#faa700}.kss-style a:hover,.kss-style a:active{outline:0}.kss-style p{margin:12px 0 24px 0}.kss-style h1,.kss-style h2,.kss-style h3,.kss-style h4,.kss-style h5,.kss-style h6{margin:24px 0 0 0;font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;color:#111;line-height:1.15em}.kss-style h4,.kss-style h5,.kss-style h6{font-weight:bold}.kss-style h1{font-size:40px}.kss-style h2{font-size:36px}.kss-style h3{font-size:34px}.kss-style h4{font-size:32px}.kss-style h5{font-size:30px}.kss-style h6{font-size:28px}.kss-style blockquote{color:#666;margin:0;padding-left:24px;border-left:0.5em #d9d9d9 solid}.kss-style hr{display:block;height:2px;border:0;border-top:1px solid #ddd;border-bottom:1px solid #e6e6e6;margin:24px 0;padding:0}.kss-style pre,.kss-style code,.kss-style kbd,.kss-style samp{font-family:Menlo,"Ubuntu Mono","Lucida Console","Courier New",Courier,monospace;color:#2b2b2b;font-size:1em}.kss-style pre{white-space:pre;overflow:scroll}.kss-style ins{color:#111;background:#ff9;text-decoration:none}.kss-style mark{color:#111;background:#ff0;font-weight:bold}.kss-style sub,.kss-style sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}.kss-style sup{top:-0.5em}.kss-style sub{bottom:-0.25em}.kss-style ul,.kss-style ol{margin:24px 0;padding:0 0 0 24px}.kss-style li p:last-child{margin:0}.kss-style dd{margin:0 0 0 24px}.kss-style img{max-width:100%;border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}.kss-style table{border-collapse:collapse;border-spacing:0}.kss-style td{vertical-align:top}@media print{.kss-style a,.kss-style a:visited{text-decoration:underline}.kss-style hr{height:1px;border:0;border-bottom:1px solid black}.kss-style a[href]:after{content:" (" attr(href) ")"}.kss-style a[href^="javascript:"]:after,.kss-style a[href^="#"]:after{content:""}.kss-style abbr[title]:after{content:" (" attr(title) ")"}.kss-style pre,.kss-style blockquote{border:1px solid #999;padding-right:1em;page-break-inside:avoid}.kss-style tr,.kss-style img{page-break-inside:avoid}.kss-style img{max-width:100% !important}.kss-style p,.kss-style h2,.kss-style h3{orphans:3;widows:3}.kss-style h2,.kss-style h3{page-break-after:avoid}}#kss-node{margin:0;padding:20px;background:#fff}#kss-node.kss-fullscreen-mode .kss-sidebar,#kss-node.kss-fullscreen-mode .kss-section:not(.is-fullscreen),#kss-node.kss-fullscreen-mode .kss-github{display:none}@media screen and (min-width: 769px){#kss-node{padding:0}#kss-node .kss-main,#kss-node .kss-sidebar{float:left;margin-right:-100%;box-sizing:border-box}}#kss-node .kss-main{width:100%;margin:0 auto}@media screen and (min-width: 769px){#kss-node .kss-main{width:80%;margin-left:20%;padding:0 20px 0 30px}}#kss-node .kss-sidebar{border-bottom:1px solid #ddd}@media screen and (min-width: 769px){#kss-node .kss-sidebar{position:fixed;width:20%;height:100%;overflow:auto;padding:0 10px 0 20px;border-bottom:0;background-image:url(noise-low.png),-ms-radial-gradient(#fff, #eee);background-image:url(noise-low.png),-o-radial-gradient(#fff, #eee);background-image:url(noise-low.png),-webkit-radial-gradient(#fff, #eee);background-image:url(noise-low.png),radial-gradient(#fff, #eee);box-shadow:inset -10px 0 10px -10px rgba(0,0,0,0.7)}}#kss-node .kss-doc-title{margin:0}@media screen and (min-width: 769px){#kss-node .kss-doc-title{font-size:1.5em}}@media screen and (min-width: 769px){#kss-node .kss-header,#kss-node .kss-nav{margin-top:2em}}#kss-node .kss-nav__menu{margin-top:12px;margin-bottom:12px;padding:0;list-style-type:none}#kss-node .kss-nav__menu-item{display:inline-block;padding-right:24px}@media screen and (min-width: 769px){#kss-node .kss-nav__menu-item{display:list-item;padding-right:0}}#kss-node .kss-nav__menu-link{position:relative;display:inline-block}@media screen and (min-width: 769px){#kss-node .kss-nav__menu-link:before{content:' ';position:absolute;left:-20px;width:0;height:100%;background-color:transparent}}#kss-node .kss-nav__menu-link.is-in-viewport:before{background-color:#000;width:5px;transition:background-color .4s, width .6s}#kss-node .kss-nav__menu-child{display:none}@media screen and (min-width: 769px){#kss-node .kss-nav__menu-child{display:block;list-style-type:none;margin:0;padding:0}#kss-node .kss-nav__menu-child li:first-child{margin-top:10px;border-top:1px solid #ccc;padding:10px 0 0}#kss-node .kss-nav__menu-child li:last-child{margin-bottom:10px;border-bottom:1px solid #ccc;padding:0 0 10px}}#kss-node .kss-nav__ref{color:#333;font-weight:bold}#kss-node .kss-nav__ref:after{content:' '}#kss-node .kss-nav__ref-child{font-weight:normal}#kss-node .kss-section{margin-bottom:48px}#kss-node .kss-section.is-fullscreen{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;height:100% !important;margin:0 !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;box-sizing:border-box !important;object-fit:contain !important;transform:none !important;overflow:auto !important;padding:20px}#kss-node .kss-title{margin-bottom:0}#kss-node .is-fullscreen .kss-title{margin-top:0}#kss-node .kss-title__ref{display:block;font-size:16px;line-height:16px;color:#666}#kss-node .kss-title__ref:before{content:'Section '}#kss-node .kss-title__permalink{display:block;color:#000;text-decoration:none}#kss-node .kss-title__permalink:hover,#kss-node .kss-title__permalink:focus,#kss-node .kss-title__permalink:active{color:#0645ad}@media screen and (min-width: 607px){#kss-node .kss-title__permalink:hover .kss-title__permalink-hash,#kss-node .kss-title__permalink:focus .kss-title__permalink-hash,#kss-node .kss-title__permalink:active .kss-title__permalink-hash{display:inline}}#kss-node .kss-title__permalink-hash{display:none;color:#ccc}#kss-node .kss-toolbar{margin:6px 0 24px;display:inline-block;border:1px solid #eee;background-color:#f9f9f9;border-right-color:#e0e0e0;border-bottom-color:#e0e0e0;line-height:1;padding:3px}#kss-node .kss-toolbar a{box-sizing:content-box;display:inline-block;width:16px;height:16px;padding:3px;vertical-align:top;position:relative;overflow:visible}#kss-node .kss-toolbar a+a{margin-left:6px}#kss-node .kss-toolbar a .kss-toolbar__icon-fill{fill:#ccc}#kss-node .kss-toolbar a svg.on{display:none}#kss-node .kss-toolbar a:focus,#kss-node .kss-toolbar a:hover{border-color:#000}#kss-node .kss-toolbar a:focus .kss-toolbar__icon-fill,#kss-node .kss-toolbar a:hover .kss-toolbar__icon-fill{fill:#000}#kss-node .kss-toolbar__tooltip{position:absolute;z-index:1;display:inline-block;bottom:100%;left:-10px;margin-bottom:5px;border:solid 1px #666;padding:8px 10px 6px;box-shadow:2px 2px 2px rgba(0,0,0,0.25);white-space:nowrap;color:#000;background:#fff;cursor:help;opacity:0;transition:opacity 0.25s;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);word-wrap:normal}#kss-node .kss-toolbar__tooltip:before,#kss-node .kss-toolbar__tooltip:after{content:'';position:absolute;bottom:-8px;left:15px;width:0;height:0;border-width:7px 5px 0;border-color:#666 transparent;border-style:solid}#kss-node .kss-toolbar__tooltip:after{bottom:-6px;border-top-color:#fff}#kss-node a:focus>.kss-toolbar__tooltip,#kss-node a:hover>.kss-toolbar__tooltip{opacity:1;clip:auto;height:auto;width:auto;overflow:visible}#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen],#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides],#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup]{border-color:#666;background-color:#666}#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] .kss-toolbar__icon-fill,#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] .kss-toolbar__icon-fill,#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] .kss-toolbar__icon-fill{fill:#fff}#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.on,#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.on,#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.on{display:block}#kss-node .is-fullscreen .kss-toolbar a[data-kss-fullscreen] svg.off,#kss-node.kss-guides-mode .kss-toolbar a[data-kss-guides] svg.off,#kss-node.kss-markup-mode .kss-toolbar a[data-kss-markup] svg.off{display:none}#kss-node .kss-parameters{display:table;list-style-type:none;margin-top:0;margin-left:0;padding-left:0}#kss-node .kss-parameters__title{font-weight:bold}#kss-node .kss-parameters__item{display:table-row}#kss-node .kss-parameters__name{display:table-cell;padding-right:20px;white-space:nowrap}#kss-node .kss-parameters__description{display:table-cell}#kss-node .kss-parameters__default-value code{white-space:nowrap}#kss-node .kss-modifier__wrapper{border:1px solid #ccc;padding:0 10px 10px}#kss-node .is-fullscreen .kss-modifier__wrapper{margin-left:-20px;margin-right:-20px;padding-left:0;padding-right:0;border:none}#kss-node .kss-modifier__heading{margin:0 -10px 10px -10px;padding:10px;border-bottom:1px solid #ccc;background-color:#eee;font-weight:bold}#kss-node .is-fullscreen .kss-modifier__heading{margin:0 20px 10px;border:1px solid #ccc}#kss-node .kss-modifier__default-name{font-weight:bold;margin-bottom:12px}#kss-node .is-fullscreen .kss-modifier__default-name{margin-left:20px;margin-right:20px}#kss-node .kss-modifier__name{float:left;padding-right:10px;font-weight:bold}#kss-node .is-fullscreen .kss-modifier__name{margin-left:20px}#kss-node .kss-modifier__description{margin-bottom:12px}#kss-node .is-fullscreen .kss-modifier__description{margin-right:20px}#kss-node .kss-modifier__example{clear:left;border:2px dashed transparent;position:relative;z-index:0;margin:-2px -2px 22px}#kss-node .kss-modifier__example:last-child{margin-bottom:0}#kss-node.kss-guides-mode .kss-modifier__example:before,#kss-node.kss-guides-mode .kss-modifier__example:after,#kss-node.kss-guides-mode .kss-modifier__example-footer:before,#kss-node.kss-guides-mode .kss-modifier__example-footer:after{z-index:-1;box-sizing:border-box;content:'';position:absolute;width:5px;height:5px;border:2px solid #000}#kss-node.kss-guides-mode .kss-modifier__example{border-color:#000}#kss-node.kss-guides-mode .kss-modifier__example:before{top:-5px;left:-5px;border-top:0;border-left:0}#kss-node.kss-guides-mode .kss-modifier__example:after{top:-5px;right:-5px;border-top:0;border-right:0}#kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:before{left:auto;right:0}#kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:after{right:auto;left:0}#kss-node .kss-modifier__example-footer{clear:both}#kss-node.kss-guides-mode .kss-modifier__example-footer:before{bottom:-5px;left:-5px;border-bottom:0;border-left:0}#kss-node.kss-guides-mode .kss-modifier__example-footer:after{bottom:-5px;right:-5px;border-right:0;border-bottom:0}#kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:before{left:auto;right:0}#kss-node.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer:after{right:auto;left:0}#kss-node .kss-markup{margin:24px 0;border:1px solid #ccc}#kss-node .kss-markup[open] summary{border-bottom:1px solid #ccc;margin-bottom:3px}#kss-node .kss-markup summary{padding-left:10px}#kss-node .kss-markup pre{margin:0}#kss-node .kss-source{font-size:80%}#kss-node .kss-github{display:none}@media screen and (min-width: 501px){#kss-node .kss-github{display:block;position:absolute;top:0;right:0}}#kss-node .kss-github img{border:0}#kss-node .pln{color:#000}#kss-node .str{color:#080}#kss-node .kwd{color:#008}#kss-node .com{color:#800}#kss-node .typ{color:#606}#kss-node .lit{color:#066}#kss-node .pun,#kss-node .opn,#kss-node .clo{color:#660}#kss-node .tag{color:#008}#kss-node .atn{color:#606}#kss-node .atv{color:#080}#kss-node .dec,#kss-node .var{color:#606}#kss-node .fun{color:red}@media print, projection{#kss-node .str{color:#060}#kss-node .kwd{color:#006;font-weight:bold}#kss-node .com{color:#600;font-style:italic}#kss-node .typ{color:#404;font-weight:bold}#kss-node .lit{color:#044}#kss-node .pun,#kss-node .opn,#kss-node .clo{color:#440}#kss-node .tag{color:#006;font-weight:bold}#kss-node .atn{color:#404}#kss-node .atv{color:#060}}#kss-node ol.linenums{margin:0;padding:0 0 3px 0;list-style-type:none}#kss-node ol.linenums li{min-height:24px;border-bottom:1px solid #eee;padding:0 10px;background:#fff}#kss-node ol.linenums li:first-child{padding-top:3px}#kss-node ol.linenums li.L0,#kss-node ol.linenums li.L2,#kss-node ol.linenums li.L4,#kss-node ol.linenums li.L6,#kss-node ol.linenums li.L8{background:#fcfcfc} diff --git a/STARTERKIT/styleguide/kss-assets/kss.scss b/STARTERKIT/styleguide/kss-assets/kss.scss index 06caae6..7e791ea 100644 --- a/STARTERKIT/styleguide/kss-assets/kss.scss +++ b/STARTERKIT/styleguide/kss-assets/kss.scss @@ -165,9 +165,16 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; padding: 20px; background: #fff; + &.kss-fullscreen-mode { + .kss-sidebar, + .kss-section:not(.is-fullscreen), + .kss-github { + display: none; + } + } + @media screen and (min-width: 769px) { padding: 0; - background: #fff; .kss-main, .kss-sidebar { @@ -312,13 +319,37 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; #kss-node { .kss-section { - max-width: 48em; margin-bottom: ($kss-vertical-rhythm * 2); + + // "fullscreen" styles copied from Mozilla's default stylesheet. + &.is-fullscreen { + position: fixed !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + width: 100% !important; + height: 100% !important; + margin: 0 !important; + min-width: 0 !important; + max-width: none !important; + min-height: 0 !important; + max-height: none !important; + box-sizing: border-box !important; + object-fit: contain !important; + transform: none !important; + // Turn on scrolling if needed. + overflow: auto !important; + padding: 20px; + } } .kss-title { margin-bottom: 0; } + .is-fullscreen .kss-title { + margin-top: 0; + } .kss-title__ref { display: block; font-size: $kss-font-size; @@ -351,6 +382,122 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; color: #ccc; } + .kss-toolbar { + margin: 6px 0 24px; + display: inline-block; + border: 1px solid #eee; + background-color: #f9f9f9; + border-right-color: #e0e0e0; + border-bottom-color: #e0e0e0; + line-height: 1; + padding: 3px; + + a { + box-sizing: content-box; + display: inline-block; + width: 16px; + height: 16px; + padding: 3px; + vertical-align: top; + // Tooltip wrapper styles: + position: relative; + overflow: visible; + + + a { + margin-left: 6px; + } + + .kss-toolbar__icon-fill { + fill: #ccc; + } + + svg.on { + display: none; + } + + &:focus, + &:hover { + border-color: #000; + + .kss-toolbar__icon-fill { + fill: #000; + } + } + } + } + .kss-toolbar__tooltip { + position: absolute; + z-index: 1; + display: inline-block; + bottom: 100%; + left: -10px; + margin-bottom: 5px; + border: solid 1px #666; + padding: 8px 10px 6px; + box-shadow: 2px 2px 2px rgba(0, 0, 0, .25); + white-space: nowrap; + color: #000; + background: #fff; + cursor: help; + opacity: 0; + transition: opacity 0.25s; + // Visually hidden + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + word-wrap: normal; + + // Solid grey triangle. + &:before, + &:after { + content: ''; + position: absolute; + bottom: -8px; + left: 15px; + width: 0; + height: 0; + border-width: 7px 5px 0; + border-color: #666 transparent; + border-style: solid; + } + + // White triangle knock-out. + &:after { + bottom: -6px; + border-top-color: #fff; + } + } + a:focus, + a:hover { + > .kss-toolbar__tooltip { + opacity: 1; + // Visually hidden off + clip: auto; + height: auto; + width: auto; + overflow: visible; + } + } + .is-fullscreen .kss-toolbar a[data-kss-fullscreen], + &.kss-guides-mode .kss-toolbar a[data-kss-guides], + &.kss-markup-mode .kss-toolbar a[data-kss-markup] { + border-color: #666; + background-color: #666; + + .kss-toolbar__icon-fill { + fill: #fff; + } + + svg.on { + display: block; + } + + svg.off { + display: none; + } + } + .kss-parameters { display: table; list-style-type: none; @@ -378,44 +525,144 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; .kss-modifier__wrapper { border: 1px solid #ccc; - padding: 10px; + padding: 0 10px 10px; + } + .is-fullscreen .kss-modifier__wrapper { + // Un-do padding on .kss-section. + margin-left: -20px; + margin-right: -20px; + // Remove all padding on the wrapper + padding-left: 0; + padding-right: 0; + border: none; } .kss-modifier__heading { - margin: -10px -10px 10px -10px; + margin: 0 -10px 10px -10px; padding: 10px; border-bottom: 1px solid #ccc; background-color: #eee; font-weight: bold; } + .is-fullscreen .kss-modifier__heading { + margin: 0 20px 10px; + border: 1px solid #ccc; + } .kss-modifier__default-name { font-weight: bold; margin-bottom: ($kss-vertical-rhythm / 2); } + .is-fullscreen .kss-modifier__default-name { + margin-left: 20px; + margin-right: 20px; + } .kss-modifier__name { float: left; padding-right: 10px; font-weight: bold; } + .is-fullscreen .kss-modifier__name { + margin-left: 20px; + } .kss-modifier__description { margin-bottom: ($kss-vertical-rhythm / 2); } + .is-fullscreen .kss-modifier__description { + margin-right: 20px; + } .kss-modifier__example { clear: left; - padding: 1px 0; // Contain the example's margins. + border: 2px dashed transparent; position: relative; // Contain the example's absolute positioning. - margin: 0 0 ($kss-vertical-rhythm - 1px) 0; + z-index: 0; // Establishes a local stacking context. + margin: -2px -2px ($kss-vertical-rhythm - 2px); &:last-child { - margin: 0; + margin-bottom: 0; + } + } + &.kss-guides-mode .kss-modifier__example, + &.kss-guides-mode .kss-modifier__example-footer { + &:before, + &:after { + z-index: -1; + box-sizing: border-box; + content: ''; + position: absolute; + width: 5px; + height: 5px; + border: 2px solid #000; } } + &.kss-guides-mode .kss-modifier__example { + border-color: #000; - .kss-markup { - margin: -1px 0 $kss-vertical-rhythm 0; - border: 1px solid #999; + &:before { + top: -5px; + left: -5px; + border-top: 0; + border-left: 0; + } + &:after { + top: -5px; + right: -5px; + border-top: 0; + border-right: 0; + } } - .kss-markup pre { - margin: 0; + &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example { + &:before { + left: auto; + right: 0; + } + &:after { + right: auto; + left: 0; + } + } + .kss-modifier__example-footer { + clear: both; + } + &.kss-guides-mode .kss-modifier__example-footer { + &:before { + bottom: -5px; + left: -5px; + border-bottom: 0; + border-left: 0; + } + &:after { + bottom: -5px; + right: -5px; + border-right: 0; + border-bottom: 0; + } + } + &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer { + &:before { + left: auto; + right: 0; + } + &:after { + right: auto; + left: 0; + } + } + + .kss-markup { + margin: $kss-vertical-rhythm 0; + border: 1px solid #ccc; + + &[open] summary { + border-bottom: 1px solid #ccc; + margin-bottom: 3px; + } + + summary { + padding-left: 10px; + } + + pre { + margin: 0; + } } .kss-source { @@ -438,9 +685,8 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; } // ------------------------------------------------------------------------------ - // group prettyprint.js styling + // prettify.js styles // ------------------------------------------------------------------------------ - /* Pretty printing styles. Used with prettify.js. */ /* SPAN elements with the classes below are added by prettyprint. */ .pln { color: #000 } /* plain text */ diff --git a/STARTERKIT/styleguide/kss-assets/scrollspy.js b/STARTERKIT/styleguide/kss-assets/scrollspy.js index 2a55c17..0cff71f 100644 --- a/STARTERKIT/styleguide/kss-assets/scrollspy.js +++ b/STARTERKIT/styleguide/kss-assets/scrollspy.js @@ -108,7 +108,8 @@ ScrollSpy.prototype.isInView = function (el) { var winH = this.winH, scrollTop = this.doc.documentElement.scrollTop || this.doc.body.scrollTop, scrollBottom = scrollTop + winH, - elTop = el.offsetTop, + rect = el.getBoundingClientRect(), + elTop = rect.top + scrollTop, elBottom = elTop + el.offsetHeight; return (elTop < scrollBottom) && (elBottom > scrollTop); diff --git a/STARTERKIT/styleguide/section-base.html b/STARTERKIT/styleguide/section-base.html index ba36daa..d6a2ed5 100644 --- a/STARTERKIT/styleguide/section-base.html +++ b/STARTERKIT/styleguide/section-base.html @@ -9,43 +9,43 @@ - - - - + + + + + + + + + - - - - - - - - - - - - - - + + + + + + + + + - +
@@ -271,7 +271,7 @@

STARTERKIT Style Guide

-
+

@@ -285,6 +285,7 @@

+

These are the default base styles applied to HTML elements.

Component classes can override these styles, but if no class applies a style @@ -299,7 +300,7 @@

Source: base/base.scss, line 3

-
+

@@ -313,6 +314,57 @@

+

+ + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

+

All HTML headings, <h1> through <h6>, are available. %h1 through %h6 classes are also available, for when you want to match the font styling of a @@ -354,43 +406,47 @@

Heading Level 5 (h5) with enough text to wrap to another line; Head
Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

+

-
- 
<h1 class="">Heading Level 1 (h1)</h1>
+                  

+            
+                              Markup: base/headings/headings-h.twig
+                          
+            
<h1 class="{{modifier_class}}">Heading Level 1 (h1)</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
-<h2 class="">Heading Level 2 (h2)</h2>
+<h2 class="{{modifier_class}}">Heading Level 2 (h2)</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
-<h3 class="">Heading Level 3 (h3)</h3>
+<h3 class="{{modifier_class}}">Heading Level 3 (h3)</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
-<h4 class="">Heading Level 4 (h4)</h4>
+<h4 class="{{modifier_class}}">Heading Level 4 (h4)</h4>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
-<h5 class="">Heading Level 5 (h5)</h5>
+<h5 class="{{modifier_class}}">Heading Level 5 (h5)</h5>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
-<h6 class="">Heading Level 6 (h6)</h6>
+<h6 class="{{modifier_class}}">Heading Level 6 (h6)</h6>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
 
-<h1 class="">A Heading Level 1 (h1) with enough text to wrap to another line</h1>
+<h1 class="{{modifier_class}}">A Heading Level 1 (h1) with enough text to wrap to another line</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
-<h2 class="">Heading Level 2 (h2) with enough text to wrap to another line; Heading Level 2 (h2) with enough text to wrap to another line</h2>
+<h2 class="{{modifier_class}}">Heading Level 2 (h2) with enough text to wrap to another line; Heading Level 2 (h2) with enough text to wrap to another line</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
-<h3 class="">Heading Level 3 (h3) with enough text to wrap to another line; Heading Level 3 (h3) with enough text to wrap to another line</h3>
+<h3 class="{{modifier_class}}">Heading Level 3 (h3) with enough text to wrap to another line; Heading Level 3 (h3) with enough text to wrap to another line</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
-<h4 class="">Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line</h4>
+<h4 class="{{modifier_class}}">Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line</h4>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
-<h5 class="">Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line</h5>
+<h5 class="{{modifier_class}}">Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line</h5>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
-<h6 class="">Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line</h6>
+<h6 class="{{modifier_class}}">Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line</h6>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
 

-
+
Source: base/headings/_headings.scss, line 1
-
+

@@ -404,6 +460,57 @@

+

+ + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

+

Hyperlinks are used to allow the user to navigate to other resources or to download a resource.

@@ -423,8 +530,9 @@

- This is a link to another web page. + This is a link to another web page. +
@@ -436,6 +544,7 @@

This is a link to another web page. +
:hover @@ -446,6 +555,7 @@

This is a link to another web page. +
:focus @@ -456,6 +566,7 @@

This is a link to another web page. +
:active @@ -466,18 +577,22 @@

This is a link to another web page. +

-
- 
This is a <a href="#" class="[modifier class]">link to another web page</a>.
+                  

+            
+                              Markup: base/links/links-a.twig
+                          
+            
This is a <a href="#" class="{{modifier_class}}">link to another web page</a>.
 

-
+
Source: base/links/_links.scss, line 1

-
+

@@ -492,6 +607,7 @@

+

@@ -499,7 +615,7 @@

Source: base/grouping/_grouping.scss, line 5

-
+

@@ -513,6 +629,57 @@

+

+ + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

+

The default font-size and line-height properties are applied to the <body> element and all paragraphs. In addition, <p> (paragraphs) receive @@ -541,30 +708,34 @@

non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

+

-
- 
<p class="">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
+                  

+            
+                              Markup: base/grouping/grouping-p.twig
+                          
+            
<p class="{{modifier_class}}">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
 penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
 dolor id nibh ultricies vehicula.</p>
 
-<p class="">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
+<p class="{{modifier_class}}">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
 ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis,
 est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
 elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
 
-<p class="">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit
+<p class="{{modifier_class}}">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit
 non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi
 erat porttitor ligula, eget lacinia odio sem nec elit.</p>
 

-
+
- Source: base/grouping/_grouping.scss, line 155 + Source: base/grouping/_grouping.scss, line 146
-
+

@@ -579,6 +750,7 @@

+

@@ -586,7 +758,7 @@

Source: base/grouping/_grouping.scss, line 32

-
+

@@ -600,6 +772,57 @@

+

+ + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

+

The <ol> element is a list of items in which the order does explicitly matter.

@@ -632,17 +855,21 @@

  • Eget porttitor lorem
    • +

    -
    - 
    <ol class="">
+                  
    
+            
+                              Markup: base/grouping/grouping-ol.twig
+                          
+            
    <ol class="{{modifier_class}}">
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetur adipiscing elit</li>
   <li>Integer molestie lorem at massa</li>
   <li>Facilisis in pretium nisl aliquet</li>
   <li>Nulla volutpat aliquam velit
-    <ol class="">
+    <ol class="{{modifier_class}}">
       <li>Phasellus iaculis neque</li>
       <li>Purus sodales ultricies</li>
       <li>Vestibulum laoreet porttitor sem</li>
@@ -654,13 +881,13 @@ 
    
   <li>Eget porttitor lorem</li>
 </ol>
 
    
-
    +
    Source: base/grouping/_grouping.scss, line 47
    -
    +

    @@ -674,6 +901,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <ul> element is a list of items in which the order does not explicitly matter.

    @@ -706,17 +984,21 @@

  • Eget porttitor lorem
    • +

    -
    - 
    <ul class="">
+                  
    
+            
+                              Markup: base/grouping/grouping-ul.twig
+                          
+            
    <ul class="{{modifier_class}}">
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetur adipiscing elit</li>
   <li>Integer molestie lorem at massa</li>
   <li>Facilisis in pretium nisl aliquet</li>
   <li>Nulla volutpat aliquam velit
-    <ul class="">
+    <ul class="{{modifier_class}}">
       <li>Phasellus iaculis neque</li>
       <li>Purus sodales ultricies</li>
       <li>Vestibulum laoreet porttitor sem</li>
@@ -728,13 +1010,13 @@ 
    
   <li>Eget porttitor lorem</li>
 </ul>
 
    
-
    +
    Source: base/grouping/_grouping.scss, line 38
    -
    +

    @@ -748,6 +1030,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <dl> element is a list of terms with their associated descriptions.

    @@ -771,11 +1104,15 @@

    Etiam porta sem malesuada magna mollis euismod.
    +

    -
    - 
    <dl class="">
+                  
    
+            
+                              Markup: base/grouping/grouping-dl.twig
+                          
+            
    <dl class="{{modifier_class}}">
   <dt>Description lists</dt>
   <dd>A description list is perfect for defining terms.</dd>
   <dt>Euismod</dt>
@@ -785,13 +1122,13 @@ 
    
   <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
 </dl>
 
    
-
    +
    Source: base/grouping/_grouping.scss, line 56
    -
    +

    @@ -805,6 +1142,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <blockquote> element is for quoting blocks of content from another source within your document. Wrap the <blockquote> around any Title +

    -
    - 
    <blockquote class="">
+                  
    
+            
+                              Markup: base/grouping/grouping-blockquote.twig
+                          
+            
    <blockquote class="{{modifier_class}}">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
   erat a ante.</p>
 </blockquote>
 
-<blockquote class="">
+<blockquote class="{{modifier_class}}">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
   erat a ante.</p>
   <footer>J. Smith in <cite title="Source Title, 2nd Edition">Source
   Title</cite></footer>
 </blockquote>
 
    
-
    +
    Source: base/grouping/_grouping.scss, line 12
    -
    +

    @@ -871,6 +1263,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <figure> element can be used to annotate illustrations, diagrams, photos, code listings, etc.

    @@ -896,26 +1339,30 @@

    Figure 1
    +

    -
    - 
    <figure class="">
+                  
    
+            
+                              Markup: base/grouping/grouping-figure.twig
+                          
+            
    <figure class="{{modifier_class}}">
   An illustration, diagram, photo, code listing, etc.
 </figure>
 
-<figure class="">
+<figure class="{{modifier_class}}">
   An illustration, diagram, photo, code listing, etc.
   <figcaption>Figure 1</figcaption>
 </figure>
 
    
-
    +
    - Source: base/grouping/_grouping.scss, line 115 + Source: base/grouping/_grouping.scss, line 106
    -
    +

    @@ -929,6 +1376,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <hr> element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a @@ -953,26 +1451,30 @@

    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

    +

    -
    +
    + + Markup: base/grouping/grouping-hr.twig + 
    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
 penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
 dolor id nibh ultricies vehicula.</p>
 
-<hr class="">
+<hr class="{{modifier_class}}">
 
 <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
 ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
    -
    +
    - Source: base/grouping/_grouping.scss, line 136 + Source: base/grouping/_grouping.scss, line 127
    -
    +

    @@ -986,6 +1488,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <pre> element represents a block of preformatted text, such as fragments of computer code, ASCII art, etc.

    @@ -1005,22 +1558,26 @@

    (ノ゜Д゜)ノ ︵ ┻━┻ +

    -
    +
    + + Markup: base/grouping/grouping-pre.twig + 
    The following text is preformatted:
-<pre class="">
+<pre class="{{modifier_class}}">
 (ノ゜Д゜)ノ ︵ ┻━┻
 </pre>
    -
    +
    - Source: base/grouping/_grouping.scss, line 173 + Source: base/grouping/_grouping.scss, line 164
    -
    +

    @@ -1034,6 +1591,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <table> element displays tabular data in rows, columns, and cells.

    @@ -1087,11 +1695,15 @@

    +

    -
    - 
    <table class="">
+                  
    
+            
+                              Markup: base/tables/tables-table.twig
+                          
+            
    <table class="{{modifier_class}}">
   <caption>Optional table caption.</caption>
   <thead>
     <tr>
@@ -1131,13 +1743,13 @@ 
    
   </tfoot>
 </table>
 
    
-
    +
    Source: base/tables/_tables.scss, line 1
    -
    +

    @@ -1151,6 +1763,7 @@

    +

    The elements in this section give semantics to inline text.

    @@ -1163,7 +1776,7 @@

    Source: base/text/_text.scss, line 1

    -
    +

    @@ -1177,6 +1790,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <strong> element or the <b> element is for emphasizing a snippet of text with a heavier font-weight.

    @@ -1197,21 +1861,25 @@

    text. Bold text nested inside italic text should still be bold. +

    -
    - 
    The following snippets of text are <strong class="">rendered</strong> as <b class="">bold
+                  
    
+            
+                              Markup: base/text/text-b.twig
+                          
+            
    The following snippets of text are <strong class="{{modifier_class}}">rendered</strong> as <b class="{{modifier_class}}">bold
 text</b>. Bold text nested inside <i>italic text <b>should</b></i> <em>still be
 <strong>bold</strong></em>.
 
    
-
    +
    Source: base/text/_text.scss, line 33
    -
    +

    @@ -1225,6 +1893,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <em> element or the <i> element is used for emphasizing a snippet of text with italics.

    @@ -1245,21 +1964,25 @@

    Italic text nested inside bold text should still be italic. +

    -
    - 
    The following snippets of text are <em class="">rendered</em> as <i class="">italic text</i>.
+                  
    
+            
+                              Markup: base/text/text-i.twig
+                          
+            
    The following snippets of text are <em class="{{modifier_class}}">rendered</em> as <i class="{{modifier_class}}">italic text</i>.
 Italic text nested inside <b>bold text <i>should</i></b> <strong>still be
 <em>italic</em></strong>.
 
    
-
    +
    Source: base/text/_text.scss, line 122
    -
    +

    @@ -1273,6 +1996,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <abbr> element makes the meanings of abbreviations and acronyms visible on hover.

    @@ -1290,20 +2064,24 @@

    An abbreviation of the word attribute is attr. And HTML is an acroynm. +

    -
    - 
    An abbreviation of the word attribute is <abbr class="" title="attribute">attr</abbr>.
-And <abbr class="" title="HyperText Markup Language">HTML</abbr> is an acroynm.
+                  
    
+            
+                              Markup: base/text/text-abbr.twig
+                          
+            
    An abbreviation of the word attribute is <abbr class="{{modifier_class}}" title="attribute">attr</abbr>.
+And <abbr class="{{modifier_class}}" title="HyperText Markup Language">HTML</abbr> is an acroynm.
 
    
-
    +
    Source: base/text/_text.scss, line 9
    -
    +

    @@ -1317,6 +2095,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <cite> element represents a reference to a creative work.

    @@ -1334,21 +2163,25 @@

    Comment by Oli Walberg

    +

    -
    - 
    <p>Who is your favorite doctor (in <cite class="">Doctor Who</cite>)?</p>
+                  
    
+            
+                              Markup: base/text/text-cite.twig
+                          
+            
    <p>Who is your favorite doctor (in <cite class="{{modifier_class}}">Doctor Who</cite>)?</p>
 
-<p>Comment by <cite class=""><a href="#">Oli Walberg</a></cite></p>
+<p>Comment by <cite class="{{modifier_class}}"><a href="#">Oli Walberg</a></cite></p>
 
    
-
    +
    Source: base/text/_text.scss, line 62
    -
    +

    @@ -1362,6 +2195,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <code> element represents a fragment of computer code. The <var> element represents a variable. The <samp> element represents (sample) @@ -1387,26 +2271,30 @@

    To make George eat an apple, select File | Eat Apple…

    +

    -
    - 
    <p>The <code class="">code</code> element represents a fragment of computer code.</p>
+                  
    
+            
+                              Markup: base/text/text-code.twig
+                          
+            
    <p>The <code class="{{modifier_class}}">code</code> element represents a fragment of computer code.</p>
 
-<p>There are <var class="">n</var> flavors of ice cream to be available for purchase!</p>
+<p>There are <var class="{{modifier_class}}">n</var> flavors of ice cream to be available for purchase!</p>
 
-<p>The computer said <samp class="">Too much cheese in tray two</samp> but I didn't know
+<p>The computer said <samp class="{{modifier_class}}">Too much cheese in tray two</samp> but I didn't know
 what that meant.</p>
 
-<p>To make George eat an apple, select <kbd class="">File | Eat Apple…</kbd></p>
+<p>To make George eat an apple, select <kbd class="{{modifier_class}}">File | Eat Apple…</kbd></p>
 
    
-
    +
    Source: base/text/_text.scss, line 74
    -
    +

    @@ -1420,6 +2308,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <del> element indicates blocks of text that have been deleted.

    @@ -1435,19 +2374,23 @@

    This line of text is meant to be treated as deleted text. +

    -
    - 
    <del class="">This line of text is meant to be treated as deleted text.</del>
+                  
    
+            
+                              Markup: base/text/text-del.twig
+                          
+            
    <del class="{{modifier_class}}">This line of text is meant to be treated as deleted text.</del>
 
    
-
    +
    Source: base/text/_text.scss, line 97

    -
    +

    @@ -1461,6 +2404,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <dfn> element represents the defining instance of a term.

    @@ -1480,23 +2474,27 @@

    Teal'c activated his GDO and so Hammond ordered the iris to be opened.

    +

    -
    - 
    <p>The <dfn class="" id="gdo"><abbr title="Garage Door Opener">GDO</abbr></dfn> is a
+                  
    
+            
+                              Markup: base/text/text-dfn.twig
+                          
+            
    <p>The <dfn class="{{modifier_class}}" id="gdo"><abbr title="Garage Door Opener">GDO</abbr></dfn> is a
 device that allows off-world teams to open the iris.</p>
 
 <p>Teal'c activated his <a href="#gdo"><abbr title="Garage Door Opener">GDO</abbr></a>
 and so Hammond ordered the iris to be opened.</p>
 
    
-
    +
    Source: base/text/_text.scss, line 109
    -
    +

    @@ -1510,6 +2508,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <ins> element indicates additions to the document.

    @@ -1526,20 +2575,24 @@

    This line of text is meant to be treated as an addition to the document. +

    -
    - 
    <ins class="">This line of text is meant to be treated as an addition to the
+                  
    
+            
+                              Markup: base/text/text-ins.twig
+                          
+            
    <ins class="{{modifier_class}}">This line of text is meant to be treated as an addition to the
 document.</ins>
 
    
-
    +
    Source: base/text/_text.scss, line 141
    -
    +

    @@ -1553,6 +2606,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <mark> element highlights a run of text due to its relevance in another context.

    @@ -1570,20 +2674,24 @@

    You can use the mark tag to highlight text like this. New! +

    -
    +
    + + Markup: base/text/text-mark.twig + 
    You can use the mark tag to <mark>highlight</mark> text like this.
-<mark class="">New!</mark>
+<mark class="{{modifier_class}}">New!</mark>
    -
    +
    Source: base/text/_text.scss, line 153
    -
    +

    @@ -1597,6 +2705,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <q> element represents an inline quote from another source. Longer quotes should use the <blockquote> element.

    @@ -1615,21 +2774,25 @@

    q element represents some phrasing content quoted from another source. +

    -
    - 
    <q class="" cite="http://www.w3.org/TR/html5/text-level-semantics.html#the-q-element">The
+                  
    
+            
+                              Markup: base/text/text-q.twig
+                          
+            
    <q class="{{modifier_class}}" cite="http://www.w3.org/TR/html5/text-level-semantics.html#the-q-element">The
 <code>q</code> element represents some phrasing content quoted from another
 source.</q>
 
    
-
    +
    Source: base/text/_text.scss, line 168
    -
    +

    @@ -1643,6 +2806,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <s> element indicates blocks of text that are no longer relevant.

    @@ -1658,19 +2872,23 @@

    This line of text is meant to be treated as no longer accurate. +

    -
    - 
    <s class="">This line of text is meant to be treated as no longer accurate.</s>
+                  
    
+            
+                              Markup: base/text/text-s.twig
+                          
+            
    <s class="{{modifier_class}}">This line of text is meant to be treated as no longer accurate.</s>
 
    
-
    +
    Source: base/text/_text.scss, line 181

    -
    +

    @@ -1684,6 +2902,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    For de-emphasizing inline or blocks of text, use the <small> element to set text at 80% the size of the parent.

    @@ -1700,19 +2969,23 @@

    This line of text is meant to be treated as fine print. +

    -
    - 
    <small class="">This line of text is meant to be treated as fine print.</small>
+                  
    
+            
+                              Markup: base/text/text-small.twig
+                          
+            
    <small class="{{modifier_class}}">This line of text is meant to be treated as fine print.</small>
 
    
-
    +
    Source: base/text/_text.scss, line 193

    -
    +

    @@ -1726,6 +2999,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <sup> element represents a superscript and the <sub> element represents a subscript.

    @@ -1742,19 +3066,23 @@

    Mlle Gwendoline wrote the equation f(x, n) = log4xn. +

    -
    - 
    <abbr>M<sup class="">lle</sup></abbr> Gwendoline wrote the equation <code>f(x, n) = log<sub class="">4</sub>x<sup class="">n</sup></code>.
+                  
    
+            
+                              Markup: base/text/text-sub.twig
+                          
+            
    <abbr>M<sup class="{{modifier_class}}">lle</sup></abbr> Gwendoline wrote the equation <code>f(x, n) = log<sub class="{{modifier_class}}">4</sub>x<sup class="{{modifier_class}}">n</sup></code>.
 
    
-
    +
    Source: base/text/_text.scss, line 207

    -
    +

    @@ -1768,6 +3096,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    To underline text use the <u> element. Not recommended since underlines are used by web browsers to style hyperlinks.

    @@ -1784,19 +3163,23 @@

    This line of text will render as underlined +

    -
    - 
    <u class="">This line of text will render as underlined</u>
+                  
    
+            
+                              Markup: base/text/text-u.twig
+                          
+            
    <u class="{{modifier_class}}">This line of text will render as underlined</u>
 
    
-
    +
    Source: base/text/_text.scss, line 234

    -
    +

    @@ -1811,6 +3194,7 @@

    +

    @@ -1818,7 +3202,7 @@

    Source: base/embedded/_embedded.scss, line 1

    -
    +

    @@ -1832,6 +3216,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    An <img> element represents an image.

    @@ -1852,24 +3287,28 @@

    +

    -
    - 
    <p>An image <img class="" src="kss-assets/sample-inline.png"> that is inline with other text.</p>
+                  
    
+            
+                              Markup: base/embedded/embedded-img.twig
+                          
+            
    <p>An image <img class="{{modifier_class}}" src="kss-assets/sample-inline.png"> that is inline with other text.</p>
 
 <figure style="width: 50%; max-width: 300px;">
   <figcaption>An image inside a figure.</figcaption>
-  <img class="" src="kss-assets/sample.png">
+  <img class="{{modifier_class}}" src="kss-assets/sample.png">
 </figure>
 
    
-
    +
    Source: base/embedded/_embedded.scss, line 7
    -
    +

    @@ -1883,6 +3322,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    A <svg> element represents an image encoded as a Scalable Vector Graphic.

    @@ -1905,26 +3395,30 @@

    +

    -
    - 
    <p>A svg image <svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/></svg> that is inline with other text.</p>
+                  
    
+            
+                              Markup: base/embedded/embedded-svg.twig
+                          
+            
    <p>A svg image <svg class="{{modifier_class}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/></svg> that is inline with other text.</p>
 
 <figure style="width: 50%; max-width: 300px;">
   <figcaption>A svg inside a figure.</figcaption>
-  <svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+  <svg class="{{modifier_class}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
   <polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/>
   </svg>
 </figure>
 
    
-
    +
    - Source: base/embedded/_embedded.scss, line 35 + Source: base/embedded/_embedded.scss, line 30
    -
    +

    @@ -1938,6 +3432,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The HTML root component contains the doctype, HTML element, HEAD element and BODY element. It also contains the CSS for those elements and the * @@ -1955,22 +3500,41 @@

    +

    -
    - 
    
+                  
    
+            
+                              Markup: base/root/base-root.twig
+                          
+            
    {#
+/**
+ * @file
+ * Component for an HTML document.
+ *
+ * Variables:
+ * - html_attributes: [string] Attributes for the HTML element.
+ * - title: [string] The page title.
+ * - attributes: [string] Attributes for the BODY element.
+ * - content: [string] The component contents.
+ */
+#}
 <!DOCTYPE html>
-<html >
+<html {{ html_attributes }}>
   <head>
-          <title></title>
-      </head>
-  <body >
-          
-      </body>
+    {% block head %}
+      <title>{{ title|raw }}</title>
+    {% endblock %}
+  </head>
+  <body {{ attributes }}>
+    {% block body %}
+      {{ content }}
+    {% endblock %}
+  </body>
 </html>
 
    
-
    +
    Source: base/root/_root.scss, line 3 @@ -1982,12 +3546,27 @@

    + + + diff --git a/STARTERKIT/styleguide/section-components.html b/STARTERKIT/styleguide/section-components.html index f0992bd..dccb038 100644 --- a/STARTERKIT/styleguide/section-components.html +++ b/STARTERKIT/styleguide/section-components.html @@ -9,43 +9,43 @@ - - - - + + + + + + + + + - - - - - - - - - - - - - - + + + + + + + + + - +
    @@ -193,7 +193,7 @@

    STARTERKIT Style Guide

    -
    +

    @@ -207,6 +207,7 @@

    +

    Design components are reusable designs that can be applied using just the CSS class names specified in the component.

    @@ -220,7 +221,7 @@

    Source: components/_components.scss, line 1

    -
    +

    @@ -234,6 +235,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    A simple box style.

    A Drupal block is often styled as a box. However, this design component is @@ -259,13 +311,14 @@

    -
    +

    Box title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    +
    @@ -282,6 +335,7 @@

    Box title

    +

    .box--highlight @@ -297,23 +351,27 @@

    Box title

    +
    -
    - 
    <div class="box [modifier class]">
-  <h2 class="box__title">Box title</h2>
+                  
    
+            
+                              Markup: components/box/box.twig
+                          
+            
    <div class="box {{modifier_class}}">
+  <h2 class="box__title">{{title}}</h2>
   <div class="box__content">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    {{content}}
   </div>
 </div>
 
    
-
    +
    Source: components/box/box.scss, line 3

    -
    +

    @@ -327,6 +385,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Allows the bottom of an element to extend to the bottom of all floated child elements. See http://nicolasgallagher.com/micro-clearfix-hack/

    @@ -345,21 +454,25 @@

    A floated item.

    +

    -
    +
    + + Markup: components/clearfix/clearfix.twig + 
    <div class="clearfix">
   <div style="float: left; height: 50px; width: 50%;">A floated item.</div>
 </div>
    -
    +
    Source: components/clearfix/clearfix.scss, line 3
    -
    +

    @@ -373,6 +486,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    A single comment in a thread of comments.

    @@ -390,7 +554,7 @@

    -
    +
    @@ -430,6 +595,7 @@

    +

    .comment--nested @@ -454,11 +620,15 @@

    +

    -
    +
    + + Markup: components/comment/comment.twig + 
    <div class="comment__section">
-  <article class="comment [modifier class]">
+  <article class="comment {{modifier_class}}">
     <header>
       <p><a href="#">Jane A. User</a> replied on <time>Wed, 08/19/2015 - 17:51</time>
         <a href="#" class="comment__permalink">Permalink</a>
@@ -473,13 +643,13 @@ 
    
   </article>
 </div>
    -
    +
    Source: components/comment/comment.scss, line 3
    -
    +

    @@ -493,6 +663,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Can be used as an <hr>, an empty <div> or as a container.

    @@ -518,29 +739,33 @@

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    +

    -
    - 
    <div class="divider "></div>
+                  
    
+            
+                              Markup: components/divider/divider.twig
+                          
+            
    <div class="divider {{modifier_class}}"></div>
 
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+<p>{{content}}</p>
 
-<div class="divider ">
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+<div class="divider {{modifier_class}}">
+  <p>{{content}}</p>
 </div>
 
-<hr class="divider ">
+<hr class="divider {{modifier_class}}">
 
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+<p>{{content}}</p>
 
    
-
    +
    Source: components/divider/_divider.scss, line 4
    -
    +

    @@ -554,6 +779,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    @@ -569,23 +845,39 @@

    Copyright statement here. Legalize here. +
    -
    - 
    
-
-<footer class="footer " role="contentinfo">
-      Copyright statement here. Legalize here.
-  </footer>
+                  
    
+            
+                              Markup: components/footer/footer.twig
+                          
+            
    {#
+/**
+ * @file
+ * Component for the footer.
+ *
+ * Variables:
+ * - modifier_class: [string] Classes to modify the default component styling.
+ * - attributes: [string] HTML attributes for the wrapping element.
+ * - content: [string] The component contents.
+ */
+#}
+{{ attach_library('STARTERKIT/footer') }}
+<footer class="footer {{ modifier_class }}" role="contentinfo"{{ attributes }}>
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</footer>
 
    
-
    +
    Source: components/footer/footer.scss, line 3

    -
    +

    @@ -599,6 +891,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    @@ -633,11 +976,15 @@ +
    -
    - 
    <header class="header  clearfix" role="banner">
+                  
    
+            
+                              Markup: components/header/header.twig
+                          
+            
    <header class="header {{modifier_class}} clearfix" role="banner">
   <a href="/" title="Home" rel="home" class="header__logo">
     <img src="kss-assets/sample-inline.png" alt="Home" class="header__logo-image">
   </a>
@@ -662,13 +1009,13 @@ 
   </div>
 </header>
 
    
-
    +
    Source: components/header/header.scss, line 3
    -
    +

    @@ -682,6 +1029,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Hide elements from all users. Compare to the visually-hidden component.

    Used for elements which should not be immediately displayed to any user. An @@ -704,21 +1102,25 @@

    This content is hidden.

    +

    -
    - 
    <div class="hidden ">
+                  
    
+            
+                              Markup: components/hidden/hidden.twig
+                          
+            
    <div class="hidden {{modifier_class}}">
   This content is hidden.
 </div>
 
    
-
    +
    Source: components/hidden/hidden.scss, line 3
    -
    +

    @@ -732,6 +1134,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The "new" or "updated" marker. This is a very thin component. A front-end developer may choose to delete this component and just style the <mark> @@ -753,23 +1206,36 @@

    New +

    -
    - 
    
-
-<mark class="highlight-mark ">
-  New
+                  
    
+            
+                              Markup: components/highlight-mark/highlight-mark.twig
+                          
+            
    {#
+/**
+ * @file
+ * Component for a marker.
+ *
+ * Variables:
+ * - modifier_class: [string] Classes to modify the default component styling.
+ * - content: [string] The component contents.
+ */
+#}
+{{ attach_library('STARTERKIT/highlight-mark') }}
+<mark class="highlight-mark {{ modifier_class }}">
+  {{ content }}
 </mark>
 
    
-
    +
    Source: components/highlight-mark/highlight-mark.scss, line 3
    -
    +

    @@ -783,6 +1249,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    A list of links that are inline with each other.

    @@ -799,20 +1316,28 @@

    +

    -
    - 
    
-<ul class="inline-links "><li class="inline-links__item"><a href="#">Read more</a></li><li class="inline-links__item"><a href="#">Comment</a></li></ul>
+                  
    
+            
+                              Markup: components/inline-links/inline-links.twig
+                          
+            
    {{ attach_library('STARTERKIT/inline-links') }}
+<ul class="inline-links {{modifier_class}}">
+  {% for link in links -%}
+    <li class="inline-links__item"><a href="{{ link.url }}">{{ link.text }}</a></li>
+  {%- endfor %}
+</ul>
 
    
-
    +
    Source: components/inline-links/inline-links.scss, line 3
    -
    +

    @@ -826,6 +1351,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    An element that needs to appear inline with the content that follows.

    @@ -842,20 +1418,24 @@

    A Heading

    A normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    +

    -
    - 
    <h4 class="inline-sibling ">A Heading</h4>
+                  
    
+            
+                              Markup: components/inline-sibling/inline-sibling.twig
+                          
+            
    <h4 class="inline-sibling {{modifier_class}}">A Heading</h4>
 <p>A normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 
    
-
    +
    Source: components/inline-sibling/inline-sibling.scss, line 3
    -
    +

    @@ -869,6 +1449,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    System alerts.

    Warning messages should use the .messages--warning class. Error messages @@ -892,7 +1523,7 @@

    -
    .messages--error @@ -1022,32 +1655,74 @@

    +

    -
    - 
    
-
-<div class="messages [modifier class]" role="contentinfo" aria-label="Status message" >
-  
-            <h2 class="visually-hidden">Status message</h2>
-      
-      <div class="messages__icon">
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 64 64">
-  <path d="M54 8l-30 30-14-14-10 10 24 24 40-40z" fill="#000000"></path>
-</svg>
-          </div>
-  
-            This is how a single message appears.
-      
-  </div>
+                  
    
+            
+                              Markup: components/messages/messages.twig
+                          
+            
    {#
+/**
+ * @file
+ * Component for messages.
+ *
+ * Variables:
+ * - modifier_class: [string] Classes to modify the default component styling.
+ * - heading: [string] Accessible heading.
+ * - attributes: [string] HTML attributes for the wrapping element.
+ * - type: [string] The type of message: error, warning or status (default).
+ * - messages: [array] The messages. Each item in the array is a string.
+ */
+#}
+{{ attach_library('STARTERKIT/messages') }}
+<div class="messages {{ modifier_class }}" role="contentinfo" {% if heading %}aria-label="{{ heading }}"{% endif %} {{ attributes }}>
+  {% if type == 'error' %}
+    <div role="alert">
+  {% endif %}
+
+  {% block heading %}
+    {% if heading %}
+      <h2 class="visually-hidden">{{ heading }}</h2>
+    {% endif %}
+  {% endblock heading %}
+
+  {% block icon %}
+    <div class="messages__icon">
+      {% if type == 'error' %}
+        {% include "@STARTERKIT/components/messages/messages-icon-error.svg" %}
+      {% elseif type == 'warning' %}
+        {% include "@STARTERKIT/components/messages/messages-icon-warning.svg" %}
+      {% else %}
+        {% include "@STARTERKIT/components/messages/messages-icon-status.svg" %}
+      {% endif %}
+    </div>
+  {% endblock icon %}
+
+  {% block content %}
+    {% if messages|length > 1 %}
+      <ul class="messages__list">
+        {% for message in messages %}
+          <li class="messages__item">{{ message }}</li>
+        {% endfor %}
+      </ul>
+    {% else %}
+      {{ messages|first }}
+    {% endif %}
+  {% endblock content %}
+
+  {% if type == 'error' %}
+    </div>
+  {% endif %}
+</div>
 
    
-
    +
    Source: components/messages/messages.scss, line 3
    -
    +

    @@ -1061,6 +1736,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Removes an element from the print version of the web site.

    By importing these CSS rules in a file marked as media "all", we allow these @@ -1081,21 +1807,25 @@

    This item will not be printed.

    +

    -
    +
    + + Markup: components/print-none/print-none.twig + 
    <p class="print-none">
   This item will not be printed.
 </p>
    -
    +
    Source: components/print-none/print-none.scss, line 3
    -
    +

    @@ -1109,6 +1839,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Using a wrapper div, embedded videos can be made responsive so that their intrinsic aspect ratio is preserved at any screen width. The @@ -1127,10 +1908,11 @@

    -
    +
    +
    @@ -1144,20 +1926,24 @@

    +

    -
    - 
    <div class="responsive-video [modifier class]">
+                  
    
+            
+                              Markup: components/responsive-video/responsive-video.twig
+                          
+            
    <div class="responsive-video {{modifier_class}}">
   <iframe class="responsive-video__embed" width="560" height="315" src="https://www.youtube.com/embed/8N_tupPBtWQ" frameborder="0" allowfullscreen></iframe>
 </div>
 
    
-
    +
    Source: components/responsive-video/responsive-video.scss, line 3
    -
    +

    @@ -1171,6 +1957,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Make an element visually hidden, but accessible to screen readers, etc.

    @@ -1188,10 +2025,11 @@

    -
    @@ -1206,6 +2044,7 @@

    This text will be read by screen readers, but will be visually hidden.

    +
    .visually-hidden--focusable @@ -1219,6 +2058,7 @@

    This text will be read by screen readers, but will be visually hidden.

    +

    .visually-hidden--focusable:focus @@ -1232,21 +2072,36 @@

    This text will be read by screen readers, but will be visually hidden.

    +

    -
    - 
    
-<div class="visually-hidden [modifier class]">
-      This text will be read by screen readers, but will be visually hidden.
-  </div>
+                  
    
+            
+                              Markup: components/visually-hidden/visually-hidden.twig
+                          
+            
    {#
+/**
+ * @file
+ * Component for visually hidden content.
+ *
+ * Variables:
+ * - modifier_class: [string] Classes to modify the default component styling.
+ * - content: [string] The component contents.
+ */
+#}
+<div class="visually-hidden {{modifier_class}}">
+  {% block content %}
+    {{content}}
+  {% endblock %}
+</div>
 
    
-
    +
    Source: components/visually-hidden/visually-hidden.scss, line 3
    -
    +

    @@ -1260,6 +2115,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Make the element appear beneath sibling elements, like a watermark.

    @@ -1282,23 +2188,36 @@

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    +

    -
    - 
    
-
-<mark class="watermark ">
-  Unpublished
+                  
    
+            
+                              Markup: components/watermark/watermark.twig
+                          
+            
    {#
+/**
+ * @file
+ * Component for watermark.
+ *
+ * Variables:
+ * - modifier_class: [string] Classes to modify the default component styling.
+ * - content: [string] The component contents.
+ */
+#}
+{{ attach_library('STARTERKIT/watermark') }}
+<mark class="watermark {{modifier_class}}">
+  {{content}}
 </mark>
 
    
-
    +
    Source: components/watermark/watermark.scss, line 3
    -
    +

    @@ -1312,6 +2231,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Add wireframes around main layout elements. Wireframes are useful when prototyping a website.

    @@ -1332,15 +2302,19 @@

    An item inside a wireframe.

    +

    -
    +
    + + Markup: components/wireframe/wireframe.twig + 
    <div class="wireframe">
-  An item inside a wireframe.
+  {{content}}
 </div>
    -
    +
    Source: components/wireframe/wireframe.scss, line 5 @@ -1352,12 +2326,27 @@

    + + + diff --git a/STARTERKIT/styleguide/section-forms.html b/STARTERKIT/styleguide/section-forms.html index 83faebe..ad49377 100644 --- a/STARTERKIT/styleguide/section-forms.html +++ b/STARTERKIT/styleguide/section-forms.html @@ -9,43 +9,43 @@ - - - - + + + + + + + + + - - - - - - - - - - - - - - + + + + + + + + + - +
    @@ -211,7 +211,7 @@

    STARTERKIT Style Guide

    -
    +

    @@ -225,6 +225,7 @@

    +

    Form components are specialized design components that are applied to forms or form elements.

    @@ -238,7 +239,7 @@

    Source: forms/_forms.scss, line 1

    -
    +

    @@ -252,6 +253,7 @@

    +

    These are the default base styles applied to HTML form elements.

    Component classes can override these styles, but if no class applies a style @@ -266,7 +268,7 @@

    Source: base/forms/_forms.scss, line 3

    -
    +

    @@ -280,6 +282,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Buttons built with the <button> element are the most flexible for styling purposes. But <input> elements with type set to submit, image, @@ -301,30 +354,31 @@

    - - + +

    - - + +

    - - + +

    - - + +

    - - + +

    - - + +

    +
    @@ -359,6 +413,7 @@

    +

    :active:hover @@ -392,41 +447,45 @@

    +

    -
    +
    + + Markup: base/forms/forms-button.twig + 
    <p>
-  <button type="button" class="[modifier class]">Standard button</button>
-  <button type="button" class="[modifier class]" disabled>disabled button</button>
+  <button type="button" class="{{modifier_class}}">Standard button</button>
+  <button type="button" class="{{modifier_class}}" disabled>disabled button</button>
 </p>
 <p>
-  <button type="submit" class="[modifier class]">Submit button</button>
-  <button type="submit" class="[modifier class]" disabled>Disabled submit button</button>
+  <button type="submit" class="{{modifier_class}}">Submit button</button>
+  <button type="submit" class="{{modifier_class}}" disabled>Disabled submit button</button>
 </p>
 <p>
-  <button type="reset" class="[modifier class]">Reset button</button>
-  <button type="reset" class="[modifier class]" disabled>Disabled reset button</button>
+  <button type="reset" class="{{modifier_class}}">Reset button</button>
+  <button type="reset" class="{{modifier_class}}" disabled>Disabled reset button</button>
 </p>
 <p>
-  <input type="button" class="[modifier class]" value="Input button">
-  <input type="button" class="[modifier class]" value="Disabled input button" disabled>
+  <input type="button" class="{{modifier_class}}" value="Input button">
+  <input type="button" class="{{modifier_class}}" value="Disabled input button" disabled>
 </p>
 <p>
-  <input type="submit" class="[modifier class]" value="Input submit button">
-  <input type="submit" class="[modifier class]" value="Disabled input submit button" disabled>
+  <input type="submit" class="{{modifier_class}}" value="Input submit button">
+  <input type="submit" class="{{modifier_class}}" value="Disabled input submit button" disabled>
 </p>
 <p>
-  <input type="reset" class="[modifier class]" value="Input reset button">
-  <input type="reset" class="[modifier class]" value="Disabled input reset button" disabled>
+  <input type="reset" class="{{modifier_class}}" value="Input reset button">
+  <input type="reset" class="{{modifier_class}}" value="Disabled input reset button" disabled>
 </p>
    -
    +
    - Source: base/forms/_forms.scss, line 92 + Source: base/forms/_forms.scss, line 86

    -
    +

    @@ -440,6 +499,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <fieldset> element groups a set of form fields, optionally under a common name given by the <legend> element.

    @@ -477,17 +587,21 @@

    +

    -
    - 
    <fieldset class="">
+                  
    
+            
+                              Markup: base/forms/forms-fieldset.twig
+                          
+            
    <fieldset class="{{modifier_class}}">
   <legend>A fieldset</legend>
   <label for="fieldsetText">Text input</label>
   <input type="text" id="fieldsetText" placeholder="Text input">
 </fieldset>
 
-<fieldset class="" disabled>
+<fieldset class="{{modifier_class}}" disabled>
   <legend>A disabled fieldset</legend>
   <div>
     <label for="fieldsetText2">Disabled text input</label>
@@ -504,13 +618,13 @@ 
    
   </div>
 </fieldset>
 
    
-
    +
    - Source: base/forms/_forms.scss, line 188 + Source: base/forms/_forms.scss, line 176

    -
    +

    @@ -524,6 +638,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <input> element is mostly used for text-based inputs that include the HTML5 types: text, search, tel, url, email, password, date, @@ -637,115 +802,119 @@

    +

    -
    +
    + + Markup: base/forms/forms-input.twig + 
    <div>
   <label for="inputText">Text</label>
-  <input type="text" class="" id="inputText" placeholder="Enter some text">
+  <input type="text" class="{{modifier_class}}" id="inputText" placeholder="Enter some text">
 </div>
 <div>
   <label for="inputSearch">Search</label>
-  <input type="search" class="" id="inputSearch" placeholder="Search">
+  <input type="search" class="{{modifier_class}}" id="inputSearch" placeholder="Search">
 </div>
 <div>
   <label for="inputTel">Telephone</label>
-  <input type="text" class="" id="inputTel" placeholder="Enter some text">
+  <input type="text" class="{{modifier_class}}" id="inputTel" placeholder="Enter some text">
 </div>
 <div>
   <label for="inputURL">URL</label>
-  <input type="url" class="" id="inputURL" placeholder="Enter a URL">
+  <input type="url" class="{{modifier_class}}" id="inputURL" placeholder="Enter a URL">
 </div>
 <div>
   <label for="inputEmail">Email address</label>
-  <input type="email" class="" id="inputEmail" placeholder="Enter email">
+  <input type="email" class="{{modifier_class}}" id="inputEmail" placeholder="Enter email">
 </div>
 <div>
   <label for="inputPassword">Password</label>
-  <input type="password" class="" id="inputPassword" placeholder="Password">
+  <input type="password" class="{{modifier_class}}" id="inputPassword" placeholder="Password">
 </div>
 <div>
   <label for="inputDate">Date</label>
-  <input type="date" class="" id="inputDate" placeholder="Enter a date">
+  <input type="date" class="{{modifier_class}}" id="inputDate" placeholder="Enter a date">
 </div>
 <div>
   <label for="inputTime">Time</label>
-  <input type="time" class="" id="inputTime" placeholder="Enter a time">
+  <input type="time" class="{{modifier_class}}" id="inputTime" placeholder="Enter a time">
 </div>
 <div>
   <label for="inputNumber">Number</label>
-  <input type="number" class="" id="inputNumber" placeholder="Enter a number">
+  <input type="number" class="{{modifier_class}}" id="inputNumber" placeholder="Enter a number">
 </div>
 <div>
   <label for="inputRange">Range</label>
-  <input type="range" class="" id="inputRange" placeholder="Enter a range">
+  <input type="range" class="{{modifier_class}}" id="inputRange" placeholder="Enter a range">
 </div>
 <div>
   <label for="inputColor">Color</label>
-  <input type="color" class="" id="inputColor" placeholder="Enter a color">
+  <input type="color" class="{{modifier_class}}" id="inputColor" placeholder="Enter a color">
 </div>
 <div>
   <label for="inputFile">File input</label>
-  <input type="file" class="" id="inputFile">
+  <input type="file" class="{{modifier_class}}" id="inputFile">
 </div>
 
 <div>
   <label for="inputText">Disabled text</label>
-  <input type="text" class="" disabled id="inputText" placeholder="Disabled text">
+  <input type="text" class="{{modifier_class}}" disabled id="inputText" placeholder="Disabled text">
 </div>
 <div>
   <label for="inputSearch">Disabled search</label>
-  <input type="search" class="" disabled id="inputSearch" placeholder="Disabled search">
+  <input type="search" class="{{modifier_class}}" disabled id="inputSearch" placeholder="Disabled search">
 </div>
 <div>
   <label for="inputTel">Disabled telephone</label>
-  <input type="text" class="" disabled id="inputTel" placeholder="Disabled telephone">
+  <input type="text" class="{{modifier_class}}" disabled id="inputTel" placeholder="Disabled telephone">
 </div>
 <div>
   <label for="inputURL">Disabled URL</label>
-  <input type="url" class="" disabled id="inputURL" placeholder="Disabled URL">
+  <input type="url" class="{{modifier_class}}" disabled id="inputURL" placeholder="Disabled URL">
 </div>
 <div>
   <label for="inputEmail">Disabled email address</label>
-  <input type="email" class="" disabled id="inputEmail" placeholder="Disabled email">
+  <input type="email" class="{{modifier_class}}" disabled id="inputEmail" placeholder="Disabled email">
 </div>
 <div>
   <label for="inputPassword">Disabled password</label>
-  <input type="password" class="" disabled id="inputPassword" placeholder="Disabled password">
+  <input type="password" class="{{modifier_class}}" disabled id="inputPassword" placeholder="Disabled password">
 </div>
 <div>
   <label for="inputDate">Disabled date</label>
-  <input type="date" class="" disabled id="inputDate" placeholder="Disabled date">
+  <input type="date" class="{{modifier_class}}" disabled id="inputDate" placeholder="Disabled date">
 </div>
 <div>
   <label for="inputTime">Disabled time</label>
-  <input type="time" class="" disabled id="inputTime" placeholder="Disabled time">
+  <input type="time" class="{{modifier_class}}" disabled id="inputTime" placeholder="Disabled time">
 </div>
 <div>
   <label for="inputNumber">Disabled number</label>
-  <input type="number" class="" disabled id="inputNumber" placeholder="Disabled number">
+  <input type="number" class="{{modifier_class}}" disabled id="inputNumber" placeholder="Disabled number">
 </div>
 <div>
   <label for="inputRange">Disabled range</label>
-  <input type="range" class="" disabled id="inputRange" placeholder="Disabled range">
+  <input type="range" class="{{modifier_class}}" disabled id="inputRange" placeholder="Disabled range">
 </div>
 <div>
   <label for="inputColor">Disabled color</label>
-  <input type="color" class="" disabled id="inputColor" placeholder="Disabled color">
+  <input type="color" class="{{modifier_class}}" disabled id="inputColor" placeholder="Disabled color">
 </div>
 <div>
   <label for="inputFile">Disabled file input</label>
-  <input type="file" class="" disabled id="inputFile">
+  <input type="file" class="{{modifier_class}}" disabled id="inputFile">
 </div>
    -
    +
    - Source: base/forms/_forms.scss, line 116 + Source: base/forms/_forms.scss, line 110
    -
    +

    @@ -759,6 +928,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    If an <input> element has the type='checkbox' attribute set, the form field is displayed as a checkbox.

    @@ -783,25 +1003,29 @@

    +

    -
    +
    + + Markup: base/forms/forms-input-checkbox.twig + 
    <div>
-  <label><input type="checkbox" class=""> Check me out</label>
+  <label><input type="checkbox" class="{{modifier_class}}"> Check me out</label>
 </div>
 
 <div>
-  <label><input type="checkbox" class="" value="" disabled> Option two is disabled</label>
+  <label><input type="checkbox" class="{{modifier_class}}" value="" disabled> Option two is disabled</label>
 </div>
    -
    +
    - Source: base/forms/_forms.scss, line 150 + Source: base/forms/_forms.scss, line 144
    -
    +

    @@ -815,6 +1039,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    If an <input> element has the type='radio' attribute set, the form field is displayed as a radio button.

    @@ -843,29 +1118,33 @@

    +

    -
    +
    + + Markup: base/forms/forms-input-radio.twig + 
    <div>
-  <label><input type="radio" class="" value="option1" name="example-radio" checked> Option one</label>
+  <label><input type="radio" class="{{modifier_class}}" value="option1" name="example-radio" checked> Option one</label>
 </div>
 
 <div>
-  <label><input type="radio" class="" value="option2" name="example-radio"> Option two</label>
+  <label><input type="radio" class="{{modifier_class}}" value="option2" name="example-radio"> Option two</label>
 </div>
 
 <div>
-  <label><input type="radio" class="" value="option3" name="example-radio" disabled> Option three is disabled</label>
+  <label><input type="radio" class="{{modifier_class}}" value="option3" name="example-radio" disabled> Option three is disabled</label>
 </div>
    -
    +
    - Source: base/forms/_forms.scss, line 162 + Source: base/forms/_forms.scss, line 156
    -
    +

    @@ -879,6 +1158,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <label> element represents a caption of a form field. The label can be associated with a specific form control by using the for attribute or by @@ -903,26 +1233,30 @@

    +

    -
    +
    + + Markup: base/forms/forms-label.twig + 
    <div>
-  <label class="" for="lableInputText">A label for a text input</label>
+  <label class="{{modifier_class}}" for="lableInputText">A label for a text input</label>
   <input type="text" id="lableInputText" placeholder="Enter some text">
 </div>
 
 <div>
-  <label class=""><input type="checkbox"> A label wrapped around a checkbox</label>
+  <label class="{{modifier_class}}"><input type="checkbox"> A label wrapped around a checkbox</label>
 </div>
    -
    +
    - Source: base/forms/_forms.scss, line 222 + Source: base/forms/_forms.scss, line 206
    -
    +

    @@ -936,6 +1270,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <select> element represents a form field for selecting amongst a set of options.

    @@ -991,13 +1376,17 @@

    +

    -
    +
    + + Markup: base/forms/forms-select.twig + 
    <div>
   <label for="selectDropdown">A standard drop-down</label>
-  <select class="" id="selectDropdown">
+  <select class="{{modifier_class}}" id="selectDropdown">
     <option>Option 1</option>
     <option>Option 2</option>
     <option>Option 3</option>
@@ -1010,7 +1399,7 @@ 
    
 
 <div>
   <label for="selectMultiItem">A multi-item select field</label>
-  <select class="" id="selectMultiItem" multiple>
+  <select class="{{modifier_class}}" id="selectMultiItem" multiple>
     <option>Option 1</option>
     <option>Option 2</option>
     <option>Option 3</option>
@@ -1023,7 +1412,7 @@ 
    
 
 <div>
   <label for="selectDisabled">A disabled drop-down</label>
-  <select class="" id="selectDisabled" disabled>
+  <select class="{{modifier_class}}" id="selectDisabled" disabled>
     <option>Option 1</option>
     <option>Option 2</option>
     <option>Option 3</option>
@@ -1034,13 +1423,13 @@ 
    
   </select>
 </div>
    -
    +
    - Source: base/forms/_forms.scss, line 238 + Source: base/forms/_forms.scss, line 222
    -
    +

    @@ -1054,6 +1443,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The <textarea> element represents a multi-line plain text form field.

    @@ -1076,26 +1516,30 @@

    +

    -
    +
    + + Markup: base/forms/forms-textarea.twig + 
    <div>
   <label for="exampleTextarea">Text area</label>
-  <textarea class="" rows="3" id="exampleTextarea"></textarea>
+  <textarea class="{{modifier_class}}" rows="3" id="exampleTextarea"></textarea>
 </div>
 <div>
   <label for="exampleTextarea">Disabled text area</label>
-  <textarea class="" rows="3" id="exampleTextarea" disabled></textarea>
+  <textarea class="{{modifier_class}}" rows="3" id="exampleTextarea" disabled></textarea>
 </div>
    -
    +
    - Source: base/forms/_forms.scss, line 259 + Source: base/forms/_forms.scss, line 243
    -
    +

    @@ -1109,6 +1553,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    As the user starts to type a value, a selection list appears below the form item allowing them to choose an option.

    @@ -1126,7 +1621,7 @@

    - +
    • guwatif
      • @@ -1135,6 +1630,7 @@

     

    +
    @@ -1153,10 +1649,14 @@

     

    +

    -
    - 
    <input type="text" value="" class="autocomplete [modifier class]">
+                  
    
+            
+                              Markup: forms/autocomplete/autocomplete.twig
+                          
+            
    <input type="text" value="" class="autocomplete {{modifier_class}}">
 <div class="autocomplete__list-wrapper">
   <ul class="autocomplete__list">
   <li class="autocomplete__list-item">guwatif</li>
@@ -1165,13 +1665,13 @@ 
    
 </div>
 <p>&nbsp;</p>
 
    
-
    +
    Source: forms/autocomplete/autocomplete.scss, line 6
    -
    +

    @@ -1185,6 +1685,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    In addition to the default styling of <button> and <input type="submit|image|reset|button"> elements, the .button class and @@ -1205,34 +1756,35 @@

    - - + +

    - - + +

    - - + +

    - - + +

    - - + +

    - - + +

    - Link button - Disabled link button + Link button + Disabled link button

    +
    @@ -1271,6 +1823,7 @@

    Disabled link button

    +

    :active @@ -1308,45 +1861,49 @@

    Disabled link button

    +

    -
    +
    + + Markup: forms/button/button.twig + 
    <p>
-  <button class="button [modifier class]" type="button">Standard button</button>
-  <button class="button [modifier class]" type="button" disabled>Disabled button</button>
+  <button class="button {{modifier_class}}" type="button">Standard button</button>
+  <button class="button {{modifier_class}}" type="button" disabled>Disabled button</button>
 </p>
 <p>
-  <button class="button [modifier class]" type="submit">Submit button</button>
-  <button class="button [modifier class]" type="submit" disabled>Disabled submit button</button>
+  <button class="button {{modifier_class}}" type="submit">Submit button</button>
+  <button class="button {{modifier_class}}" type="submit" disabled>Disabled submit button</button>
 </p>
 <p>
-  <button class="button [modifier class]" type="reset">Reset button</button>
-  <button class="button [modifier class]" type="reset" disabled>Disabled reset button</button>
+  <button class="button {{modifier_class}}" type="reset">Reset button</button>
+  <button class="button {{modifier_class}}" type="reset" disabled>Disabled reset button</button>
 </p>
 <p>
-  <input class="button [modifier class]" type="button" value="Input button">
-  <input class="button [modifier class]" type="button" value="Disabled input button" disabled>
+  <input class="button {{modifier_class}}" type="button" value="Input button">
+  <input class="button {{modifier_class}}" type="button" value="Disabled input button" disabled>
 </p>
 <p>
-  <input class="button [modifier class]" type="submit" value="Input submit button">
-  <input class="button [modifier class]" type="submit" value="Disabled input submit button" disabled>
+  <input class="button {{modifier_class}}" type="submit" value="Input submit button">
+  <input class="button {{modifier_class}}" type="submit" value="Disabled input submit button" disabled>
 </p>
 <p>
-  <input class="button [modifier class]" type="reset" value="Input reset button">
-  <input class="button [modifier class]" type="reset" value="Disabled input reset button" disabled>
+  <input class="button {{modifier_class}}" type="reset" value="Input reset button">
+  <input class="button {{modifier_class}}" type="reset" value="Disabled input reset button" disabled>
 </p>
 <p>
-  <a class="button [modifier class]" href="#">Link button</a>
-  <a class="button [modifier class]" disabled href="#">Disabled link button</a>
+  <a class="button {{modifier_class}}" href="#">Link button</a>
+  <a class="button {{modifier_class}}" disabled href="#">Disabled link button</a>
 </p>
    -
    +
    Source: forms/button/_button.scss, line 4

    -
    +

    @@ -1360,6 +1917,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Fieldsets with optional entry fields can be hidden with collapsed fieldsets.

    @@ -1376,7 +1984,7 @@

    -
    +
    A collapsible fieldset @@ -1388,6 +1996,7 @@

    +

    @@ -1409,10 +2018,14 @@

    +
    -
    - 
    <fieldset class="collapsible-fieldset [modifier class]">
+                  
    
+            
+                              Markup: forms/collapsible-fieldset/collapsible-fieldset.twig
+                          
+            
    <fieldset class="collapsible-fieldset {{modifier_class}}">
   <legend>
     <span class="collapsible-fieldset__legend">
       A collapsible fieldset
@@ -1424,13 +2037,13 @@ 
    
   </div>
 </fieldset>
 
    
-
    +
    Source: forms/collapsible-fieldset/collapsible-fieldset.scss, line 6
    -
    +

    @@ -1444,6 +2057,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Wrapper for a form element (or group of form elements) and its label.

    @@ -1460,14 +2124,14 @@

    -
    +
    Form item description.
    -
    +
    @@ -1475,6 +2139,7 @@

    +
    @@ -1499,6 +2164,7 @@

    +
    .form-item--tight @@ -1522,6 +2188,7 @@

    +
    .is-error @@ -1545,17 +2212,21 @@

    +
    -
    - 
    <div class="form-item [modifier class]">
+                  
    
+            
+                              Markup: forms/form-item/form-item.twig
+                          
+            
    <div class="form-item {{modifier_class}}">
   <label class="form-item__label" for="form-item-input">Label <span class="form-item__required" title="This field is required.">*</span></label>
   <input class="form-item__widget" type="text" id="form-item-input" value="Text value">
   <div class="form-item__description">
     Form item description.
   </div>
 </div>
-<div class="form-item [modifier class]">
+<div class="form-item {{modifier_class}}">
   <label class="form-item__label" for="form-item-input-2">Another label <span class="form-item__required" title="This field is required.">*</span></label>
   <input class="form-item__widget" type="text" id="form-item-input-2" value="Text value">
   <div class="form-item__description">
@@ -1563,13 +2234,13 @@ 
    
   </div>
 </div>
 
    
-
    +
    Source: forms/form-item/form-item.scss, line 3
    -
    +

    @@ -1583,6 +2254,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Checkboxes and radios require slightly different markup; their label is after their widget instead of before. Uses the .form-item--radio class variant of @@ -1607,14 +2329,14 @@

    Form group description.

    -
    +
    Form item description.
    -
    +
    @@ -1624,6 +2346,7 @@

    +
    @@ -1656,23 +2379,27 @@

    +

    -
    +
    + + Markup: forms/form-item/form-item--radio.twig + 
    <div class="form-item">
   <label class="form-item__label" for="group">Label for the group</label>
   <div class="form-item__description">
     Form group description.
   </div>
   <div class="form-item__group" id="group">
-    <div class="form-item--radio [modifier class]">
+    <div class="form-item--radio {{modifier_class}}">
       <input class="form-item__widget" type="checkbox" id="option-1" value="1">
       <label class="form-item__label" for="option-1">Option 1</label>
       <div class="form-item__description">
         Form item description.
       </div>
     </div>
-    <div class="form-item--radio [modifier class]">
+    <div class="form-item--radio {{modifier_class}}">
       <input class="form-item__widget" type="checkbox" id="option-2" value="2">
       <label class="form-item__label" for="option-2">Option 2</label>
       <div class="form-item__description">
@@ -1682,13 +2409,13 @@ 
    
   </div>
 </div>
    -
    +
    Source: forms/form-item/form-item.scss, line 16
    -
    +

    @@ -1702,6 +2429,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Complex forms that appear in html <table> elements.

    If your custom theme isn't used for Drupal's admin pages, you can safely @@ -1823,10 +2601,14 @@

    +

    -
    +
    + + Markup: forms/form-table/form-table.twig + 
    <table class="form-table__sticky-header" style="position: fixed; visibility: visible;">
 <thead>
   <tr>
@@ -1838,7 +2620,7 @@ 
    
 </thead>
 </table>
 
-<table class="form-table ">
+<table class="form-table {{modifier_class}}">
 <thead>
   <tr>
     <th>Permission</th>
@@ -1933,13 +2715,13 @@ 
    
   </tr>
 </tbody>
 </table>
    -
    +
    Source: forms/form-table/form-table.scss, line 3
    -
    +

    @@ -1953,6 +2735,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Shows the progress of a task in a simple bar graph.

    @@ -1969,12 +2802,13 @@

    -
    +
    60%
    Installing...
    +
    @@ -1990,22 +2824,26 @@

    Installing...

    +

    -
    - 
    <div class="progress-bar [modifier class]">
+                  
    
+            
+                              Markup: forms/progress-bar/progress-bar.twig
+                          
+            
    <div class="progress-bar {{modifier_class}}">
   <div class="progress-bar__bar"><div class="progress-bar__fill" style="width: 60%"></div></div>
   <div class="progress-bar__percentage">60%</div>
   <div class="progress-bar__message">Installing...</div>
 </div>
 
    
-
    +
    Source: forms/progress-bar/progress-bar.scss, line 6
    -
    +

    @@ -2019,6 +2857,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Shows the progress of a task using a throbber.

    @@ -2037,22 +2926,26 @@

    Progress message

    +

    -
    - 
    <div class="progress-throbber ">
+                  
    
+            
+                              Markup: forms/progress-throbber/progress-throbber.twig
+                          
+            
    <div class="progress-throbber {{modifier_class}}">
   <div class="progress-throbber__widget">&nbsp;</div>
   <div class="progress-throbber__message">Progress message</div>
 </div>
 
    
-
    +
    Source: forms/progress-throbber/progress-throbber.scss, line 6
    -
    +

    @@ -2066,6 +2959,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    A textarea that can be resized with a "grippie" widget.

    @@ -2086,24 +3030,26 @@

    +

    -
    - 
    <textarea class="resizable-textarea " rows="5">
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
-Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                  
    
+            
+                              Markup: forms/resizable-textarea/resizable-textarea.twig
+                          
+            
    <textarea class="resizable-textarea {{modifier_class}}" rows="{{ rows }}">
+{{ content }}
 </textarea>
 <div class="resizable-textarea__grippie"></div>
 
    
-
    +
    Source: forms/resizable-textarea/resizable-textarea.scss, line 6
    -
    +

    @@ -2117,6 +3063,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Drag and drop rows inside a form.

    If your custom theme isn't used for Drupal's admin pages, you can safely @@ -2170,7 +3167,7 @@

    - +
    @@ -2243,10 +3240,14 @@

    +

    -
    +
    + + Markup: forms/table-drag/table-drag.twig + 
    <table class="tabledrag-processed">
 <thead><tr><th>Field</th><th>Label</th><th colspan="3">Format</th></tr></thead>
 <tbody>
@@ -2285,7 +3286,7 @@ 
    
     </td>
     <td>
       <div class="field-formatter-settings-edit-wrapper">
-        <input class="field-formatter-settings-edit form-submit ajax-processed" alt="Edit" type="image" id="edit-fields-field-image-settings-edit" name="field_image_formatter_settings_edit" src="http://drupal7x.dev/misc/configure.png">
+        <input class="field-formatter-settings-edit form-submit ajax-processed" value="Edit" type="button" id="edit-fields-field-image-settings-edit" name="field_image_formatter_settings_edit">
       </div>
     </td>
   </tr>
@@ -2358,7 +3359,7 @@ 
    
 </tbody>
 </table>
    -
    +
    Source: forms/table-drag/table-drag.scss, line 6 @@ -2370,12 +3371,27 @@

    + + + diff --git a/STARTERKIT/styleguide/section-layouts.html b/STARTERKIT/styleguide/section-layouts.html index 17c6785..97588c7 100644 --- a/STARTERKIT/styleguide/section-layouts.html +++ b/STARTERKIT/styleguide/section-layouts.html @@ -9,43 +9,43 @@ - - - - + + + + + + + + + - - - - - - - - - - - - - - + + + + + + + + + - +
    @@ -73,26 +73,6 @@

    STARTERKIT Style Guide

    3Layouts -
  • @@ -115,7 +95,7 @@

    STARTERKIT Style Guide

    -
    +

    @@ -129,6 +109,7 @@

    +

    The layout styling for major parts of the page that are included with the theme.

    @@ -142,332 +123,33 @@

    Source: layouts/layouts.scss, line 3

    -
    -
    -

    - - - 3.1 - - layouts.layout-center - - - Layout Center - -

    - -
    -

    All other layouts should be nested inside this centered layout to ensure that -content does not get too wide on very large screens.

    -

    Applying a .layout-* class to the same HTML element as .layout-center -would cause that element's grid to mis-align with the rest of the grid on the -page, but this component will automatically detect the other .layout-* -class and automatically use the .layout-center--shared-grid variant -instead.

    - -
    - -
    - -
    -
    - Examples
    - -
    - Default styling -
    - -
    -
    - This layout-center component has content that is centered on larger screens. -
    - -
    - -
    - .layout-center--shared-grid -
    -
    - If .layout-center is applied to the same div as another .layout- class, then this variant should be used to prevent the shared layout's grid from mis-aligning. Note: Each time a new .layout- component is created, this component will need to be modified. -
    -
    -
    - This layout-center component has content that is centered on larger screens. -
    - -
    -
    -
    - 
    <div class="layout-center [modifier class]">
-  This layout-center component has content that is centered on larger screens.
-</div>
-
    -
    - -
    - Source: layouts/layout-center/_layout-center.scss, line 5 -
    -
    -
    -
    -

    - - - 3.2 - - layouts.layout-3col - - - Responsive 3-column grid - -

    - -
    -

    The .layout-3col layout is a responsive grid layout that is:

    -
      -
    • 1 column at mobile sizes
      • -
    • 2 columns at tablet sizes
      • -
    • 3 columns at desktop sizes
      • -
    -

    The .layout-3col class is used on the container div for the layout. A grid -item in the container can be created using one of the following classes:

    -
      -
    • .layout-3col__full : 3-column wide grid item; starts a new row
      • -
    • .layout-3col__left-content : 2-column wide grid item, spanning columns 1 -and 2; starts a new row
      • -
    • .layout-3col__right-content : 2-column wide grid item, spanning columns 2 -and 3; starts a new row
      • -
    • .layout-3col__left-sidebar : 1-column wide grid item spanning column 1; -starts a new row on tablet screens
      • -
    • .layout-3col__first-left-sidebar : 1-column wide grid item spanning column 1; -spans column 1 and starts a new row on tablet screens only
      • -
    • .layout-3col__second-left-sidebar : 1-column wide grid item spanning column 1; -spans column 2 on tablet screens only
      • -
    • .layout-3col__right-sidebar : 1-column wide grid item spanning column 3; -starts a new row on tablet screens
      • -
    • .layout-3col__col-1 : 1-column wide grid item spanning column 1; starts a -new row
      • -
    • .layout-3col__col-2 : 1-column wide grid item spanning column 2
      • -
    • .layout-3col__col-3 : 1-column wide grid item spanning column 3; starts a -new row on tablet screens
      • -
    • .layout-3col__col-4 : At tablet sizes, the __col-x grid items will form -an irregular layout of 2 items in the first row and 1 item in the second -row. The __col-4 is a "hidden" item that does not appear on the -large-screen 3-column grid, but is a 1-column wide grid item spanning -column 2 on tablet screens.
      • -
    • .layout-3col__col-x : 1-column wide grid item spanning column 1; when -several of these are used inside a .layout-3col__grid-item-container or -.layout-3col, the first one is positioned like __col-1, the -second like __col-2, etc.
      • -
    -

    There are 2 ways to do a nested grid:

    -
      -
    1. Place a grid container div inside a grid item. Just apply the normal -classes to the nested grid container and its grid items.
      2. -
    2. The grid item's div is also the grid container for the nested grid. In -this case, the .layout3-col__grid-item-container class should be added -to the div to ensure its nested grid items align with the parent grid.
      3. -
    - -
    - -
    - -
    -
    - Example
    - - -
    -
    -
    - The .layout-3col__full grid item. -
    -
    - The .layout-3col__left-content grid item. -
    -
    - The .layout-3col__right-sidebar grid item. -
    -
    - The .layout-3col__right-content grid item. -
    -
    - The .layout-3col__left-sidebar grid item. -
    -
    - The .layout-3col__right-content grid item. -
    -
    - The .layout-3col__first-left-sidebar grid item. -
    -
    - The .layout-3col__second-left-sidebar grid item. -
    -
    - The .layout-3col__col-1 grid item. -
    -
    - The .layout-3col__col-2 grid item. -
    -
    - The .layout-3col__col-3 grid item. Don't forget to look for the .layout-3col__col-4 grid item at tablet sizes. -
    -
    - The .layout-3col__col-4 grid item. -
    -
    -
    - The first .layout-3col__col-x grid item in this nested grid. -
    -
    - The second .layout-3col__col-x grid item in this nested grid. -
    -
    - The third .layout-3col__col-x grid item in this nested grid. -
    -
    - The fourth .layout-3col__col-x grid item in this nested grid. -
    -
    - The fifth .layout-3col__col-x grid item in this nested grid. -
    -
    - The sixth .layout-3col__col-x grid item in this nested grid. -
    -
    -
    - -
    - -
    -
    - 
    <div class="layout-3col ">
-  <div class="layout-3col__full">
-    The <code>.layout-3col__full</code> grid item.
-  </div>
-  <div class="layout-3col__left-content">
-    The <code>.layout-3col__left-content</code> grid item.
-  </div>
-  <div class="layout-3col__right-sidebar">
-    The <code>.layout-3col__right-sidebar</code> grid item.
-  </div>
-  <div class="layout-3col__right-content">
-    The <code>.layout-3col__right-content</code> grid item.
-  </div>
-  <div class="layout-3col__left-sidebar">
-    The <code>.layout-3col__left-sidebar</code> grid item.
-  </div>
-  <div class="layout-3col__right-content">
-    The <code>.layout-3col__right-content</code> grid item.
-  </div>
-  <div class="layout-3col__first-left-sidebar">
-    The <code>.layout-3col__first-left-sidebar</code> grid item.
-  </div>
-  <div class="layout-3col__second-left-sidebar">
-    The <code>.layout-3col__second-left-sidebar</code> grid item.
-  </div>
-  <div class="layout-3col__col-1">
-    The <code>.layout-3col__col-1</code> grid item.
-  </div>
-  <div class="layout-3col__col-2">
-    The <code>.layout-3col__col-2</code> grid item.
-  </div>
-  <div class="layout-3col__col-3">
-    The <code>.layout-3col__col-3</code> grid item. Don't forget to look for the <code>.layout-3col__col-4</code> grid item at tablet sizes.
-  </div>
-  <div class="layout-3col__col-4">
-    The <code>.layout-3col__col-4</code> grid item.
-  </div>
-  <div class="layout-3col__full layout-3col__grid-item-container">
-    <div class="layout-3col__col-x">
-      The first <code>.layout-3col__col-x</code> grid item in this nested grid.
-    </div>
-    <div class="layout-3col__col-x">
-      The second <code>.layout-3col__col-x</code> grid item in this nested grid.
-    </div>
-    <div class="layout-3col__col-x">
-      The third <code>.layout-3col__col-x</code> grid item in this nested grid.
-    </div>
-    <div class="layout-3col__col-x">
-      The fourth <code>.layout-3col__col-x</code> grid item in this nested grid.
-    </div>
-    <div class="layout-3col__col-x">
-      The fifth <code>.layout-3col__col-x</code> grid item in this nested grid.
-    </div>
-    <div class="layout-3col__col-x">
-      The sixth <code>.layout-3col__col-x</code> grid item in this nested grid.
-    </div>
-  </div>
-</div>
-
    -
    - -
    - Source: layouts/layout-3col/_layout-3col.scss, line 1 -
    -
    -
    -
    -

    - - - 3.3 - - layouts.layout-swap - - - Layout swap - -

    - -
    -

    Uses absolute positioning and selective padding to make 2 elements appear to -swap places in the visual order while maintaining their original HTML source -order.

    - -
    - -
    - -
    -
    - Example
    - - -
    -
    -
    This element comes first in the HTML source order.
    -
    This element comes second in the HTML source order.
    -
    - -
    - -
    -
    - 
    <div class="layout-swap">
-  <div>This element comes <strong>first</strong> in the HTML source order.</div>
-  <div class="layout-swap__top">This element comes <strong>second</strong> in the HTML source order.</div>
-</div>
-
    -
    - -
    - Source: layouts/layout-swap/_layout-swap.scss, line 4 -
    -
    + + + diff --git a/STARTERKIT/styleguide/section-navigation.html b/STARTERKIT/styleguide/section-navigation.html index 0677ae9..b3297d3 100644 --- a/STARTERKIT/styleguide/section-navigation.html +++ b/STARTERKIT/styleguide/section-navigation.html @@ -9,43 +9,43 @@ - - - - + + + + + + + + + - - - - - - - - - - - - - - + + + + + + + + + - +
    @@ -145,7 +145,7 @@

    STARTERKIT Style Guide

    -
    +

    @@ -159,6 +159,7 @@

    +

    Navigation components are specialized design components that are used for page navigation.

    @@ -172,7 +173,7 @@

    Source: navigation/_navigation.scss, line 1

    -
    +

    @@ -186,6 +187,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The path to the current page in the form of a list of links.

    @@ -222,40 +274,54 @@ +

    -
    - 
    
-
-<nav class="breadcrumb " role="navigation" aria-labelledby="system-breadcrumb">
-  <h2 id="system-breadcrumb" class="visually-hidden">You are here</h2>
+                  
    
+            
+                              Markup: navigation/breadcrumb/breadcrumb.twig
+                          
+            
    {#
+/**
+ * @file
+ * Component for a breadcrumb trail.
+ *
+ * Variables:
+ * - modifier_class: [string] Classes to modify the default component styling.
+ * - heading: [string] Accessible heading.
+ * - breadcrumb: [array] The breadcrumb trail items. Each item is an object
+ *   containing:
+ *   - text: [string] Text of the item.
+ *   - url: [string] URL of the item (optional).
+ */
+#}
+{{ attach_library('STARTERKIT/breadcrumb') }}
+<nav class="breadcrumb {{modifier_class}}" role="navigation" aria-labelledby="system-breadcrumb">
+  <h2 id="system-breadcrumb" class="visually-hidden">{{ heading|default('You are here') }}</h2>
   <ol class="breadcrumb__list">
-          <li class="breadcrumb__item">
-                  <a href="#">Home</a>
-                          ›
-              </li>
-          <li class="breadcrumb__item">
-                  <a href="#">Level 1</a>
-                          ›
-              </li>
-          <li class="breadcrumb__item">
-                  <a href="#">Level 2</a>
-                          ›
-              </li>
-          <li class="breadcrumb__item">
-                  Current item
-                      </li>
-      </ol>
+    {% for item in breadcrumb %}
+      <li class="breadcrumb__item">
+        {% if item.url %}
+          <a href="{{ item.url }}">{{ item.text }}</a>
+        {% else %}
+          {{ item.text }}
+        {% endif %}
+        {% if not loop.last %}
+          ›
+        {% endif %}
+      </li>
+    {% endfor %}
+  </ol>
 </nav>
 
    
-
    +
    Source: navigation/breadcrumb/breadcrumb.scss, line 3
    -
    +

    @@ -269,6 +335,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Styles the "Read more…" links common in Drupal.

    @@ -288,23 +405,38 @@

    Read more…

    +

    -
    - 
    
-
-<div class="more-link ">
-      <a href="#">Read more…</a>
-  </div>
+                  
    
+            
+                              Markup: navigation/more-link/more-link.twig
+                          
+            
    {#
+/**
+ * @file
+ * Component for a more link.
+ *
+ * Variables:
+ * - modifier_class: [string] Classes to modify the default component styling.
+ * - content: [string] The component contents.
+ */
+#}
+{{ attach_library('STARTERKIT/more-link') }}
+<div class="more-link {{modifier_class}}">
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</div>
 
    
-
    +
    Source: navigation/more-link/more-link.scss, line 3

    • -
    +

    @@ -318,6 +450,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    A "nav menu" is secondary, hierarchical navigation which can be displayed to the side or below the main content.

    @@ -361,11 +544,15 @@

    +

    -
    - 
    <ul class="nav-menu ">
+                  
    
+            
+                              Markup: navigation/nav-menu/nav-menu.twig
+                          
+            
    <ul class="nav-menu {{modifier_class}}">
   <li class="nav-menu__item">
     <a href="/" class="nav-menu__link">Home</a>
   </li>
@@ -394,13 +581,13 @@ 
    
   </li>
 </ul>
 
    
-
    +
    Source: navigation/nav-menu/nav-menu.scss, line 6
    -
    +

    @@ -414,6 +601,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    A simple method to get navigation links to appear in one line.

    @@ -437,10 +675,14 @@

  • Ut
    • +

    -
    +
    + + Markup: navigation/navbar/navbar.twig + 
    <ul class="navbar clearfix">
   <li class="navbar__item"><a href="#">Home</a></li>
   <li class="navbar__item"><a href="#">Blandit Jugis</a></li>
@@ -451,13 +693,13 @@ 
    
   <li class="navbar__item"><a href="#">Ut</a></li>
 </ul>
    -
    +
    Source: navigation/navbar/navbar.scss, line 3
    -
    +

    @@ -471,6 +713,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Paged navigation is a list of page numbers when more than 1 page of content is available.

    @@ -513,11 +806,15 @@

    +

    -
    - 
    <ul class="pager ">
+                  
    
+            
+                              Markup: navigation/pager/pager.twig
+                          
+            
    <ul class="pager {{modifier_class}}">
   <li class="pager__item">
     <a title="Go to first page" href="/admin/content">« first</a>
   </li>
@@ -545,13 +842,13 @@ 
    
   </li>
 </ul>
 
    
-
    +
    Source: navigation/pager/pager.scss, line 3
    -
    +

    @@ -565,6 +862,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    To make the link completely hidden until a user tabs to the link, combine it with the visually-hidden component.

    @@ -584,10 +932,11 @@

    - +
    @@ -603,6 +952,7 @@

    Skip to main content +

    .visually-hidden.visually-hidden--focusable:focus @@ -617,22 +967,38 @@

    Skip to main content +

    -
    - 
    
-
-<a href="#main-content" class="skip-link [modifier class]">
-      Skip to main content
-  </a>
+                  
    
+            
+                              Markup: navigation/skip-link/skip-link.twig
+                          
+            
    {#
+/**
+ * @file
+ * Component for a skip link.
+ *
+ * Variables:
+ * - modifier_class: [string] Classes to modify the default component styling.
+ * - url: [string] The url to skip to.
+ * - text: [string] The link text.
+ */
+#}
+{{ attach_library('STARTERKIT/skip-link') }}
+<a href="{{ url|default('#main-content') }}" class="skip-link {{ modifier_class }}">
+  {% block content %}
+    {{ text|default('Skip to main content') }}
+  {% endblock %}
+</a>
 
    
-
    +
    Source: navigation/skip-link/skip-link.scss, line 3

    -
    +

    @@ -646,6 +1012,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    The primary and secondary tabs.

    @@ -665,7 +1082,7 @@

    -
    @@ -715,38 +1133,54 @@ +

    -
    - 
    
-
-  <h2 class="visually-hidden">Primary tabs</h2>
-<ul class="tabs clearfix [modifier class]">
-          <li class="tabs__tab is-active">
-              <a href="#" class="tabs__tab-link is-active">
-          View
-                      <span class="visually-hidden">(active tab)</span>
-                  </a>
-          </li>
-          <li class="tabs__tab ">
-              <a href="#" class="tabs__tab-link ">
-          Edit
-                  </a>
-          </li>
-          <li class="tabs__tab ">
-              <a href="#" class="tabs__tab-link ">
-          Delete
-                  </a>
-          </li>
-  </ul>
+                  
    
+            
+                              Markup: navigation/tabs/tabs.twig
+                          
+            
    {#
+/**
+ * @file
+ * Component for tabs.
+ *
+ * Variables:
+ * - heading: [string] Accessible heading.
+ * - modifier_class: [string] Classes to modify the default component styling.
+ * - tabs: [array] The tabs. Each tab is an object containing:
+ *   - active: [boolean] Whether the tab is the active tab.
+ *   - text: [string] Text of the item.
+ *   - url: [string] URL of the item (optional).
+ */
+#}
+{{ attach_library('STARTERKIT/tabs') }}
+{% if heading %}
+  <h2 class="visually-hidden">{{ heading }}</h2>
+{% endif %}
+<ul class="tabs clearfix {{modifier_class}}">
+  {% for tab in tabs %}
+    {% set activeClass = tab.active ? 'is-active' : '' %}
+    <li class="tabs__tab {{ activeClass }}">
+      {% block link %}
+        <a href="{{ tab.url }}" class="tabs__tab-link {{ activeClass }}">
+          {{ tab.text }}
+          {% if tab.active %}
+            <span class="visually-hidden">{{ activeLabel|default('(active tab)') }}</span>
+          {% endif %}
+        </a>
+      {% endblock link %}
+    </li>
+  {% endfor %}
+</ul>
 
    
-
    +
    Source: navigation/tabs/tabs.scss, line 3
    -
    +

    @@ -760,6 +1194,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    When the secondary tabs appear directly after the primary tabs, the styling is slightly different.

    @@ -818,55 +1303,21 @@ +

    -
    - 
    
-
-  <h2 class="visually-hidden">Primary tabs</h2>
-<ul class="tabs clearfix ">
-          <li class="tabs__tab is-active">
-              <a href="#" class="tabs__tab-link is-active">
-          View
-                      <span class="visually-hidden">(active tab)</span>
-                  </a>
-          </li>
-          <li class="tabs__tab ">
-              <a href="#" class="tabs__tab-link ">
-          Edit
-                  </a>
-          </li>
-          <li class="tabs__tab ">
-              <a href="#" class="tabs__tab-link ">
-          Delete
-                  </a>
-          </li>
-  </ul>
-
-
-
-  <h2 class="visually-hidden">Secondary tabs</h2>
-<ul class="tabs clearfix tabs--secondary">
-          <li class="tabs__tab is-active">
-              <a href="#" class="tabs__tab-link is-active">
-          View
-                      <span class="visually-hidden">(active tab)</span>
-                  </a>
-          </li>
-          <li class="tabs__tab ">
-              <a href="#" class="tabs__tab-link ">
-          Edit
-                  </a>
-          </li>
-          <li class="tabs__tab ">
-              <a href="#" class="tabs__tab-link ">
-          Delete
-                  </a>
-          </li>
-  </ul>
+                  
    
+            
+                              Markup: navigation/tabs/tabs--stacked.twig
+                          
+            
    {% include "tabs.twig" %}
+
+{% set modifier_class = 'tabs--secondary' %}
+{% set heading = "Secondary tabs" %}
+{% include "tabs.twig" %}
 
    
-
    +
    Source: navigation/tabs/tabs.scss, line 13 @@ -878,12 +1329,27 @@ + + + diff --git a/STARTERKIT/styleguide/section-sass.html b/STARTERKIT/styleguide/section-sass.html index a77687c..0be658a 100644 --- a/STARTERKIT/styleguide/section-sass.html +++ b/STARTERKIT/styleguide/section-sass.html @@ -9,43 +9,43 @@ - - - - + + + + + + + + + - - - - - - - - - - - - - - + + + + + + + + + - +
    @@ -105,16 +105,10 @@

    STARTERKIT Style Guide

    1.4.3Font faces, stacks and sizes. - -
  • - - 1.4.4Zen grids -
  • - 1.4.51.4.4Miscellaneous variables
    • @@ -199,7 +193,7 @@

    STARTERKIT Style Guide

    -
    +

    @@ -213,6 +207,7 @@

    +

    Documentation for colors and Sass mixins and variables.

    @@ -225,7 +220,7 @@

    Source: _init.scss, line 1

    -
    +

    @@ -239,6 +234,57 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    +

    Use the color() function to add colors to CSS properties. To learn more, read the Chroma documentation.

    @@ -253,8 +299,9 @@

    -

    branding

    The site's main colors. Can be used to define colors in other color schemes.

    color(black) uses the color: #000 This color is inherited by: grey-dark, grey, grey-light, grey-extra-light, text, border, autocomplete, button, button-disabled, fieldset-summary, menu-active, progress-bar-bg, progress-bar-border, resizable-grippie, row-stripe, row-disabled, skip-link-bg, status-highlight, warning, tabs-border, tab, tab-bg, tab-secondary, watermark
    color(grey-dark) uses the color: #666666 (black) This color is inherited by: progress-bar-border, skip-link-bg, tab-secondary
    color(grey) uses the color: #999999 (black) This color is inherited by: button-disabled, fieldset-summary
    color(grey-light) uses the color: #cccccc (black) This color is inherited by: border, progress-bar-bg, row-disabled, tabs-border, tab-bg
    color(grey-extra-light) uses the color: #eeeeee (black) This color is inherited by: resizable-grippie, row-stripe, watermark
    color(white) uses the color: #fff This color is inherited by: text-bg, autocomplete-bg, autocomplete-select, body-bg, skip-link, tabs-bg, tab-text-shadow
    color(blue) uses the color: #0072b9 This color is inherited by: link, link-visited, autocomplete-select-bg, progress-bar, status, status-bg
    color(red) uses the color: #c00 This color is inherited by: link-active, form-error, mark-highlight, error, error-bg
    color(yellow) uses the color: #fd0 This color is inherited by: mark-bg, preview-bg, warning-bg, warning-border, table-drag, table-select

    functional

    Colors used by functional parts of the design.

    color(text) uses the color: #000 (black) This color is inherited by: autocomplete, button, menu-active, status-highlight, warning, tab
    color(text-bg) uses the color: #fff (white) This color is inherited by: autocomplete-bg, body-bg, tabs-bg
    color(link) uses the color: #0072b9 (blue)
    color(link-visited) uses the color: #003353 (blue)
    color(link-active) uses the color: #c00 (red)
    color(border) uses the color: #cccccc (grey-light) This color is inherited by: tabs-border
    color(autocomplete) uses the color: #000 (text)
    color(autocomplete-bg) uses the color: #fff (text-bg)
    color(autocomplete-select) uses the color: #fff (white)
    color(autocomplete-select-bg) uses the color: #0072b9 (blue)
    color(body-bg) uses the color: #fff (text-bg)
    color(button) uses the color: #000 (text)
    color(button-disabled) uses the color: #999999 (grey)
    color(fieldset-summary) uses the color: #999999 (grey)
    color(form-error) uses the color: #c00 (red)
    color(mark-highlight) uses the color: #c00 (red)
    color(mark-bg) uses the color: #fd0 (yellow)
    color(menu-active) uses the color: #000 (text)
    color(preview-bg) uses the color: #fffadb (yellow)
    color(progress-bar) uses the color: #0072b9 (blue)
    color(progress-bar-bg) uses the color: #cccccc (grey-light)
    color(progress-bar-border) uses the color: #666666 (grey-dark)
    color(resizable-grippie) uses the color: #eeeeee (grey-extra-light)
    color(row-stripe) uses the color: #eeeeee (grey-extra-light)
    color(row-disabled) uses the color: #cccccc (grey-light)
    color(skip-link) uses the color: #fff (white)
    color(skip-link-bg) uses the color: #666666 (grey-dark)
    color(status) uses the color: #0072b9 (blue) This color is inherited by: status-bg
    color(status-bg) uses the color: #f6fcff (status)
    color(status-highlight) uses the color: #000 (text)
    color(warning) uses the color: #000 (text)
    color(warning-bg) uses the color: #fffce6 (yellow)
    color(warning-border) uses the color: #fd0 (yellow)
    color(error) uses the color: #c00 (red) This color is inherited by: error-bg
    color(error-bg) uses the color: #fff0f0 (error)
    color(tabs-border) uses the color: #cccccc (border)
    color(tabs-bg) uses the color: #fff (text-bg)
    color(tab) uses the color: #000 (text)
    color(tab-text-shadow) uses the color: #fff (white)
    color(tab-bg) uses the color: #dddddd (grey-light)
    color(tab-secondary) uses the color: #666666 (grey-dark)
    color(table-drag) uses the color: #fffadb (yellow)
    color(table-select) uses the color: #fffdf0 (yellow)
    color(watermark) uses the color: #eeeeee (grey-extra-light)
    + /*! typey | GPLv2 License | https://github.com/jptaranto/typey

    branding

    The site's main colors. Can be used to define colors in other color schemes.

    color(black) uses the color: #000 This color is inherited by: grey-dark, grey, grey-light, grey-extra-light, text, border, autocomplete, button, button-disabled, fieldset-summary, menu-active, progress-bar-bg, progress-bar-border, resizable-grippie, row-stripe, row-disabled, skip-link-bg, status-highlight, warning, tabs-border, tab, tab-bg, tab-secondary, watermark
    color(grey-dark) uses the color: #666666 (black) This color is inherited by: progress-bar-border, skip-link-bg, tab-secondary
    color(grey) uses the color: #999999 (black) This color is inherited by: button-disabled, fieldset-summary
    color(grey-light) uses the color: #cccccc (black) This color is inherited by: border, progress-bar-bg, row-disabled, tabs-border, tab-bg
    color(grey-extra-light) uses the color: #eeeeee (black) This color is inherited by: resizable-grippie, row-stripe, watermark
    color(white) uses the color: #fff This color is inherited by: text-bg, autocomplete-bg, autocomplete-select, body-bg, skip-link, tabs-bg, tab-text-shadow
    color(navy) uses the color: #001f3f
    color(blue) uses the color: #0074d9 This color is inherited by: link, link-visited, autocomplete-select-bg, progress-bar, status, status-bg
    color(aqua) uses the color: #7fdbff
    color(teal) uses the color: #39cccc
    color(olive) uses the color: #3d9970
    color(green) uses the color: #2ecc40
    color(lime) uses the color: #01ff70
    color(yellow) uses the color: #ffdc00 This color is inherited by: mark-bg, preview-bg, warning-bg, warning-border, table-drag, table-select
    color(orange) uses the color: #ff851b
    color(red) uses the color: #ff4136 This color is inherited by: link-active, form-error, mark-highlight, error, error-bg
    color(fuchsia) uses the color: #f012be
    color(purple) uses the color: #b10dc9
    color(maroon) uses the color: #85144b
    color(silver) uses the color: #ddd

    functional

    Colors used by functional parts of the design.

    color(text) uses the color: #000 (black) This color is inherited by: autocomplete, button, menu-active, status-highlight, warning, tab
    color(text-bg) uses the color: #fff (white) This color is inherited by: autocomplete-bg, body-bg, tabs-bg
    color(link) uses the color: #0074d9 (blue)
    color(link-visited) uses the color: #003d73 (blue)
    color(link-active) uses the color: #ff4136 (red)
    color(border) uses the color: #cccccc (grey-light) This color is inherited by: tabs-border
    color(autocomplete) uses the color: #000 (text)
    color(autocomplete-bg) uses the color: #fff (text-bg)
    color(autocomplete-select) uses the color: #fff (white)
    color(autocomplete-select-bg) uses the color: #0074d9 (blue)
    color(body-bg) uses the color: #fff (text-bg)
    color(button) uses the color: #000 (text)
    color(button-disabled) uses the color: #999999 (grey)
    color(fieldset-summary) uses the color: #999999 (grey)
    color(form-error) uses the color: #ff4136 (red)
    color(mark-highlight) uses the color: #ff4136 (red)
    color(mark-bg) uses the color: #ffdc00 (yellow)
    color(menu-active) uses the color: #000 (text)
    color(preview-bg) uses the color: #fffadb (yellow)
    color(progress-bar) uses the color: #0074d9 (blue)
    color(progress-bar-bg) uses the color: #cccccc (grey-light)
    color(progress-bar-border) uses the color: #666666 (grey-dark)
    color(resizable-grippie) uses the color: #eeeeee (grey-extra-light)
    color(row-stripe) uses the color: #eeeeee (grey-extra-light)
    color(row-disabled) uses the color: #cccccc (grey-light)
    color(skip-link) uses the color: #fff (white)
    color(skip-link-bg) uses the color: #666666 (grey-dark)
    color(status) uses the color: #0074d9 (blue) This color is inherited by: status-bg
    color(status-bg) uses the color: white (status)
    color(status-highlight) uses the color: #000 (text)
    color(warning) uses the color: #000 (text)
    color(warning-bg) uses the color: #fffce6 (yellow)
    color(warning-border) uses the color: #ffdc00 (yellow)
    color(error) uses the color: #ff4136 (red) This color is inherited by: error-bg
    color(error-bg) uses the color: white (error)
    color(tabs-border) uses the color: #cccccc (border)
    color(tabs-bg) uses the color: #fff (text-bg)
    color(tab) uses the color: #000 (text)
    color(tab-text-shadow) uses the color: #fff (white)
    color(tab-bg) uses the color: #dddddd (grey-light)
    color(tab-secondary) uses the color: #666666 (grey-dark)
    color(table-drag) uses the color: #fffadb (yellow)
    color(table-select) uses the color: #fffdf0 (yellow)
    color(watermark) uses the color: #eeeeee (grey-extra-light)
    +

    @@ -263,7 +310,7 @@

    Source: init/_colors.scss, line 3

    -
    +

    @@ -277,6 +324,7 @@

    +

    To make it easier to use all variables and mixins in any Sass file in this project, each .scss file has a @import 'init'; declaration. The _init.scss @@ -298,7 +346,7 @@

    Source: _init.scss, line 9

    -
    +

    @@ -312,6 +360,7 @@

    +

    The following sass modules are shared with all .scss files:

    Additional pre-built libraries can be found on the Sache website.

    @@ -329,10 +378,10 @@

    - Source: _init.scss, line 35 + Source: _init.scss, line 41

    -
    +

    @@ -346,6 +395,7 @@

    +

    Set variables for this site before a library sets its !default value.

    @@ -358,7 +408,7 @@

    Source: init/_variables.scss, line 1

    -
    +

    @@ -372,6 +422,7 @@

    +

    Use the respond-to() mixin to use named breakpoints. Documentation is available in the Breakpoint wiki @@ -386,7 +437,7 @@

    Source: init/_variables.scss, line 114

    -
    +

    @@ -400,6 +451,7 @@

    +

    For older versions of browsers, some Sass relies on the support-for() to control whether extra CSS is needed to be output. The support-for() @@ -415,7 +467,7 @@

    Source: init/_variables.scss, line 8

    -
    +

    @@ -429,6 +481,7 @@

    +

    Font styling and line heights are controlled by the several variables that used by mixins like type-layout(), margin-top(), and margin-bottom(). @@ -444,41 +497,12 @@

    Source: init/_variables.scss, line 27

    -
    -
    -

    - - - 1.4.4 - - sass.variables.zen-grids - - - Zen grids - -

    - -
    -

    The default grid system is built using the Zen Grids sass module. Full -documentation is available on the Zen Grids website.

    -

    Note: if you are more comfortable using another grid system, you can easily -remove Zen Grids and its layouts.

    - -
    - -
    - - -
    - Source: init/_variables.scss, line 136 -
    -
    -
    +

    - 1.4.5 + 1.4.4 sass.variables.misc @@ -487,6 +511,7 @@

    +

    $indent-amount controls the amount lists, blockquotes and comments are indented.

    $include-rtl controls whether RTL styles are output. Rather than include a separate *-rtl.css file, Zen 6 uses Drupal 8's standard [dir="rtl"] selector for RTL language support.

    @@ -497,10 +522,10 @@

    - Source: init/_variables.scss, line 175 + Source: init/_variables.scss, line 149

    -
    +

    @@ -514,6 +539,7 @@

    +

    Custom functions used on this site.

    @@ -523,10 +549,10 @@

    - Source: _init.scss, line 70 + Source: _init.scss, line 74

    -
    +

    @@ -540,6 +566,7 @@

    +

    Custom mixins used on this site.

    @@ -549,10 +576,10 @@

    - Source: _init.scss, line 59 + Source: _init.scss, line 63

    -
    +

    @@ -566,6 +593,7 @@

    +

    Allows the bottom of an element to extend to the bottom of all floated children elements. @see http://nicolasgallagher.com/micro-clearfix-hack/

    @@ -581,7 +609,7 @@

    Source: init/clearfix/_clearfix.scss, line 1

    -
    +

    @@ -595,6 +623,7 @@

    +

    If you include your images next to your component Sass files, you need to specify a url() to point from the generated CSS to the Sass source like this:

    @@ -648,7 +677,7 @@

    Source: init/image-url/_image-url.scss, line 7

    -
    +

    @@ -662,6 +691,7 @@

    +

    Includes Right-To-Left language support by adding a parent selector of [dir="rtl"]. Since the dir attribute is usually defined on the html element @@ -690,7 +720,7 @@

    Source: init/rtl/_rtl.scss, line 3

    -
    +

    @@ -704,6 +734,7 @@

    +

    Make an element visually hidden, but accessible to screen readers, etc. @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

    @@ -717,7 +748,7 @@

    Source: init/visually-hidden/_visually-hidden.scss, line 3

    -
    +

    @@ -731,6 +762,7 @@

    +

    Makes an element visually hidden by default, but visible when receiving focus.

    @@ -744,7 +776,7 @@

    Source: init/visually-hidden/_visually-hidden.scss, line 31

    -
    +

    @@ -758,6 +790,7 @@

    +

    Turns off the visually-hidden effect.

    @@ -776,12 +809,27 @@

    + + + From 20bd8edadca35bf91d37d7b3103539af9b79f2ba Mon Sep 17 00:00:00 2001 From: iberdinsky Date: Wed, 22 Nov 2017 17:26:37 +0600 Subject: [PATCH 2/2] Fixes to susy3/zen branch --- .../components/components/footer/footer.scss | 2 +- .../components/components/header/header.scss | 2 + STARTERKIT/components/init/_variables.scss | 11 ++- .../layouts/layout-3col/_layout-3col.scss | 48 ++++++++++++ .../layouts/layout-center/_layout-center.scss | 10 ++- .../layouts/layout-swap/_layout-swap.scss | 16 +++- STARTERKIT/components/layouts/layouts.scss | 2 + .../layout/maintenance-page.html.twig | 76 +++---------------- STARTERKIT/templates/layout/page.html.twig | 46 ++--------- 9 files changed, 103 insertions(+), 110 deletions(-) create mode 100644 STARTERKIT/components/layouts/layout-3col/_layout-3col.scss diff --git a/STARTERKIT/components/components/footer/footer.scss b/STARTERKIT/components/components/footer/footer.scss index 824f8a2..9363e4b 100644 --- a/STARTERKIT/components/components/footer/footer.scss +++ b/STARTERKIT/components/components/footer/footer.scss @@ -10,6 +10,6 @@ %footer { @include type-layout(s, 1); @include margin-top(2, s); - @include padding(1 0, s); + padding: 0 gutter()/2; border-top: 1px solid color(border); } diff --git a/STARTERKIT/components/components/header/header.scss b/STARTERKIT/components/components/header/header.scss index fac3dc6..19e1db6 100644 --- a/STARTERKIT/components/components/header/header.scss +++ b/STARTERKIT/components/components/header/header.scss @@ -8,6 +8,8 @@ .header, %header { + padding: 0 gutter()/2; + // Wrapping link for logo. &__logo { float: left; diff --git a/STARTERKIT/components/init/_variables.scss b/STARTERKIT/components/init/_variables.scss index 1b5ae13..40cbc91 100644 --- a/STARTERKIT/components/init/_variables.scss +++ b/STARTERKIT/components/init/_variables.scss @@ -133,13 +133,18 @@ $desktop: 1200px; // Output media queries where the above px are converted to ems. // @include breakpoint-set('to ems', true); -// Susy settings. +// Susy settings +// +// Susy grid settings. Documentation on: +// [Susy website](http://oddbird.net/susy/). +// +// Style guide: sass.variables.susy $susy: ( 'columns': susy-repeat(12), 'gutters': 15px, 'spread': 'narrow', - 'container-spread': 'narrow', - 'svg-grid-colors': hsl(334, 65%, 52%), + 'container-spread': 'wide', + 'svg-grid-colors': hsla(334, 65%, 52%, .7) hsla(334, 65%, 52%, .3), ); // See $include-rtl below. diff --git a/STARTERKIT/components/layouts/layout-3col/_layout-3col.scss b/STARTERKIT/components/layouts/layout-3col/_layout-3col.scss new file mode 100644 index 0000000..e116938 --- /dev/null +++ b/STARTERKIT/components/layouts/layout-3col/_layout-3col.scss @@ -0,0 +1,48 @@ +// Example page layout +// +// Markup: +//
    +//
    +// Page content +//
    +// +//
    +// +// Style guide: layouts.layout-3col + +.layout-3col, +%layout-3col { + + &__content { + padding: 0 gutter()/2; + } + + &__sidebar { + padding: 0 gutter()/2; + } + + + @include respond-to(tablet) { + display: flex; + + &__content { + flex-basis: span(6 wide); + } + + &__sidebar { + flex-basis: span(6 wide); + } + } + + @include respond-to(desktop) { + &__content { + flex-basis: span(8 wide); + } + + &__sidebar { + flex-basis: span(4 wide); + } + } +} diff --git a/STARTERKIT/components/layouts/layout-center/_layout-center.scss b/STARTERKIT/components/layouts/layout-center/_layout-center.scss index 1e32664..08790ae 100644 --- a/STARTERKIT/components/layouts/layout-center/_layout-center.scss +++ b/STARTERKIT/components/layouts/layout-center/_layout-center.scss @@ -1,6 +1,14 @@ +// Container layout +// +// Markup: +//
    +// Block content +//
    +// +// Style guide: layouts.layout-center + .layout-center, %layout-center { - background: susy-svg-grid() no-repeat scroll; max-width: $mobile; margin: 0 auto; width: 100%; diff --git a/STARTERKIT/components/layouts/layout-swap/_layout-swap.scss b/STARTERKIT/components/layouts/layout-swap/_layout-swap.scss index ffa22a3..ee8283a 100644 --- a/STARTERKIT/components/layouts/layout-swap/_layout-swap.scss +++ b/STARTERKIT/components/layouts/layout-swap/_layout-swap.scss @@ -2,18 +2,30 @@ $layout-swap-height: 2 * $base-line-height; // Layout swap +// +// Uses absolute positioning and selective padding to make 2 elements appear to +// swap places in the visual order while maintaining their original HTML source +// order. +// +// Markup: +//
    +//
    This element comes first in the HTML source order.
    +//
    This element comes second in the HTML source order.
    +//
    +// +// Style guide: layouts.layout-swap .layout-swap, %layout-swap { position: relative; - @include respond-to(xs) { + @include respond-to(tablet) { // Move all the children down to make room for the "top" element. padding-top: $layout-swap-height; } &__top { - @include respond-to(xs) { + @include respond-to(tablet) { position: absolute; top: 0; height: $layout-swap-height; diff --git a/STARTERKIT/components/layouts/layouts.scss b/STARTERKIT/components/layouts/layouts.scss index 4901523..125e9b4 100644 --- a/STARTERKIT/components/layouts/layouts.scss +++ b/STARTERKIT/components/layouts/layouts.scss @@ -7,4 +7,6 @@ // // Style guide: layouts +@import 'layout-3col/layout-3col'; @import 'layout-center/layout-center'; +@import 'layout-swap/layout-swap'; diff --git a/STARTERKIT/templates/layout/maintenance-page.html.twig b/STARTERKIT/templates/layout/maintenance-page.html.twig index a20cd5d..bd93120 100644 --- a/STARTERKIT/templates/layout/maintenance-page.html.twig +++ b/STARTERKIT/templates/layout/maintenance-page.html.twig @@ -14,78 +14,26 @@
    -
    - - {# Decide on layout classes by checking if sidebars have content. #} - {% if page.sidebar_first and page.sidebar_second %} - {% set content_class = 'layout-3col__right-content' %} - {% set sidebar_first_class = 'layout-3col__first-left-sidebar' %} - {% set sidebar_second_class = 'layout-3col__second-left-sidebar' %} - {% elseif (page.sidebar_second) %} - {% set content_class = 'layout-3col__left-content' %} - {% set sidebar_first_class = '' %} - {% set sidebar_second_class = 'layout-3col__right-sidebar' %} - {% elseif (page.sidebar_first) %} - {% set content_class = 'layout-3col__right-content' %} - {% set sidebar_first_class = 'layout-3col__left-sidebar' %} - {% set sidebar_second_class = '' %} - {% else %} - {% set content_class = 'layout-3col__full' %} - {% set sidebar_first_class = '' %} - {% set sidebar_second_class = '' %} - {% endif %} - - {% if page.primary_menu %} -
    - {{ page.primary_menu }} -
    - {% endif %} - -
    + {{ page.primary_menu }} +
    +
    {{ page.highlighted }} + {{ page.breadcrumb }} {# link target is in html.html.twig #} - {% if title %} -

    {{ title }}

    - {% endif %} + {{ page.title }} + {{ page.help }} {{ page.content }} -
    - {% if page.sidebar_first %} - - {% endif %} - - {% if page.sidebar_second %} - - {% endif %} - +
    {{ page.footer }} diff --git a/STARTERKIT/templates/layout/page.html.twig b/STARTERKIT/templates/layout/page.html.twig index dd4551f..ccf3ca9 100644 --- a/STARTERKIT/templates/layout/page.html.twig +++ b/STARTERKIT/templates/layout/page.html.twig @@ -53,54 +53,22 @@ {{ page.secondary_menu }}

    -
    - - {# Decide on layout classes by checking if sidebars have content. #} - {% if page.sidebar_first and page.sidebar_second %} - {% set content_class = 'layout-3col__right-content' %} - {% set sidebar_first_class = 'layout-3col__first-left-sidebar' %} - {% set sidebar_second_class = 'layout-3col__second-left-sidebar' %} - {% elseif (page.sidebar_second) %} - {% set content_class = 'layout-3col__left-content' %} - {% set sidebar_first_class = '' %} - {% set sidebar_second_class = 'layout-3col__right-sidebar' %} - {% elseif (page.sidebar_first) %} - {% set content_class = 'layout-3col__right-content' %} - {% set sidebar_first_class = 'layout-3col__left-sidebar' %} - {% set sidebar_second_class = '' %} - {% else %} - {% set content_class = 'layout-3col__full' %} - {% set sidebar_first_class = '' %} - {% set sidebar_second_class = '' %} - {% endif %} - -
    - {{ page.primary_menu }} -
    - -
    + {{ page.primary_menu }} +
    +
    {{ page.highlighted }} {{ page.breadcrumb }} {# link target is in html.html.twig #} {{ page.title }} {{ page.help }} {{ page.content }} -
    - {% if page.sidebar_first %} - - {% endif %} - - {% if page.sidebar_second %} - - {% endif %} - +
    {{ page.footer }}