@zendeskgarden/css-chrome NPM

@zendeskgarden/css-chrome

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.

@zendeskgarden/css-chrome

Installation

Usage

Modifications

Accessibility