Neanderthals Programming Machines

    @wiremore/grid

    1.0.1 • Public • Published

    @wiremore/grid

    Simply put: it's a grid. A dead simple mobile-first 12 column css grid with React components. Have a look at the Storybook for a preview: https://wiremore-grid.surge.sh/

    Installation

    yarn add @wiremore/grid

    or

    npm install @wiremore/grid

    Usage

    The grid has two named exports: Grid and Column. You can either import them from @wiremore/grid/es to import the pure ES modules or from @wiremore/grid to use the version that is pre-bundled as commonjs module with Webpack:

    import React from 'react';
    import { Grid, Column } from '@wiremore/grid/es';
    
    const Example = () => (
      <Grid>
        <Column xs={12} sm={6}>
          First Column
        </Column>
        <Column xs={12} sm={6}>
          Second Column
        </Column>
      </Grid>
    );

    Out of the box the grid supports up to 5 different screen sizes (media.css). You can use them to specify the size of a column within the grid:

    <Grid>
      <Column xs={12} sm={8} md={6} lg={4} xl={2}></Column>
    </Grid>

    All sizes "bubble up", meaning that all resolutions greater or equal to the one you specified inherit the size unless you overwrite them later. <Column xs={12} /> shows a full width column from the smallest (xs) to the highest resolution. <Column xs={12} md={6} /> turns into a half width column on medium (md) resolution viewports.

    Contributing

    This grid is developed using Storybook. Start Storybook via yarn start or npm start. You can preview all your changes there.

    Commit messages

    This project uses semantic-release and semantic-release-conventional-commits to automatically determine the next version number for new releases. By default every release is a patch release. Prefix your commit messages with minor: or feature: for new minor releases and major: or breaking: for new major releases. Have a look at .releaserc for more.

    Creating a new release

    When you're done you need to publish your changes to the npm registry. First commit all your work (no need to create a build since semantic-release will take care of it in the release process). That's necessary so semantic-release can determine the next version number based on commit messages.

    You need to setup your machine to allow semantic-release to push the new release to Github on your behalf. Follow this instruction: Github Authentication

    Once Github access is set up and after committing all your work, run:

    yarn release

    Precommit checks

    All updated files in ./src are checked using ESLint and lint-staged. If there are linting errors your commit gets rejected. (You can bypass that check with the --no-verify flag but but I'd better not catch you doing it).

    Keywords

    none

    Install

    npm i @wiremore/grid

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    730 kB

    Total Files

    183

    Last publish

    Collaborators

    • manuelbieh