https://github.com/micnews/deku-pure-grid

https://github.com/micnews/deku-pure-grid

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/micnews/deku-pure-grid
• Owner: micnews
• Created: 2015-11-25T10:00:20.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-02-29T12:05:09.000Z (over 8 years ago)
• Last Synced: 2024-04-14T22:46:18.304Z (7 months ago)
• Language: CSS
• Size: 9.77 KB
• Stars: 7
• Watchers: 13
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-deku - deku-pure-grid - Grid component for deku, using pure.css grid system. (Components)

README

        
# deku-pure-grid

Grid component for [deku](https://github.com/dekujs/deku), using [pure.css](https://github.com/yahoo/pure) grid system.

## Install

```shell

npm install deku-pure-grid

```

## Grid component

The main container for your grid.

### Attributes

### `class=[class list]`

Adds any custom class to the grid element.

## Cell component

The container for each grid cell.

### Attributes

### `class=[class list]`

Adds any custom class to the cell element.

#### `size=[value]`

Adds class `pure-u-[value]`. Default, no media query.

#### `smSize=[value]`

Adds class `pure-u-small-[value]`. --small-min media query.

#### `mdSize=[value]`

Adds class `pure-u-medium-[value]`. --medium-min media query.

#### `lgSize=[value]`

Adds class `pure-u-large-[value]`. --large-min media query.

#### `xlgSize=[value]`

Adds class `pure-u-x-large-[value]`. --x-large-min media query.

All size-attributes takes a value specifying the size of the cell, using format: `n-n`, where `1-2` mean cell takes up 50% width, `3-4` takes up 75% width etc. See [pure.css documentation](http://purecss.io/grids/) for details.

## Example

```js

import { Grid, Cell } from 'deku-pure-grid';

export default {

  render: function () {

    return (

      

        Cell content

      

    );

  }

}

```

## Output

```html



  
Cell content



```


## index.css

Import the css using [postcss](https://github.com/postcss/postcss). Depends on [postcss-custom-media](https://github.com/postcss/postcss-custom-media) to define breakpoints.

```css

@custom-media --x-large-min (min-width: 1600px);

@custom-media --large-min (min-width: 1348px);

@custom-media --medium-min (min-width: 1024px);

@custom-media --small-min (min-width: 768px);

@import 'deku-pure-grid';

```