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

react-styled-grid

v3.0.2

Published

A responsive fluid grid system built with styled-components that uses Row and Column approach.

Downloads

13

Readme

react-styled-grid

A responsive fluid grid system built with styled-components that uses Row and Column approach. For demo proceed to https://ihenvyr.github.io/react-styled-grid/

Getting Started

npm install react-styled-grid
import React from 'react';
import { Row, Column, Panel } from 'react-styled-grid';

const App = () => (
  <Row spacer={20}>
    <Column medium={4/12}>
      <Row>
        <Column medium={6/12}><Panel>col</Panel></Column>
        <Column medium={6/12}>
          <Row>
            <Column medium={6/12}><Panel>col</Panel></Column>
            <Column medium={6/12}><Panel>col</Panel></Column>
          </Row>
        </Column>
      </Row>
    </Column>
    <Column medium={4/12}><Panel>col</Panel></Column>
    <Column medium={4/12}>
      <Row collapse>
        <Column medium={3/12}><Panel>col</Panel></Column>
        <Column medium={3/12}><Panel>col</Panel></Column>
        <Column medium={3/12}><Panel>col</Panel></Column>
        <Column medium={3/12}><Panel>col</Panel></Column>
      </Row>
    </Column>
  </Row>
)

export default App

Row

  • spacer: (number) margin-top and margin-bottom
  • expanded: completely fluid (by default, a row is always 1200 pixels wide)
  • collapse: remove gutter on all devices

Column

  • small: (number) width as a fraction for the small breakpoint and up
  • medium: (number) width as a fraction for the medium breakpoint and up
  • large: (number) width as a fraction for the large breakpoint and up

Panel

  • It's just helper to properly visualize the column content :)

Theming

React Styled Grid has defaults, but to customize the values, use styled-components ThemeProvider component.

import React from 'react';
import { Row, Column, Panel } from 'react-styled-grid';
import { ThemeProvider } from 'styled-components';

const App = () => (
  <ThemeProvider
    theme={{ gutter: 20, medium: 640, large: 1024, maxWidth: 1200 }}>
    <Row spacer={20}>
      <Column medium={6/12} large={3/12}><Panel>Column</Panel></Column>
      <Column medium={6/12} large={3/12}><Panel>Column</Panel></Column>
      <Column medium={6/12} large={3/12}><Panel>Column</Panel></Column>
      <Column medium={6/12} large={3/12}><Panel>Column</Panel></Column>
    </Row>
  </ThemeProvider>
)

Gutter

All Column components have 10 pixels left and right padding. To customize the column gutter, pass a number to theme.gutter with the ThemeProvider component.

Max Width

Outer Row's width which is by default has a value of 1200 pixels. To customize the outer-most row max-width, pass a number to theme.maxWidth with the ThemeProvider component.

Breakpoints

Column components use a mobile-first responsive approach, where any value set works from that breakpoint and wider. Breakpoints are hard-coded to the following min-widths for medium: 640 and large: 1024 in pixels. Lower than medium will automatically fallback to small.

To customize the breakpoints, pass a number to theme.medium and theme.large with the ThemeProvider component.

MIT License