An open-source design system that helps us build a unified web experience.
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.