@purpurds/grid

import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import * as GridStories from "./src/grid.stories"; import * as GridColStories from "./src/grid.col.stories"; import * as GridRowStories from "./src/grid.row.stories"; import packageInfo from "./package.json";

Grid

Version {packageInfo.version}

Showcase

Properties

Grid

Grid.Row

Grid.Col

Installation

Via NPM

Add the dependency to your consumer app like "grid": "x.y.z"

From outside the monorepo (build-time)

To install this package, you need to setup access to the artifactory. Click here to go to the guide on how to do that.

---

In MyApp.tsx

import "@purpurds/tokens/index.css";

and

import "@purpurds/grid/styles";

In MyComponent.tsx

import { Grid } from "@purpurds/grid";

export const MyComponent = () => {
  return (
    <div>
      <Grid style={{ backgroundColor: "green" }}>
        <Grid.Row>
          <Grid.Col width={12} widthMd={6}>
            <p>Column 1</p>
          </Grid.Col>
          <Grid.Col width={12} widthMd={6}>
            <p>Column 2</p>
          </Grid.Col>
        </Grid.Row>
      </Grid>
    </div>
  );
};