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:#fffThis 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:#0074d9This 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:#ffdc00This 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:#ff4136This 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/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 7a7daf0..40cbc91 100644
--- a/STARTERKIT/components/init/_variables.scss
+++ b/STARTERKIT/components/init/_variables.scss
@@ -119,53 +119,32 @@ $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
+// Susy settings
//
-// The default grid system is built using the Zen Grids sass module. Full
-// documentation is available on the [Zen Grids website](http://zengrids.com/).
+// Susy grid settings. Documentation on:
+// [Susy website](http://oddbird.net/susy/).
//
-// 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,
- ),
+// Style guide: sass.variables.susy
+$susy: (
+ 'columns': susy-repeat(12),
+ 'gutters': 15px,
+ 'spread': 'narrow',
+ '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
index 4206e6f..e116938 100644
--- a/STARTERKIT/components/layouts/layout-3col/_layout-3col.scss
+++ b/STARTERKIT/components/layouts/layout-3col/_layout-3col.scss
@@ -1,162 +1,48 @@
-// Responsive 3-column grid
+// Example page layout
//
-// 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
+// Markup:
+//
+//
+// Page content
+//
+//
+//
//
// 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);
+ &__content {
+ padding: 0 gutter()/2;
}
- @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();
- }
+ &__sidebar {
+ padding: 0 gutter()/2;
}
- @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);
- }
+ @include respond-to(tablet) {
+ display: flex;
- &__right-sidebar {
- @include zen-new-row(right);
- @include zen-grid-item(1, 1, right);
+ &__content {
+ flex-basis: span(6 wide);
}
- &__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);
+ &__sidebar {
+ flex-basis: span(6 wide);
}
+ }
- &__col-3,
- &__col-x:nth-child(3n) {
- @include zen-new-row(none);
- @include zen-grid-item(1, 3);
+ @include respond-to(desktop) {
+ &__content {
+ flex-basis: span(8 wide);
}
- &__col-4 {
- display: none;
+ &__sidebar {
+ flex-basis: span(4 wide);
}
}
-
- // 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..08790ae 100644
--- a/STARTERKIT/components/layouts/layout-center/_layout-center.scss
+++ b/STARTERKIT/components/layouts/layout-center/_layout-center.scss
@@ -1,64 +1,23 @@
-// 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.
+// Container layout
//
-// .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
+// Markup:
+//
+// Block content
+//
//
// Style guide: layouts.layout-center
.layout-center,
%layout-center {
- @include zen-apply-gutter-padding();
+ 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..ee8283a 100644
--- a/STARTERKIT/components/layouts/layout-swap/_layout-swap.scss
+++ b/STARTERKIT/components/layouts/layout-swap/_layout-swap.scss
@@ -7,7 +7,11 @@ $layout-swap-height: 2 * $base-line-height;
// swap places in the visual order while maintaining their original HTML source
// order.
//
-// Markup: layout-swap.twig
+// Markup:
+//
+//
This element comes first in the HTML source order.
+//
This element comes second in the HTML source order.
+//
//
// Style guide: layouts.layout-swap
@@ -15,13 +19,13 @@ $layout-swap-height: 2 * $base-line-height;
%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/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..125e9b4 100644
--- a/STARTERKIT/components/layouts/layouts.scss
+++ b/STARTERKIT/components/layouts/layouts.scss
@@ -9,6 +9,4 @@
@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
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="{{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>
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
<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>
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
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 shouldstill 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>.
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 shouldstill 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>.
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.
<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>
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>
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>
<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>
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 @@
<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>
<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>
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 @@
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 {{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
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 @@
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
+
+
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.
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 @@
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 @@
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
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 @@
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
+
+
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
-
.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:
-
-
Place a grid container div inside a grid item. Just apply the normal
-classes to the nested grid container and its grid items.
-
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.
-
-
-
-
-
-
-
-
- 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
-
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
-
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 @@
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 @@
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 @@
$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
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:
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 @@
+
Jane A. User replied on Permalink @@ -405,6 +569,7 @@