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.

Global

components/global — Global components are design components that appear on all pages of the site, e.g. navigation components.

Navigation

components/navigation — Navigation components are specialized design components that are applied to website navigation.

Common

components/common — Miscellaneous components are grouped together, but feel free to further categorize these.

Layouts

components/layouts — Layout components position major chunks of the page. They just apply positioning, no other styles.

Forms

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

Utility

components/utility — Utility components are specialized components that are often used to easily fix complex CSS problems.

HTML Defaults

components/base — The “base components” are CSS styles that only apply to HTML elements. Since all of the rulesets in this class of styles are HTML elements, the styles apply automatically.

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

Sass

components/init — This Sass includes various Sass variables, functions and mixins and also initializes everything we need for all other Sass files: variables, 3rd-party libraries, custom mixins and custom functions.

Build files

components/asset-builds — Files that are auto-generated from source files, e.g. minimized CSS files and minimized JS files.

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

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 file is in charge of importing all the other partials needed for the project.

The initialization partial is organized in this way:

• First we set any shared Sass variables.
• Next we import Sass modules.
• Last we define our custom mixins for this project.

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

• Breakpoint
• Chroma
• Support-for
• Typey
• Zen Grids

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

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

Use the respond-to() mixin to use named breakpoints. Documentation is available in the Breakpoint wiki pages.

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() function and the $support-for variable are documented on the support-for homepage.

Font styling and line heights are controlled by the several variables that used by mixins like type-layout(), margin-top(), and margin-bottom(). These variable and mixins are documented on the Typey homepage.

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.

$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.

Custom functions used on this site.

Custom mixins used on this site.

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

We use the micro-clearfix, optimized for use in @extend where fewer & is better.

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:

content: url(../sass/components/is-quite/long.svg);

With the image-url() function the path to all your components is assumed to start with ../sass/components/ and you just need to give it the last, short bit of the path in your Sass code like this:

content: image-url(is-quite/short.svg);

If you want to point at an image that is not in the components sub-directory of your sass directory, you can override the default $subdirectory by passing it in as the first parameter of image-url() like this:

content: image-url(base, grouping/blockquote.svg);

which would output url(../sass/base/grouping/blockquote.svg).

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 of a page, using this mixin on a ruleset that matches the html element won't work.

Can be turned off globally by setting $include-rtl: false;.

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

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

Turns off the visually-hidden effect.