Skip to content

Latest commit

 

History

History
 
 

chrome

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
CHANGELOG.md
CHANGELOG.md
 
 
README.md
README.md
 
 
package.json
package.json
 
 

README.md

@zendeskgarden/css-chrome npm version

This package contains a variety of classes for handling consistent product page navigation, headers, and layout.

Installation

npm install @zendeskgarden/css-chrome

Usage

Once installed, chrome CSS can be accessed via postcss-import.

@import '@zendeskgarden/css-chrome';

Component CSS provides styling for the following basic page structure (actual HTML elements may vary).

<body class="c-chrome">
  <nav class="c-chrome__nav">
    <a class="c-chrome__nav__item">...</a>
    <!-- additional nav items -->
  </nav>
  <div class="c-chrome__body">
    <header class="c-chrome__body__header">
      <button class="c-chrome__body__header__item">...</button>
      <!-- additional header items -->
    </header>
    <div class="c-chrome__body__content">
      <main class="c-chrome__body__content__main"></main>
    </div>
  </div>
</body>

Modifications

See http://zendeskgarden.github.io/css-components/chrome/ for a variety of chrome modification classes, including dark mode, support for RTL, standalone headers, branded nav, etc.

Accessibility

Use the following checklist to ensure the chrome follows accessibility best practice.

  • Make sure all nav and header items are keyboard tabbable.
  • Be sure to use a elements for navigational items and button elements for action items (i.e. menus).
  • Use aria-current to indicate the current item in the nav.