1.0.0-beta.5 • Published 8 years ago
gridsys v1.0.0-beta.5
Gridsys
Fixed-width, Swiss-style responsive React grid system
Gridsys is intended for full-page layouts with fixed-width columns that collapse at narrow viewport widths. Paired with a sensible type scale, gridsys can help create harmonious layouts with a natural visual rhythm.
Features
- Responsive
- Configurable
- Consistent proportions
- Conforms to type scales
- Based on a 16px scale
- Simple API
- Nestable
- No external stylesheets
- Modern
- Swiss
- International
- Typographic
Getting Started
npm i gridsys
import React from 'react'
import { Container, Grid } from 'gridsys'
const App = () => {
return (
<Container>
<Grid span={2}>
<h1>Grid</h1>
</Grid>
<Grid span={3}>Span 3</Grid>
<Grid>Span 1</Grid>
</Container>
)
}
<Container />
Wrapper component for centering Grid cells across multiple breakpoints.
Props
debug
(boolean) - shows an outline and background grid for debugging visual layout
<Grid />
Fixed-width grid cell with built-in gutters
Props
span
(number) - number of columns for the grid cell to spanalign
(string) - vertical alignmentheight
(number) - fixed height in pixelsgutter
(number) - gutter (padding) in pixelsdebug
(boolean) - shows outlines for debugging
<GridGroup />
Grid component with no gutters useful for nesting. Uses the same props as the Grid component.
Context Configuration
The grid system can be configured with React context.
class App extends React.Component {
getChildContext () {
return {
gridsys: {
gutter: 16,
columnWidth: 320,
columnCount: 5,
debug: true
}
}
}
render () {
<Container>
<Grid span={3}>
<h1>Span 3</h1>
</Grid>
<Grid span={2}>
<p>Span 2</p>
</Grid>
</Container>
}
}
App.childContextTypes = {
gridsys: React.PropTypes.object
}
gutter
(number) - gutter (padding) in pixels for each Grid componentcolumnWidth
(number) - width in pixels for each Grid width. Spans are mutiplied by this numbercolumnCount
(number) - total number of columns for the grid system to spandebug
(boolean) - show outlines and background grid for debugging layout
MIT License
1.0.0-beta.5
8 years ago
1.0.0-beta.4
8 years ago
1.0.0-beta.3
8 years ago
1.0.0-beta.2
8 years ago
1.0.0-beta.1
8 years ago