Styled-Gel
Bootstrap 4 Grid over Styled Components.
Lightweight bootstrap like grid system for reactjs that uses flexbox.
Why?
If like me, you still think about grids in terms of bootstrap, Row
, Col
, xs
, sm
, md
, lg
and xl
, then look no further.
Usage
import Grid Row Col from 'styled-gel'; const MyComponent = <Grid> <Row> <Col => <Bar>100% All devices</Bar> </Col> </Row> <Row> <Col = = => <Bar>50% tablet - 100% mobile</Bar> </Col> <Col = = => <Bar>50% tablet - 100% mobile</Bar> </Col> </Row> <Row > <Col = = => <Bar>Flush column - no gutters 50%</Bar> </Col> <Col = = => <Bar>Flush column - no gutters 50%</Bar> </Col> </Row> </Grid>
Dependencies
Built on top of and much props
to:
npm i --save styled-gel
Breakpoints
styled-gel uses bootstrap 4's mobile first repsonsive breakpoints which are by default:
const breakpoints = // xs: 0 - Extra small screen / phone sm: '36em' // > 576px - Small screen / phone md: '48em' // > 768px - Medium screen / tablet lg: '62em' // > 992px - Large screen / desktop xl: '75em' // > 1200px - Extra large screen / wide desktop;
Configuration
styled-system can be configured with styled-components to override the breakpoints, gutter width, background colour of the grid and number of columns in a row with more configuration options to come.
The following overridable theme options can be used to style a grid component:
Property | Description | Default value |
---|---|---|
columns | number of columns a row is subdivided into | 12 |
gutterWidth | pixel width between columns | 30px |
breakpoints | the xs, sm, md, lg, xl values in em | [36,49,62,75] |
bodyBg | Background Colour | inherit |
textColor | font color | inherit |
Example of using the ThemeProvider to override the above properties
import ThemeProvider from 'styled-components'import App from './App'; const theme = bodyBg: #fff', textColor: '#333', gutterWidth: 20, columns: 13, breakpoints: [ 32, 48, 64, 128, 256 ]} const App = props => ( <ThemeProvider theme={theme}> <App /> </ThemeProvider>)
no gutters
Pass the flush
property to the <Row />
component to render <Col />
column instances with no gutters.
<Row > <Col => <Bar>no gutters 50%</Bar> </Col> <Col => <Bar>no gutters 50%</Bar> </Col></Row>
Run Sample Project
npm start
Run tests
npm test
Coming Next
xsOffset
,xsPull
,xsPush
etc.- Responsive fonts
- Graceful degredation to
inline-block
.
MIT License