A styled-components grid system.
- It's not rocket science
- It works
- It will force you to manage the responsiveness of your website/application. So no more random padding on your website when used on a tablet.
You can find instructions and examples on the documentation website.
Or, if you want to see an example right away, look below ⬇️
export const App = () => {
const ROW_PADDING = {
mobile: 0.5,
tabletPortrait: 0.5,
tabletLandscape: 0.5,
desktop: 0.5
};
return (
<div>
<Container>
<Row paddingLeft={ROW_PADDING} paddingRight={ROW_PADDING}>
<Column
columnWidth={{
mobile: 12,
tabletPortrait: 12,
tabletLandscape: 12,
desktop: 12
}}
>
<p>Content</p>
</Column>
</Row>
</Container>
</div>
)
}To test the package we suggest using the yalc](https://www.npmjs.com/package/yalc) package.
Here's a useful command to build and update your local build:
yarn build && yalc push- 2018 PyCon Italia