https://github.com/dominicbarnes/deku-grid

Deku components for a grid based on suitcss/components-grid
https://github.com/dominicbarnes/deku-grid

Last synced: 3 months ago
JSON representation

Deku components for a grid based on suitcss/components-grid

• Host: GitHub
• URL: https://github.com/dominicbarnes/deku-grid
• Owner: dominicbarnes
• License: mit
• Created: 2015-08-19T06:09:13.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-01-03T15:42:16.000Z (about 9 years ago)
• Last Synced: 2024-10-12T02:55:06.749Z (3 months ago)
• Language: JavaScript
• Size: 152 KB
• Stars: 5
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-deku - deku-grid - Deku components for a grid based on suitcss/components-grid (Components)

README

        
# deku-grid

> Deku components for a grid based on suitcss/components-grid

## Usage

```js

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

export function render({ props }) {

  return (

    

      Nav

      Main

    

  );

}

```

## Dependencies

This automatically includes [suitcss/components-grid](https://github.com/suitcss/components-grid)

and [suitcss/utils-size](https://github.com/suitcss/utils-size).

## Grid

This is the main container for your grid, includes the `Grid` class only by default.

### Attributes

#### gutter

When this boolean flag is set, the `Grid--withGutter` class will be added.

#### center

When this boolean flag is set, the `Grid--alignCenter` class will be added.

#### right

When this boolean flag is set, the `Grid--alignRight` class will be added.

#### middle

When this boolean flag is set, the `Grid--alignMiddle` class will be added.

#### bottom

When this boolean flag is set, the `Grid--alignBottom` class will be added.

## Cell

This is the main container each of for your grid cells, includes the `Grid-cell` class only by default.

### Attributes

#### size

This is a **required** attribute, as excluding it makes little sense. (however, it won't throw an error)

It can be any of the following values:

 - `fit`

 - `fit-alt`

 - `fill`

 - `fill-alt`

 - `full`

 - `{X}of{Y}` (eg: "1of2", "2of3", "5of6")

#### center

When this boolean flag is set, the `Grid-cell--center` class will be added.