This package has been deprecated

Author message:

Package no longer supported. Use @zendeskgarden/react-chrome instead.

@zendeskgarden/css-chrome

4.1.20 • Public • Published

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

Package Sidebar

Install

npm i @zendeskgarden/css-chrome

Weekly Downloads

1

Version

4.1.20

License

Apache-2.0

Unpacked Size

81.9 kB

Total Files

17

Last publish

Collaborators

  • zendesk-garden