npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

radium-grid

v2.0.3

Published

Radium grid component

Downloads

4

Readme

Radium Grid Build Status Coverage Status

Radium Grid is a powerful, no-fuss grid system component for React. It combines the best decisions from the ecosystem of (S)CSS-based grid systems and implements them hack-free on top of Flexbox.

What makes Radium Grid special?

  • Declarative layout using JSX.
  • Sensible defaults.
  • Uses arbitrary fractions for cell widths. No more 12-column straitjacket!
  • Infers rows from the given cell sizes. No need for explicit rows or extra <div>s!
  • Customizable cell alignment, including a hack-free vertical align!
  • Customizable fixed-width and fluid-width gutters. Just pass a CSS unit!
  • Customizable media queries for breakpoint definitions.
  • Uses Radium Style to handle breakpoint changes efficiently.
  • Accepts style arrays and resolves them with Radium Style.
  • Cascading defaults: set cell props on:
    • all cells for all sizes,
    • all cells for individual sizes,
    • a single cell for all sizes,
    • a single cell for individual sizes,
    • ...with the lowest props in the tree overriding parent props.

Prerelease

Although this is prerelease software, we'll do our best to avoid breaking public API changes.

Installation

npm install --save radium-grid

Usage

import { Grid, Cell } from 'radium-grid';

const App = () => {
  return (
    <Grid>
      <Cell>
        <p>Lorem</p>
      </Cell>
      <Cell>
        <p>ipsum</p>
      </Cell>
      <Cell>
        <p>dolor</p>
      </Cell>
      <Cell>
        <p>sit</p>
      </Cell>
    </Grid>
  );
}

The above example will render with the following provided defaults:

  • All cells in the grid are 1/3 wide for all screen sizes.
  • The grid uses a 16px fixed gutter.
  • Cell content is aligned to the top left.
  • The breakpoints use the following media queries:
    • small: "@media only screen and (max-width: 640px)",
    • medium: "@media only screen and (min-width: 641px) and (max-width: 1024px)",
    • large: "@media only screen and (min-width: 1025px) and (max-width: 1440px)",
    • xlarge: "@media only screen and (min-width: 1441px)"

To set a default width and alignment for every cell in the grid:

<Grid cellWidth="1/2">
  <Cell>
    <p>Lorem</p>
  </Cell>
  <Cell>
    <p>ipsum</p>
  </Cell>
</Grid>

An example of setting widths and alignment per screen size for every cell in the grid:

<Grid
  smallCellWidth="1"
  smallAlign="right"
  smallVerticalAlign="bottom"
  mediumCellWidth="1"
  mediumCellAlign="right"
  mediumCellVerticalAlign="bottom"
>
  <Cell>
    <p>Lorem</p>
  </Cell>
  <Cell>
    <p>ipsum</p>
  </Cell>
</Grid>

An example of custom per-cell widths and alignments:

<Grid>
  <Cell
    align="right"
    verticalAlign="bottom"
    width="1/4"
  >
    <p>Lorem</p>
  </Cell>
  <Cell
    align="left"
    verticalAlign="top"
    width="3/4"
  >
    <p>ipsum</p>
  </Cell>
  <Cell
    align="right"
    verticalAlign="bottom"
    width="3/4"
  >
    <p>dolor</p>
  </Cell>
  <Cell
    align="left"
    verticalAlign="top"
    width="1/4"
  >
    <p>sit</p>
  </Cell>
</Grid>

The same as above, but with different per-cell widths on small screens:

<Grid>
  <Cell
    align="right"
    verticalAlign="bottom"
    width="1/4"
    smallWidth="1/2"
  >
    <p>Lorem</p>
  </Cell>
  <Cell
    align="left"
    verticalAlign="top"
    width="3/4"
    smallWidth="1/2"
  >
    <p>ipsum</p>
  </Cell>
</Grid>

Custom gutters can use any valid CSS value string. Percentage values create fluid gutters, while all other values create fixed gutters. Example:

<Grid gutter="24px">
  <Cell>
    <p>Lorem</p>
  </Cell>
  <Cell>
    <p>ipsum</p>
  </Cell>
</Grid>

<Grid gutter="4%">
  <Cell>
    <p>Lorem</p>
  </Cell>
  <Cell>
    <p>ipsum</p>
  </Cell>
</Grid>

While we recommend the default breakpoints, you can customize them:

const breakpoints = {
  small: "@media only screen and (max-width: 320px)",
  medium: "@media only screen and (min-width: 320px) and (max-width: 640px)",
  large: "@media only screen and (min-width: 641px) and (max-width: 1024px)",
  xlarge: "@media only screen and (min-width: 1025px)"
}
<Grid breakpoints={breakpoints}>
  <Cell>
    <p>Lorem</p>
  </Cell>
  <Cell>
    <p>ipsum</p>
  </Cell>
</Grid>

Demo

There are more complex examples on the demo page. Check out the code in app.jsx.

Installation

  • Install builder: npm install -g builder
  • Clone this repo
  • npm install and then builder run hot will load a webpack dev server at localhost:3000

Gotchas

<Grid /> only accepts <Cell />s as children, since inserting arbitrary children can break the layout. Two options for custom children are:

  • Wrap the children in a <Cell />.
  • Move the children to a sibling of <Grid>.