Spacing
The Carbon layout package helps teams build consistent experiences through spacing and alignment.
Get started
To install @carbon/layout in your project, you will need to run the following
command using npm:
npm install -S @carbon/layout
If you prefer Yarn, use the following command instead:
yarn add @carbon/layout
Usage
@carbon/layout provides a couple of useful utilities alongside the
specification for the grid system for the IBM Design Language. This package
includes:
| Feature | Description |
|---|---|
| Breakpoints | Variables and settings for the IBM Design Grid, including gutter and breakpoints. It also includes helpers for working with breakpoints |
| Unit conversion | Helpers for converting from px to rem or em. |
| Key heights | Helpers for working with key heights at different breakpoints |
| Mini unit | Helpers for working in multiples of the mini-unit |
| Spacing | Provides a spacing scale and helper for using steps in the scale |
One important thing to remember is that @carbon/layout is not responsible for
the grid itself. If you are looking for a grid implementation to use, definitely
checkout the @carbon/grid package.
@carbon/layout provides the above features in both Sass and JavaScript. If
you’re looking for support in a different language, feel free to file an issue
proposing the new addition!