@carbon/layout

Layout helpers for digital and software products using the Carbon Design System

Getting 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!

🙌 Contributing

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 ! 👀

📝 License

Licensed under the Apache 2.0 License.