https://github.com/airtoxin/canopy

css components of hexagonal grid system
https://github.com/airtoxin/canopy

Last synced: about 11 hours ago
JSON representation

css components of hexagonal grid system

• Host: GitHub
• URL: https://github.com/airtoxin/canopy
• Owner: airtoxin
• License: mit
• Created: 2016-01-07T15:49:05.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-01-09T08:10:38.000Z (almost 9 years ago)
• Last Synced: 2024-04-13T08:13:18.384Z (7 months ago)
• Language: CSS
• Size: 8.79 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Canopy

css components of hexagonal grid system.

[![https://gyazo.com/5ad50294e56d86ca84ed29e6f823d5fd](https://i.gyazo.com/5ad50294e56d86ca84ed29e6f823d5fd.png)](https://gyazo.com/5ad50294e56d86ca84ed29e6f823d5fd)

## Install

### use compiled css file

CURRENTLY, THERE ARE NO FLEXIBILITY OF HEXAGON SIZE 100px FIXED.

Download css file from [Github release page](https://github.com/airtoxin/Canopy/releases) and load it on your html.

```html

```

### use raw less file

Download less file from [Github release page](https://github.com/airtoxin/Canopy/releases). Load canopy less file and less.js.

```html

```

And, change hex size

```javascript

less.modifyVars({hexsize: '10px'})

```

## Hex component

There are 2 grid directions 'row-oriented' and 'column-oriented'.

### row-oriented grid

```html



  


    
1

    
2

  

  


    
3

    
4

  

  


    
5

    
6

  



  .hex {

    background-color: gray;

  }

```

[![https://gyazo.com/cc2f38dea3241148ca07ff2bf06a0fb2](https://i.gyazo.com/cc2f38dea3241148ca07ff2bf06a0fb2.png)](https://gyazo.com/cc2f38dea3241148ca07ff2bf06a0fb2)

### column-oriented grid

```html



  


    
1

    
2

  

  


    
3

    
4

  

  


    
5

    
6

  



  .hex {

    background-color: gray;

  }

```

[![https://gyazo.com/2bea5bb8f281b0913d032606771dc02b](https://i.gyazo.com/2bea5bb8f281b0913d032606771dc02b.png)](https://gyazo.com/2bea5bb8f281b0913d032606771dc02b)

## Change hexagon size

If you load canopy from less, it can modify hexagon size.

`less.modifyVars({hexsize: '10px'})`

## Example

See [example directory](https://github.com/airtoxin/Canopy/tree/master/example)