Layout helpers for digital and software products using the Carbon Design System
To install @carbon/layout in your project, you will need to run the following
command using npm:
npm install -S @carbon/layoutIf you prefer Yarn, use the following command instead:
yarn add @carbon/layout@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!
If you're looking for @carbon/layout API documentation, check out:
We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide! 👀
Licensed under the Apache 2.0 License.