@stead/grid

Grid for digital and software products using the Stead Design System

Getting started

To install @stead/grid in your project, you will need to run the following command using npm:

npm install -S @stead/grid

If you prefer Yarn, use the following command instead:

yarn add @stead/grid

Usage

@stead/grid has three primitive class types to use in order to structure your application. They include:

• st-grid, defines the overall grid context and sets some useful attributes like width and margin
• st-row, defines a row of items in a grid
• st-col, used to define individual columns

You can use a combination of these classes to build a layout. For example, if we wanted a 4 column layout for a small breakpoint we could use the following markup:

<div class="st-grid">
  <div class="st-row">
    <div class="st-col">1/4</div>
    <div class="st-col">1/4</div>
    <div class="st-col">1/4</div>
    <div class="st-col">1/4</div>
  </div>
</div>

While this layout can work for some grid usage scenarios, we probably will want more control over how many columns our layout will span at each given breakpoint.

By default, @stead/grid uses the breakpoints defined in @stead/layout. There are five breakpoints: sm, md, lg, xlg, and max. You can use each one in combination with a column to specify the number of columns to span at a given breakpoint. For example, we could rewrite the above example to be:

<div class="st-grid">
  <div class="st-row">
    <div class="st-col-sm-1">1/4</div>
    <div class="st-col-sm-1">1/4</div>
    <div class="st-col-sm-1">1/4</div>
    <div class="st-col-sm-1">1/4</div>
  </div>
</div>

The .st-col-sm-1 class names tells us that this <div> should only span one column at our sm breakpoint. By default, as we scale beyond the breakpoint the layout will still take up a percentage of the overall width.

📖 API Documentation

If you're looking for @stead/grid API documentation, check out:

• Sass

🙌 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.