react-spine

1.0.5 • Public • Published

React Spine is a simple responsive grid system for ReactJs made with flexbox and Styled Components. It works with simple or complex layouts.

NPM JavaScript Style Guide style: styled-components

Install

This package can be installed via Yarn

yarn add react-spine

Or via NPM

npm i -s react-spine

Usage

The grid system has two components: Row and Col, which represents the rows and the columns respectively. The row component defines the grid's basics, such as alignment and gutter, while the column component defines its width in each breakpoint. You can nest many grids inside each other.

Here's a simple example:

import { Grid, Container } from 'react-spine'
 
const { Row, Col } = Grid
 
const App = () => (
  <Container>
    <Row justify={{md: 'flex-end'}}>
      <Col sm="12" md="1/4" lg="6">
        Column 1
      </Col>
      <Col sm="hide" md="1/4" lg="6">
        Column 2
      </Col>
      <Col sm={12} md="1/4" lg="6">
        Column 3
      </Col>
    </Row>
  </Container>
);
 
export default App

Overriding default values

You can also override the default values by specifying your own Styled Components theme with a spine key.

// Default values
const customTheme = {
  spine: {
    gridColumns: 12,
    gridGap: 10,
    breakpoints: {
      sm: 0,
      md: 768,
      lg: 1024
    }
  }
}
 
// And then
const App = () => (
  <ThemeProvider theme={customTheme}>
    your application here
  </ThemeProvider>
);

API

Row

Name Type Default Description
gap String or Number 0px Horizontal and vertical spacing between columns.
gapX String or Number 0px Horizontal spacing between columns.
gapY String or Number 0px Vertical spacing between columns.
direction String or Object row The direction of the columns. It can be an object specifying the direction for each breakpoint: {sm: 'row', md: 'column', lg: 'row'}.
justify String or Object row Align columns accordingly with direction. It can be an object specifying the alignment for each breakpoint: {sm: 'flex-start', md: 'center', lg: 'flex-end'}.
align String or Object stretch Align columns across main axis. It can be an object specifying the alignment for each breakpoint: {sm: 'flex-start', md: 'center', lg: 'flex-end'}.
wrap String or Object wrap Sets whether an item will be forced onto one line or can wrap into multiple lines. It can be an object specifying the wrap for each breakpoint: {sm: 'nowrap', md: 'nowrap', lg: 'nowrap'}.
grow String or Object 0 Specify if the remaining space can be assigned to the columns. It can be an object specifying the wrap for each breakpoint: {sm: 0, md: 1, lg: 0}.
shrink String or Object 0 Specify how much the columns can shrink relative to the rest of the columns. It can be an object specifying the wrap for each breakpoint: {sm: 0, md: 1, lg: 0}.

Col

Name Type Description
span String or Number The default size of all breakpoints.
sm String or Number The size of the column for small screens. It can be a string representing a fraction or a integer representing a column span (12 columns total).
md String or Number The size of the column for medium screens. It can also be set to hide for not showing in that breakpoint.
lg String or Number The size of the column for large screens.

License

MIT © jrmiranda

Readme

Keywords

none

Package Sidebar

Install

npm i react-spine

Weekly Downloads

1

Version

1.0.5

License

MIT

Unpacked Size

246 kB

Total Files

7

Last publish

Collaborators

  • jrmiranda