Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@itwin/itwinui-layouts-css

iTwin15.2kMIT0.4.0

iTwinUI CSS package that provides classes for most common layouts

layouts, css, sass, scss, html, ui, ux, standards, bentley systems, itwin, itwinui

readme

iTwinUI-layouts logo

An open-source design system that helps us build a unified web experience.

itwinui-layouts on npm Build status

Key features

iTwinUI-layouts places given elements (eg. iTwinUI) accordingly within the page with minimal effort on the development side.

Installation

npm install @itwin/itwinui-layouts-css
yarn add @itwin/itwinui-layouts-css

Usage

// app.css
import '@itwin/itwinui-layouts-css/styles.css';
<!-- app.html -->
<div class="iui-layouts-page">
  <div class="iui-layouts-page-header">
    <!-- Your header code -->
  </div>
  <div class="iui-layouts-page-sidenav">
    <!-- Your side navigation -->
  </div>
  <div class="iui-layouts-page-content iui-layouts-page-content-padded">
    <!-- Your content (will be padded) -->
  </div>
</div>

Contributing

We welcome you to contribute and make this layouts library better. You can submit feature requests or bugs by creating an issue. Please read our CONTRIBUTING.md for more information.