https://github.com/dustin-archive/taffy-grid
Sweet responsive grids
https://github.com/dustin-archive/taffy-grid
extend grid grids mixin mixins placeholder responsive sass scss taffy
Last synced: 5 months ago
JSON representation
Sweet responsive grids
- Host: GitHub
- URL: https://github.com/dustin-archive/taffy-grid
- Owner: dustin-archive
- License: mit
- Created: 2015-10-27T18:42:48.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-12-04T03:21:22.000Z (over 9 years ago)
- Last Synced: 2026-01-14T09:03:32.818Z (6 months ago)
- Topics: extend, grid, grids, mixin, mixins, placeholder, responsive, sass, scss, taffy
- Language: CSS
- Homepage:
- Size: 55.7 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Grid
===
> Sweet responsive grids
## Rationale
+ Only outputs the CSS you use
+ Uses a combination of flex and calc to ensure accuracy
+ Keeps output small by extending classes, even within media queries
+ Uses `taffy-break` for syncing grids and breakpoints
+ Includes optional responsive product grid layout
+ Includes optional work arounds for Internet Explorer 10
## Installation
+ Install with NPM
+ Import dependencies
```
$ npm install --save taffy-grid
```
```scss
@import '../node_modules/taffy-util/main';
@import '../node_modules/taffy-break/main';
@import '../node_modules/taffy-adapt/main';
@import '../node_modules/taffy-grid/main';
```
## Usage
### `%grid`
Grid placeholder for items
#### Example
```scss
.taffy-grid {
@extend %grid;
}
```
```html
...
```
### `@include item($item [($break $item) ($break $item) ($break $item) ...])`
Extends item placeholders that are generated on import and qualified by `%grid`
#### Parameters
+ `$item`: width of the column 1
+ `$break`: point at which `$item` is applied as the width of the column 1
> 1 between `1` and [`$break-amount`](www.google.com)
#### Example
```scss
.taffy-item {
@include item(2 (6 4) (8 6));
}
```
```html
...
...
...
```
### `$grid-fixed`
Enables a consistent item width layout when set to `true`
#### Example
```scss
$grid-fixed: true;
```
### `$grid-ie10`
Enables IE10 work arounds when set to true
#### Example
```scss
$grid-ie10: true;
```