Style Guide

Style Guide Components

Style Guide Header
- Header logo, menu, styleguide specific header js and css.
- /source/_patterns/03-organisms/styleguide/styleguide-header/styleguide-header.twig
Style Guide Side Navigation
- Side navigation is generated from yml file.
- /source/_patterns/06-styleguide/styleguide.yml
Style Guide Main Content
- Used to build style guide content.
- /source/_patterns/06-styleguide/styleguide.twig
Style Guide Component
- Used to include patterns in styleguide.twig.
- /source/_patterns/06-styleguide/_styleguide-component.twig
Style Guide Footer
- Style Guide footer and styleguide specific js.
- /source/_patterns/06-styleguide/_styleguide-component.twig

Updating Style Guide

Most updates will be done in 06-styleguide/styleguide.twig and 06-styleguide/styleguide.yml.

styleguide.twig - This is where the main content area is constructed.
styleguide.yml - This is used to generate the styleguide side navigation.

Including Patterns

To add a pattern to the page you will need to include the _styleguide-component.twig with pattern and component_id. Full documentation of options can be found in _styleguide-component.twig.

  {% include("_styleguide-component.twig") with {
    component_title: 'Standard link',
    pattern: '@atoms/_standard-links',
    component_id: 'link-general',
    container_wrapper: true,
    col_classes: 'col-sm-12',
  } %}

When adding a pattern you need to also add it to the styleguide.yml file. The component_id used will need to match in styleguide.yml.

Creating Style Guide Categories

Patterns can be grouped together by wrapping patterns in a div with .styleguide-category class. Category title and intro text can be added. Example code below:

  <div class="styleguide-category" id="dsi-[component_id]">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h2 class="styleguide-category__title typog-primary">[ category title ]</h2>
          <div class="styleguide-category__content typog-intro">
            [ category intro text ]
          </div>
        </div>
      </div>
    </div>

    [category content]

  </div>
  <div class="styleguide-category__separator"></div>

Categories need to also be added to the styleguide.yml file.

Cynthia E. Brown, M.D.

Address

If this is a medical emergency, please call 9-1-1