https://github.com/redhataccess/cp-grid
Customer Portal Grid System
https://github.com/redhataccess/cp-grid
Last synced: about 1 month ago
JSON representation
Customer Portal Grid System
- Host: GitHub
- URL: https://github.com/redhataccess/cp-grid
- Owner: redhataccess
- License: mit
- Created: 2016-11-16T18:15:34.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-11-17T19:47:33.000Z (over 9 years ago)
- Last Synced: 2025-01-28T10:44:30.887Z (over 1 year ago)
- Language: CSS
- Size: 4.4 MB
- Stars: 0
- Watchers: 21
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Customer Portal Grid System
A Flexbox-based 12 column grid system that allows the columns to behave like cards or tiles.
[View Demo](https://redhataccess.github.io/cp-grid/index.html)
## Basic Usage
```html
```
The `data-cp-grid=""` attribute allows you to denote the number of columns for each breakpoint. For example, `sm-4` would make a grid of 4 columns for small screen devices and larger.
## Varying Column Widths
You can assign individual columns widths to any `.cp-grid-item` using the `data-cp-grid-size=""` attribute.
```html
```
The values of `data-cp-grid-size=""` define how many columns the respective *grid-item* will take up at that specific breakpoint. For instance, `sm-6-cols` will make the *grid-item* span across 6 columns on small screen devices and larger.
## Optional Cards
```html
```
Applying the `data-cp-grid-bg=""` attribute allows you to assign an approved background color. Leave empty or use `none` for transparent.
## Development
```
$ gulp
```
## Compile
```
$ gulp styles
```