Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jameslnewell/styled-components-grid
A responsive grid components for styled-components.
https://github.com/jameslnewell/styled-components-grid
grid react responsive-grid styled-components
Last synced: 11 days ago
JSON representation
A responsive grid components for styled-components.
- Host: GitHub
- URL: https://github.com/jameslnewell/styled-components-grid
- Owner: jameslnewell
- License: mit
- Created: 2017-02-07T21:11:25.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-15T07:47:38.000Z (over 1 year ago)
- Last Synced: 2024-10-12T03:18:25.391Z (about 1 month ago)
- Topics: grid, react, responsive-grid, styled-components
- Language: JavaScript
- Homepage:
- Size: 2.91 MB
- Stars: 220
- Watchers: 6
- Forks: 14
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# styled-components-grid
   [](https://travis-ci.org/jameslnewell/styled-components-grid)
Responsive grid components for `styled-components` 💅.
> [Change log](https://github.com/jameslnewell/styled-components-grid/blob/master/CHANGELOG.md)
> Have a look 👀 at [`styled-components-breakpoint`](https://github.com/jameslnewell/styled-components-breakpoint) and [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) which work well with this package.
## Installation
```bash
yarn add styled-components styled-components-grid
```
## Usage
> [Examples](https://jameslnewell.github.io/styled-components-grid/)
### Using the default breakpoints
```js
import React from 'react';
import Grid from 'styled-components-grid';
Awesome!
Amazing!
Out of this world!
;
```
### Using custom breakpoints
You can customise the default breakpoints. If you would like to use the same breakpoints as [Bootstrap](https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints), you can do so like this:
```js
import React from 'react';
import { ThemeProvider } from 'styled-components';
import Grid from 'styled-components-grid';
const theme = {
breakpoints: {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200
}
};
Awesome!
Amazing!
Out of this world!
;
```
### Using the mixins
```js
import React from 'react';
import styled from 'styled-components';
import { grid } from 'styled-components-grid';
const FeaturePanel = styled`
${grid({})}
`;
const Feature = styled`
${grid.unit({ size: { tablet: 1 / 3 } })}
`;
Awesome!
Amazing!
Out of this world!
;
```
## Components
### <Grid/>
#### horizontalAlign
Controls the horizontal alignment of grid units.
A `string` equal to one of `left|right|center|justify|justify-center` OR an `object` where the values are `string`s equal to one of `left|right|center|justify|justify-center` for each desired breakpoint. Defaults to `left`.
#### verticalAlign
Controls the vertical alignment of grid units.
A `string` equal to one of `top|bottom|center|stretch` OR an `object` where the values are `string`s equal to one of `top|bottom|center|stretch` for each desired breakpoint. Defaults to `stretch`.
### reverse
Reverse the order of the grid units.
A `boolean` OR an `object` where the values are `booleans`s for each desired breakpoint. Defaults to `false`.
### wrap
Whether the grid units should wrap across multiple lines or a single line.
A `boolean` OR an `object` where the values are `booleans`s for each desired breakpoint. Defaults to `true`.
#### component
The component to render the styles on.
Optional. A `string` or valid React component. Defaults to `div`.
### <Grid.Unit/>
#### size
Controls the width of the grid unit.
A `number` between `0` and `1` OR a `string` of `min` or `max` OR an `object` where the values are a `number` between `0` and `1` OR a `string` of `min` or `max` for each desired breakpoint.
#### visible
Controls whether the grid unit is visible.
A `boolean` OR an `object` where the values are `booleans`s for each desired breakpoint. Defaults to `true`.
#### component
The component to render the styles on.
Optional. A `string` or valid React component. Defaults to `div`.
## Mixins
### grid(opts)
Apply grid styles.
* `halign`
* `valign`
* `wrap`
* `reverse`
### grid.unit(opts)
Apply grid unit styles.
* `size`
* `visible`