https://github.com/superreal/srgrid
Dead Simple Flexbox Grid
https://github.com/superreal/srgrid
css-grid flexbox grid grid-system responsive
Last synced: about 1 year ago
JSON representation
Dead Simple Flexbox Grid
- Host: GitHub
- URL: https://github.com/superreal/srgrid
- Owner: superReal
- License: mit
- Created: 2017-04-20T11:46:29.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-07-12T14:17:19.000Z (almost 8 years ago)
- Last Synced: 2024-10-31T18:28:54.163Z (over 1 year ago)
- Topics: css-grid, flexbox, grid, grid-system, responsive
- Language: CSS
- Homepage: https://superreal.github.io/srgrid/
- Size: 3.96 MB
- Stars: 13
- Watchers: 14
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# sR Grid
> Dead Simple Flexbox Grid
[](https://david-dm.org/superReal/srgrid)
[](https://david-dm.org/superreal/srgrid?type=dev)
[](https://codeclimate.com/github/superReal/srgrid)
[](https://travis-ci.org/superReal/srgrid)
[](https://snyk.io/test/github/superReal/srgrid)
sR Grid is a flexible and fully responsive grid system based on [Flexbox](https://www.w3.org/TR/css-flexbox-1/).
It follows the mobile first approach and the [features](/docs/features/README.md) are module-based. In the default setup each feature is disabled
and can be enabled as required. In this way the generated code remains as small as possible.
The sR Grid uses data attributes. The markup remains clear and easy to understand.
## Installation
```bash
$ yarn add @superreal/srbreakpoints @superreal/srgrid
```
If you prefer using npm:
```bash
$ npm install --save @superreal/srbreakpoints @superreal/srgrid
```
*Note: the sR Grid module uses [sR Breakpoints](https://github.com/superreal/srbreakpoints) as a dependency.*
## Usage
1. Import the sR Breakpoints & sR Grid modules
2. [Init sR Breakpoints](https://github.com/superreal/srbreakpoints#usage) module
3. Create a sR Grid grid
```scss
@import 'path_to_node_modules_folder/@superreal/srbreakpoints/src/styles/srbreakpoints.scss';
@import 'path_to_node_modules_folder/@superreal/srgrid/src/styles/srgrid.scss';
@include srbreakpoints-init(
// Your sR Breakpoints settings
);
@include srgrid-create-grid(
// Your sR Grid settings
);
```
## Browser compatibility
### Desktop
| Chrome | Firefox | Safari | Opera | EDGE | Internet Explorer |
|:------:|:-------:|:------:|:-----:|:----:|:-----------------:|
| 29 | 28 | 9 | 17 | 12 | 11 |
### Mobile
| Chrome for Android | iOS Safari | Android Browser | Samsung Internet |
|:------------------:|:----------:|:---------------:|:----------------:|
| 57 | 9.2 | 4.4 | 4 |
## Documentation
* [Settings](https://superreal.github.io/srgrid/docs/settings)
* [Helpers](https://superreal.github.io/srgrid/docs/helpers)
* [Features](https://superreal.github.io/srgrid/docs/features/)
* [Advanced](https://superreal.github.io/srgrid/docs/advanced)
## License (MIT)
Copyright (c) [superReal GmbH](http://www.superreal.de)