├── .DS_Store
├── .gitattributes
├── .sass-cache
    └── 087caf5d798f629a470ef9510eaa4da51af9ef7c
    │   ├── _hex-style.scssc
    │   ├── _hexi-flexi-grid.scssc
    │   └── style.scssc
├── README.md
├── _hex-style.scss
├── _hexi-flexi-grid.scss
├── docs
    ├── .DS_Store
    ├── assets
    │   ├── .DS_Store
    │   ├── css
    │   │   ├── .DS_Store
    │   │   └── app.css
    │   ├── img
    │   │   └── hex-images
    │   │   │   ├── image-1.jpg
    │   │   │   ├── image-10.jpg
    │   │   │   ├── image-11.jpg
    │   │   │   ├── image-12.jpg
    │   │   │   ├── image-2.jpg
    │   │   │   ├── image-3.jpg
    │   │   │   ├── image-4.jpg
    │   │   │   ├── image-5.jpg
    │   │   │   ├── image-6.jpg
    │   │   │   ├── image-7.jpg
    │   │   │   ├── image-8.jpg
    │   │   │   └── image-9.jpg
    │   └── js
    │   │   └── app.js
    └── index.html
├── style.css
├── style.scss
└── test.html


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmcreative/Hexi-Flexi-Grid/84f76282bb99f2aa55594a507299967d20020f85/.DS_Store


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto


--------------------------------------------------------------------------------
/.sass-cache/087caf5d798f629a470ef9510eaa4da51af9ef7c/_hex-style.scssc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmcreative/Hexi-Flexi-Grid/84f76282bb99f2aa55594a507299967d20020f85/.sass-cache/087caf5d798f629a470ef9510eaa4da51af9ef7c/_hex-style.scssc


--------------------------------------------------------------------------------
/.sass-cache/087caf5d798f629a470ef9510eaa4da51af9ef7c/_hexi-flexi-grid.scssc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmcreative/Hexi-Flexi-Grid/84f76282bb99f2aa55594a507299967d20020f85/.sass-cache/087caf5d798f629a470ef9510eaa4da51af9ef7c/_hexi-flexi-grid.scssc


--------------------------------------------------------------------------------
/.sass-cache/087caf5d798f629a470ef9510eaa4da51af9ef7c/style.scssc:
--------------------------------------------------------------------------------
 1 | 3.5.5 (Bleeding Edge)
 2 | 9289a33932cec86071c70cf8d7ffa23f56390f5e
 3 | o:Sass::Tree::RootNode:@children[o:Sass::Tree::ImportNode:@imported_filenameI"hex-style.scss:ET;[ :@filename0:@options{ :@template0:
 4 | @linei:@source_rangeo:Sass::Source::Range	:@start_poso:Sass::Source::Position;i:@offseti:@end_poso;;i;i:
 5 | @fileI"CM:/vince/Work Files/Webdev Projects/Hexi-Flexi-Grid/style.scss;	T:@importero: Sass::Importers::Filesystem:
 6 | @rootI"8M:/vince/Work Files/Webdev Projects/Hexi-Flexi-Grid;	T:@real_rootI"8M:/vince/Work Files/Webdev Projects/Hexi-Flexi-Grid;	T:@same_name_warningso:Set:
 7 | @hash} F:@imported_file0;
 8 | 0;@
 9 | ;I"@import 'hex-style.scss';
10 | ;	T;i;o;	;o;;i;i;o;;i;i;@;@:@has_childrenT


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Hexi-Flexi Grid
  2 | 
  3 | [Github Page](https://vmcreative.github.io/Hexi-Flexi-Grid/)
  4 | 
  5 | Hexi-Flexi Grid is an SCSS component, built on the CSS Grid layout, that creates a hexagonal lattice. The mixin includes a number of customizeable settings to control the size, layout and look of the hex grid.
  6 | 
  7 | ## Features
  8 | - Pure CSS styling, no JavaScript
  9 | - Flexible height, width, column and row counts
 10 | - Modular styling for individual cells, columns and rows
 11 | - Supports auto-populating background images
 12 | 
 13 | ## Browser Support
 14 | - Firefox 56+
 15 | - Chrome 61+
 16 | - Safari 10.1+
 17 | - iOS Safari 10.3+
 18 | - Chrome for Android 62+
 19 | - IE 11/Edge: CSS Grid is currently supported in modern IE and Edge, however Hexi-Flexi Grid makes use of CSS clip-path, which is not supported. A work-around for this would be to populate the grid with hexagonal SVG img elements, as SVG is universally supported by modern browsers.
 20 | 
 21 | ## Getting Started
 22 | To build a basic 3x2 hex grid, follow the steps listed below.
 23 | 
 24 | ### HTML
 25 | Include the following nested div tree in your HTML markup at the location you want to build the hex grid. Give the top level parent a unique id.
 26 | Within the div with the class `.hexContainer`, include a number of divs with the class `.hex` equal to the number of hexagonal cells in the grid (in this case 6).
 27 | 
 28 | ```
 29 | <div id="myHexGrid">
 30 |   <div class="hexCrop">
 31 |     <div class="hexContainer">
 32 |       <div class="hex"></div>
 33 |       <div class="hex"></div>
 34 |       <div class="hex"></div>
 35 |       <div class="hex"></div>
 36 |       <div class="hex"></div>
 37 |       <div class="hex"></div>
 38 |     </div>
 39 |   </div>
 40 | </div>
 41 | ```
 42 | 
 43 | ### SCSS
 44 | Include the Hexi-Flexi Grid component files in the same directory as your main SCSS file. Within your main SCSS file, import `hex-style.scss` above any rules that will affect the content of the grid.
 45 | 
 46 | ```
 47 | @import 'path/to/hex-style.scss';
 48 | ```
 49 | 
 50 | Inside of `hex-style` is a modular block of code that contains settings for the hex grid. Set the id selector the top of the code block to match the id of the top-level parent div.
 51 | If there will be multiple unique hex grids, duplicate this code block for each unique id.
 52 | 
 53 | ```
 54 | #myHexGrid {
 55 |   $gridWidth:   20em;
 56 |   $gridHeight:  auto;
 57 |   $columnCount: 3;
 58 |   $rowCount:    2;
 59 |   $hexCount:    auto;
 60 |   $hexLayout:   row;
 61 |   $gridOrient:  vertical;
 62 |   $crop:        none;
 63 |   $cropFactor:  1;
 64 |   $hexContent:  auto;
 65 |   $hexSize:     auto;
 66 |   $hexMargin:   0.5em;
 67 |   $hexShape:    hexagon;
 68 |   $hexColor:    #48a999;
 69 |   $breakpoints: none;
 70 |   $images:      none;
 71 | 
 72 |   // ...
 73 | 
 74 | }
 75 | ```
 76 | 
 77 | ### Customization
 78 | The grid can be assigned custom css from inside the `hex-style` codeblock.
 79 | Hexi-Flexi Grid assigns unique class names to each individual column, row and cell in the hex grid. 
 80 | - `.c-[n]` targets every cell in column [n]. 
 81 | - `.r-[n]` targets every cell in row [n]. 
 82 | - `.c-[n1].r-[n2]` targets the cell located at column [n1], row [n2].
 83 | 
 84 | ```
 85 | #myHexGrid {
 86 | 
 87 |   // ...
 88 | 
 89 |   margin: 2em;
 90 |     // create 2em margin around the grid
 91 | 
 92 |   .c-1 {background-color: red;}
 93 |     // column 1 cells will be red
 94 | 
 95 |   .r-2 {transform: scale(0.8);}
 96 |     // row 2 cells will be 80% as large
 97 | 
 98 |   .c-3.r-1 {opacity:0.5;}
 99 |     // make column 3, row 1 50% opaque
100 | 
101 |   // ...
102 | 
103 | }
104 | ```
105 | 
106 | ## Grid Settings
107 | 
108 | ### $gridWidth
109 | Set the width of the hex grid.
110 | 
111 | - **'auto'**  The grid width will match the ratio of $gridHeight. When set to auto, $gridHeight must be explicitly set.
112 | - **_length_**	Explicitly set the height. Note: percent width is not supported.
113 | 
114 | ### $gridHeight
115 | Set the height of the hex grid.
116 | 
117 | - **'auto'**	The grid height will match the ratio of $gridWidth. When set to auto, $gridWidth must be explicitly set.
118 | - **_length_**	Explicitly set the height. Note: percent height is not supported.
119 | 
120 | ### $columnCount
121 | Set the number of columns in the hex grid.
122 | 
123 | - **'auto'**	The column count will match the number of cells divided by the number of rows. When set to auto, $rowCount and $hexCount must be explicitly set.
124 | - **_number_**	Explicitly set the number of columns.
125 | 
126 | ### $rowCount
127 | Set the number of rows in the hex grid.
128 | 
129 | - **'auto'**	The row count will match the number of cells divided by the number of columns. When set to auto, $columnCount and $hexCount must be explicitly set.
130 | - **_number_**	Explicitly set the number of rows.
131 | 
132 | ### $hexCount
133 | Set the number of hex cells in the hex grid.
134 | 
135 | - **'auto'**	The cell count will match the number of columns times the number of rows. When set to auto, $rowCount and $columnCount must be explicitly set.
136 | - **_number_**	Explicitly set the number of cells.
137 | 
138 | ### $hexLayout
139 | Set the direction the cells will populate the grid.
140 | 
141 | - **'row'**	Cells will populate the grid starting at the top left corner and filling in horizontally, spilling over into the next row once each has filled.
142 | - **'column'**	Cells will populate the grid starting at the top left corner and filling in vertically, spilling over into the next column once each has filled.
143 | 
144 | ### $gridOrient
145 | Set the orientation in which the grid cells will align.
146 | 
147 | - **'vertical'**	Columns will run in straight lines, rows will offset by one half cell.
148 | - **'horizontal'**	Rows will run in straight lines, rows will offset by one half cell.
149 | 
150 | ### $crop
151 | Set whether the grid will be rectangularly cropped.
152 | 
153 | - **'none'**	The grid will be uncropped.
154 | - **'crop'**	The grid will be scaled by the factor set with $cropFactor and overflow is hidden.
155 | 
156 | ### $cropFactor
157 | Set the amount the grid will be scaled when it is cropped.
158 | 
159 | - **number**	Explicitly set the crop-factor. A value of 1.2 will scale the grid by 120%.
160 | 
161 | ### $hexContent
162 | Set the behavior of the cell content.
163 | 
164 | - **'auto'**	Cell content will stretch to cover the entire size of the cell, minus the value of $hexMargin.
165 | - **'center'**	Cell content will be centered, and will match the value of $hexSize. $hexMargin will be ignored.
166 | 
167 | ### $hexSize
168 | Set the size of the cells.
169 | 
170 | - **'auto'**	Cells will take up 100% of the available space.
171 | - **_number_**	Explicitly set the cell size. Note: percent size is not supported.
172 | 
173 | ### $hexMargin
174 | Set the size of the margins on the cells.
175 | 
176 | - **_number_**	Explicitly set the cell margin. Note: percent size is not supported.
177 | 
178 | ### $hexShape
179 | Set the shape of the clip-mask on the cells.
180 | 
181 | - **'hexagon'**	Cells will be hexagonal.
182 | - **'circle'**	Cells will be circular.
183 | 
184 | ### $hexColor
185 | Set the background color of the cells.
186 | 
187 | - **_color_**	Accepts hexcode, rgb/a and named colors.
188 | 
189 | ### $images
190 | Set a list of files to be passed to the hex cells as background images. The files will be added to the grid according to the order specified by $gridLayout.
191 | A value of 'none' will disable $images.
192 | 
193 | ```
194 | #myHexGrid {
195 | 
196 |   // ...
197 | 
198 |   $images:
199 |     'path/to/image-1.jpg'
200 |     'path/to/image-2.jpg'
201 |     'path/to/image-3.jpg'
202 |     'path/to/image-4.jpg'
203 |     'path/to/image-5.jpg'
204 |     'path/to/image-6.jpg'
205 |   ;
206 | 
207 |   // ...
208 | 
209 | }
210 | ```
211 | 


--------------------------------------------------------------------------------
/_hex-style.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | //--- IMPORT ---------------------------------//
 3 | @import 'hexi-flexi-grid';
 4 | 
 5 | 
 6 | //--- TEMPLATE -------------------------------//
 7 | #hexGrid {
 8 | //--- SETTINGS -------------- VALUES ---------//
 9 |   $gridWidth:   20em;       // 'auto',(px,pt,r/em,vw/h)
10 |   $gridHeight:  auto;       // 'auto',(px,pt,r/em,vw/h)
11 |   $columnCount: 3;          // 'auto',(number)
12 |   $rowCount:    2;          // 'auto',(number)
13 |   $hexCount:    auto;       // 'auto',(number)
14 |   $hexLayout:   row;        // 'row','column','strict'
15 |   $gridOrient:  vertical;   // 'vertical','horizontal'
16 |   $crop:        none;       // 'none','crop'
17 |   $cropFactor:  1;          // (number)
18 |   $hexContent:  auto;       // 'auto','center'
19 |   $hexSize:     auto;       // 'auto',(px,pt,r/em,vw/h)
20 |   $hexMargin:   0.5em;      // (px,pt,r/em,vw/h)
21 |   $hexShape:    hexagon;    // 'hexagon','circle'
22 |   $hexColor:    #48a999;    // hexcode,rgb/a,named
23 |   $images:      none;
24 | //--- MIXINS ---------------------------------//
25 |   @include hexWrapper($gridWidth,$gridHeight,
26 |     $gridOrient,$rowCount,$columnCount);
27 |   .hexCrop {@include hexCrop($crop,$cropFactor)}
28 |   .hexGrid {@include hexContainer($gridWidth,$gridHeight,
29 |     $gridOrient,$columnCount, $images,$rowCount,
30 |     $hexLayout,$hexContent,$hexShape,$hexColor,
31 |     $hexMargin,$hexCount,$hexSize,)}
32 | //--- CUSTOM STYLES --------------------------//
33 | 
34 | 
35 | //--------------------------------------------//
36 | }
37 | 


--------------------------------------------------------------------------------
/_hexi-flexi-grid.scss:
--------------------------------------------------------------------------------
  1 | //----- FUNCTIONS --------------//
  2 | 
  3 | @function vfr($l, $c) {@return (($l/(($c * 3) + 1)) * 1.73);}
  4 | @function hfr($l, $c) {@return (($l/(($c * 2) + 1))*.578);}
  5 | 
  6 | @function hGridHeight($gridWidth, $rowCount, $columnCount) {
  7 |   @return hfr($gridWidth, $columnCount) * (($rowCount * 3) + 1);}
  8 | @function hGridWidth($gridHeight, $rowCount, $columnCount) {
  9 |   @return vfr($gridHeight, $rowCount) * (($columnCount * 2) + 1);}
 10 | 
 11 | @function vGridHeight($gridWidth, $rowCount, $columnCount) {
 12 |   @return vfr($gridWidth, $columnCount) * (($rowCount * 2) + 1);}
 13 | @function vGridWidth($gridHeight, $rowCount, $columnCount) {
 14 |   @return hfr($gridHeight, $rowCount) * (($columnCount * 3) + 1);}
 15 | 
 16 | @function hexRatio($num) {@return $num * 1.156;}
 17 | @function hexRatioInv($num) {@return $num * 0.865;}
 18 | 
 19 | @function increment($num, $pos){
 20 |   @for $i from 1 to $num {
 21 |     $pos: $pos + 2;}
 22 |   @return $pos;}
 23 | //----- MIXINS -----------------//
 24 | 
 25 | @mixin hexWrapper($gridWidth, $gridHeight, $gridOrient, $rowCount, $columnCount) {
 26 |   @if $gridOrient == horizontal {
 27 |     @if $gridHeight == auto {$gridHeight: hGridHeight($gridWidth, $rowCount, $columnCount)}
 28 |     @else if $gridWidth == auto {$gridWidth: hGridWidth($gridHeight, $rowCount, $columnCount)}
 29 |   }
 30 |   @else if $gridOrient == vertical {
 31 |     @if $gridHeight == auto {$gridHeight: vGridHeight($gridWidth, $rowCount, $columnCount)}
 32 |     @else if $gridWidth == auto {$gridWidth: vGridWidth($gridHeight, $rowCount, $columnCount)}
 33 |   }
 34 |   height: $gridHeight;
 35 |   width: $gridWidth;
 36 | }
 37 | 
 38 | @mixin hexCrop($crop, $cropFactor) {
 39 |   position: relative;
 40 |   @if $crop == none {
 41 |     overflow: visible;
 42 |   } @else if $crop == crop {
 43 |     overflow: hidden;
 44 |     .hexContainer {
 45 |       transform: scale($cropFactor);
 46 |     }
 47 |   }
 48 | }
 49 | 
 50 | @mixin hexStyle($hexShape, $gridOrient, $hexContent, $hexColor, $hexMargin, $hexSize){
 51 |   @if $hexContent == center and $hexSize == auto {height: 100%; width: 100%;}
 52 |   @if $hexShape == circle {
 53 |     -webkit-clip-path: circle(46% at 50% 50%);
 54 |     clip-path: circle(46% at 50% 50%);
 55 |     @if $hexContent == center and $hexSize != auto {
 56 |       @if $gridOrient == vertical {
 57 |         height: $hexSize; width: hexRatio($hexSize)}
 58 |       @else if $gridOrient == horizontal {
 59 |         height: hexRatio($hexSize); width: $hexSize}
 60 |       }
 61 |     }
 62 |   @else if $hexShape == hexagon {
 63 |     @if $gridOrient == vertical {
 64 |       @if $hexContent == center and $hexSize != auto {
 65 |         height: $hexSize; width: hexRatio($hexSize)}
 66 |       -webkit-clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
 67 |       clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);}
 68 |     @else if $gridOrient == horizontal {
 69 |       @if $hexContent == center and $hexSize != auto  {height: hexRatio($hexSize); width: $hexSize}
 70 |       -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
 71 |       clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}
 72 |   }
 73 |   background-color: $hexColor;
 74 |   background-size: cover;
 75 |   @if $gridOrient == vertical {margin: (hexRatioInv($hexMargin)) $hexMargin}
 76 |   @else if $gridOrient == horizontal {margin: $hexMargin (hexRatioInv($hexMargin))}
 77 | }
 78 | 
 79 | @mixin hexContainer($gridWidth,$gridHeight,$gridOrient,$columnCount, $images,$rowCount,
 80 | $hexLayout,$hexContent,$hexShape,$hexColor,$hexMargin,$hexCount,$hexSize) {
 81 |   display: grid;
 82 |   justify-items: $hexContent;
 83 |   align-items: $hexContent;
 84 |   @if $rowCount == auto {
 85 |     $l: ceil($hexCount / $columnCount);
 86 |     $rowCount: $l;}
 87 |   @else if $columnCount == auto {
 88 |     $l: ceil($hexCount / $rowCount);
 89 |     $columnCount: $l;}
 90 |   @else if $hexCount == auto {$hexCount: $rowCount * $columnCount;}
 91 |   @if $gridOrient == horizontal {
 92 |     @if $gridHeight == auto {$gridHeight: hGridHeight($gridWidth, $rowCount, $columnCount)}
 93 |     @else if $gridWidth == auto {$gridWidth: hGridWidth($gridHeight, $rowCount, $columnCount)}
 94 |   }
 95 |   @else if $gridOrient == vertical {
 96 |     @if $gridHeight == auto {$gridHeight: vGridHeight($gridWidth, $rowCount, $columnCount)}
 97 |     @else if $gridWidth == auto {$gridWidth: vGridWidth($gridHeight, $rowCount, $columnCount)}
 98 |   }
 99 |   height: $gridHeight;
100 |   width: $gridWidth;
101 |   @include gridTemplate($gridOrient, $columnCount, $rowCount, $gridWidth, $hexCount);
102 |   @include layout($columnCount, $rowCount, $hexLayout, $gridOrient, $hexCount);
103 |   @include imageAssigner($images, $hexCount, $hexLayout);
104 |   .hex {@include hexStyle($hexShape, $gridOrient, $hexContent, $hexColor, $hexMargin, $hexSize);}
105 | }
106 | 
107 | @mixin gridTemplate($gridOrient, $columnCount, $rowCount, $gridWidth, $hexCount) {
108 |   @if $gridOrient == vertical {
109 |     grid-template-columns: repeat($columnCount, 1fr 2fr) 1fr;
110 |     grid-template-rows: repeat(($rowCount*2+1), vfr($gridWidth, $columnCount));}
111 |   @else if $gridOrient == horizontal {
112 |     grid-template-columns: repeat(($columnCount*2+1), 1fr);
113 |     grid-template-rows: repeat($rowCount,
114 |       hfr($gridWidth, $columnCount) (hfr($gridWidth, $columnCount)*2)) hfr($gridWidth, $columnCount);}
115 | }
116 | 
117 | @mixin layout($columnCount, $rowCount, $hexLayout, $gridOrient, $hexCount){
118 |   @if $hexLayout == strict {
119 |     @include address($columnCount, $rowCount, $gridOrient);
120 |   }
121 |   @else if $hexLayout == column {
122 |     .hex {display: none}
123 |     @include address($columnCount, $rowCount, $gridOrient);
124 |     $c: 1; $r: 1;
125 |     @for $i from 1 through ($hexCount) {
126 |       @if $r > $rowCount {$r: 1; $c: $c+1}
127 |       .hex:nth-child(#{$i}) {
128 |         display: flex;
129 |         align-items: center;
130 |         justify-content: center;
131 |         @if $gridOrient == vertical {
132 |           @extend .r-#{$r}, .c-#{$c}, .c-#{$c}.r-#{$r};}
133 |         @else if $gridOrient == horizontal {
134 |           @extend .r-#{$r}, .c-#{$c}, .r-#{$r}.c-#{$c};}
135 |         }
136 |       $r: $r + 1;}
137 |   }
138 |   @else if $hexLayout == row {
139 |     .hex {display: none}
140 |     @include address($columnCount, $rowCount, $gridOrient);
141 |     $c: 1; $r: 1;
142 |     @for $i from 1 through ($hexCount) {
143 |       @if $c > $columnCount {$r: $r + 1; $c: 1}
144 |       .hex:nth-child(#{$i}) {
145 |         display: flex;
146 |         align-items: center;
147 |         justify-content: center;
148 |         @if $gridOrient == vertical {
149 |           @extend .r-#{$r}, .c-#{$c}, .c-#{$c}.r-#{$r};}
150 |         @else if $gridOrient == horizontal {
151 |           @extend .r-#{$r}, .c-#{$c}, .r-#{$r}.c-#{$c};}
152 |       }
153 |       $c: $c + 1;}
154 |   }
155 | }
156 | 
157 | @mixin address($columnCount, $rowCount, $gridOrient) {
158 |   @if $gridOrient == vertical {
159 |     @for $ci from 1 to ($columnCount + 1) {
160 |       $cPos: 1;
161 |       @if $ci > 1 {$cPos: increment($ci, $cPos)}
162 |       .c-#{$ci} {
163 |         grid-column-start: $cPos;
164 |         grid-column-end: span 3}
165 |       @for $ri from 1 to ($rowCount + 1) {
166 |         $rPos: 1;
167 |         @if $ci % 2 == 0 {$rPos: 2;}
168 |         @if $ri > 1 {$rPos: increment($ri, $rPos)}
169 |         .c-#{$ci}.r-#{$ri} {
170 |           grid-row-start: $rPos;
171 |           grid-row-end: span 2}
172 |       }
173 |     }
174 |   }
175 |   @else if $gridOrient == horizontal {
176 |     @for $ri from 1 to ($rowCount + 1) {
177 |       $rPos: 1;
178 |       @if $ri > 1 {$rPos: increment($ri, $rPos);}
179 |       .r-#{$ri} {
180 |         grid-row-start: $rPos;
181 |         grid-row-end: span 3;}
182 |       @for $ci from 1 to ($columnCount + 1) {
183 |         $cPos: 1;
184 |         @if $ri % 2 == 0 {$cPos: 2;}
185 |         @if $ci > 1 {$cPos: increment($ci, $cPos);}
186 |         .r-#{$ri}.c-#{$ci} {
187 |           grid-column-start: $cPos;
188 |           grid-column-end: span 2;}
189 |       }
190 |     }
191 |   }
192 | }
193 | 
194 | @mixin imageAssigner($images, $hexCount, $hexLayout){
195 |   @if $hexLayout != strict {
196 |     @for $i from 1 through length($images) {
197 |       .hex:nth-child(#{$i}) {background-image: url(nth($images, $i));}
198 |     }
199 |   }
200 | }
201 | 


--------------------------------------------------------------------------------
/docs/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmcreative/Hexi-Flexi-Grid/84f76282bb99f2aa55594a507299967d20020f85/docs/.DS_Store


--------------------------------------------------------------------------------
/docs/assets/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmcreative/Hexi-Flexi-Grid/84f76282bb99f2aa55594a507299967d20020f85/docs/assets/.DS_Store


--------------------------------------------------------------------------------
/docs/assets/css/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmcreative/Hexi-Flexi-Grid/84f76282bb99f2aa55594a507299967d20020f85/docs/assets/css/.DS_Store


--------------------------------------------------------------------------------
/docs/assets/img/hex-images/image-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmcreative/Hexi-Flexi-Grid/84f76282bb99f2aa55594a507299967d20020f85/docs/assets/img/hex-images/image-1.jpg


--------------------------------------------------------------------------------
/docs/assets/img/hex-images/image-10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmcreative/Hexi-Flexi-Grid/84f76282bb99f2aa55594a507299967d20020f85/docs/assets/img/hex-images/image-10.jpg


--------------------------------------------------------------------------------
/docs/assets/img/hex-images/image-11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmcreative/Hexi-Flexi-Grid/84f76282bb99f2aa55594a507299967d20020f85/docs/assets/img/hex-images/image-11.jpg


--------------------------------------------------------------------------------
/docs/assets/img/hex-images/image-12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmcreative/Hexi-Flexi-Grid/84f76282bb99f2aa55594a507299967d20020f85/docs/assets/img/hex-images/image-12.jpg


--------------------------------------------------------------------------------
/docs/assets/img/hex-images/image-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmcreative/Hexi-Flexi-Grid/84f76282bb99f2aa55594a507299967d20020f85/docs/assets/img/hex-images/image-2.jpg


--------------------------------------------------------------------------------
/docs/assets/img/hex-images/image-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmcreative/Hexi-Flexi-Grid/84f76282bb99f2aa55594a507299967d20020f85/docs/assets/img/hex-images/image-3.jpg


--------------------------------------------------------------------------------
/docs/assets/img/hex-images/image-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmcreative/Hexi-Flexi-Grid/84f76282bb99f2aa55594a507299967d20020f85/docs/assets/img/hex-images/image-4.jpg


--------------------------------------------------------------------------------
/docs/assets/img/hex-images/image-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmcreative/Hexi-Flexi-Grid/84f76282bb99f2aa55594a507299967d20020f85/docs/assets/img/hex-images/image-5.jpg


--------------------------------------------------------------------------------
/docs/assets/img/hex-images/image-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmcreative/Hexi-Flexi-Grid/84f76282bb99f2aa55594a507299967d20020f85/docs/assets/img/hex-images/image-6.jpg


--------------------------------------------------------------------------------
/docs/assets/img/hex-images/image-7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmcreative/Hexi-Flexi-Grid/84f76282bb99f2aa55594a507299967d20020f85/docs/assets/img/hex-images/image-7.jpg


--------------------------------------------------------------------------------
/docs/assets/img/hex-images/image-8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmcreative/Hexi-Flexi-Grid/84f76282bb99f2aa55594a507299967d20020f85/docs/assets/img/hex-images/image-8.jpg


--------------------------------------------------------------------------------
/docs/assets/img/hex-images/image-9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmcreative/Hexi-Flexi-Grid/84f76282bb99f2aa55594a507299967d20020f85/docs/assets/img/hex-images/image-9.jpg


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!doctype html>
  3 | <html class="no-js" lang="en">
  4 |   <head>
  5 |     <meta charset="utf-8" />
  6 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>Hexi-Flexi-Grid</title>
  9 |     <link rel="stylesheet" href="assets/css/app.css">
 10 |     <link href="https://fonts.googleapis.com/css?family=Bungee|Open+Sans:400,600|Oxygen+Mono" rel="stylesheet">
 11 |   </head>
 12 | <body>
 13 | <div class="grid-y grid-frame">
 14 | <div class="cell cell-block-container">
 15 | <div class="cell-block-y">
 16 |   <div id="hexGridHeader">
 17 |     <div class="hexCrop">
 18 |       <div class="hexContainer">
 19 |         <div class="hex"></div>
 20 |         <div class="hex"></div>
 21 |         <div class="hex"></div>
 22 |         <div class="hex"></div>
 23 |         <div class="hex"></div>
 24 |         <div class="hex"></div>
 25 |         <div class="hex"></div>
 26 |         <div class="hex"></div>
 27 |         <div class="hex"></div>
 28 |         <div class="hex"></div>
 29 |         <div class="hex"></div>
 30 |         <div class="hex"></div>
 31 |         <div class="hex"></div>
 32 |         <div class="hex"><span>H</span></div>
 33 |         <div class="hex"><span>E</span></div>
 34 |         <div class="hex"><span>X</span></div>
 35 |         <div class="hex"><span>I</span></div>
 36 |         <div class="hex"></div>
 37 |         <div class="hex"><span>F</span></div>
 38 |         <div class="hex"><span>L</span></div>
 39 |         <div class="hex"><span>E</span></div>
 40 |         <div class="hex"><span>X</span></div>
 41 |         <div class="hex"><span>I</span></div>
 42 |         <div class="hex"></div>
 43 |         <div class="hex"></div>
 44 |         <div class="hex"></div>
 45 |         <div class="hex"></div>
 46 |         <div class="hex"></div>
 47 |         <div class="hex"></div>
 48 |         <div class="hex"></div>
 49 |         <div class="hex"></div>
 50 |         <div class="hex"></div>
 51 |         <div class="hex"></div>
 52 |         <div class="hex"></div>
 53 |         <div class="hex"></div>
 54 |         <div class="hex"></div>
 55 |       </div>
 56 |     </div>
 57 |   </div>
 58 | <main>
 59 |   <section class="intro">
 60 |     <div class="textWrapper">
 61 | <p>
 62 |   Hexi-Flexi Grid is an SCSS component, built on the CSS Grid layout, that creates a hexagonal lattice. The mixin includes a number of customizeable settings to control the size, layout and look of the hex grid.
 63 |   <br>
 64 |   <a href="https://github.com/vmcreative/Hexi-Flexi-Grid">Fork on Github</a>
 65 | </p>
 66 | 
 67 | <h3>Features</h3>
 68 |   <ul>
 69 |     <li>Pure CSS styling, no JavaScript</li>
 70 |     <li>Flexible height, width, column and row counts</li>
 71 |     <li>Modular styling for individual cells, columns and rows</li>
 72 |     <li>Supports auto-populating background images</li>
 73 |   </ul>
 74 | <h3>Browser Support</h3>
 75 |   <ul>
 76 |     <li>Firefox 56+</li>
 77 |     <li>Chrome 61+</li>
 78 |     <li>Safari 10.1+</li>
 79 |     <li>iOS Safari 10.3+</li>
 80 |     <li>Chrome for Android 62+</li>
 81 |     <li>IE 11/Edge: CSS Grid is currently supported in modern IE and Edge, however Hexi-Flexi Grid makes use of CSS clip-path, which is not supported. A work-around for this would be to populate the grid with hexagonal SVG img elements, as SVG is universally supported by modern browsers.</li>
 82 |   </ul>
 83 |     </div>
 84 |   </section>
 85 |   <section class="documentation">
 86 |     <div class="textWrapper">
 87 | <h3><a name="content"></a> Content</h3>
 88 | <nav>
 89 |   <ul class="vertical-menu accordion-menu" data-accordion-menu>
 90 |     <li><a href="#getting-started">Getting Started</a>
 91 |       <ul class="menu vertical nested">
 92 |         <li><a href="#html">HTML</a></li>
 93 |         <li><a href="#scss">SCSS</a></li>
 94 |         <li><a href="#customization">Customization</a></li>
 95 |       </ul>
 96 |     </li>
 97 |     <li><a href="#grid-format">Grid Format</a>
 98 |       <ul  class="menu vertical nested">
 99 |         <li><a href="#grid-width">$gridWidth</a></li>
100 |         <li><a href="#grid-height">$gridHeight</a></li>
101 |         <li><a href="#column-count">$columnCount</a></li>
102 |         <li><a href="#row-count">$rowCount</a></li>
103 |         <li><a href="#hex-count">$hexCount</a></li>
104 |         <li><a href="#hex-layout">$hexLayout</a></li>
105 |         <li><a href="#grid-orient">$gridOrient</a></li>
106 |         <li><a href="#crop">$crop</a></li>
107 |         <li><a href="#crop-factor">$cropFactor</a></li>
108 |       </ul>
109 |     </li>
110 |     <li><a href="#hex-cell-format">Hex Cell Format</a>
111 |       <ul class="menu vertical nested">
112 |         <li><a href="#hex-content">$hexContent</a></li>
113 |         <li><a href="#hex-size">$hexSize</a></li>
114 |         <li><a href="#hex-margin">$hexMargin</a></li>
115 |         <li><a href="#hex-shape">$hexShape</a></li>
116 |         <li><a href="#hex-color">$hexColor</a></li>
117 |         <li><a href="#images">$images</a></li>
118 |       </ul>
119 |     </li>
120 |   </ul>
121 | </nav>
122 |     </div>
123 |     <div class="textWrapper">
124 | <h3><a name="getting-started"></a> Getting Started</h3>
125 |   <div id="hexGridDemo-1" class="demoGrid">
126 |   <div class="hexCrop">
127 |     <div class="hexContainer">
128 |       <div class="hex"></div>
129 |       <div class="hex"></div>
130 |       <div class="hex"></div>
131 |       <div class="hex"></div>
132 |       <div class="hex"></div>
133 |       <div class="hex"></div>
134 |     </div>
135 |   </div>
136 |   </div>
137 |   <p>To build the basic 3x2 hex grid shown above, follow the steps listed below.</p>
138 |   <h4><a name="html"></a>HTML</h4>
139 |     <p>Include the following nested div tree in your HTML markup at the location you want to build the hex grid. Give the top level parent a unique id.</p>
140 |     <p>Within the div with the class <mark>.hexContainer</mark>, include a number of divs with the class <mark>.hex</mark> equal to the number of hexagonal cells in the grid (in this case 6).</p>
141 | 
142 | <div class="codeblock">
143 | <p>HTML</p>
144 | <pre><code>&lt;div id=&quot;myHexGrid&quot;&gt;
145 |   &lt;div class=&quot;hexCrop&quot;&gt;
146 |     &lt;div class=&quot;hexContainer&quot;&gt;
147 |       &lt;div class=&quot;hex&quot;&gt;&lt;/div&gt;
148 |       &lt;div class=&quot;hex&quot;&gt;&lt;/div&gt;
149 |       &lt;div class=&quot;hex&quot;&gt;&lt;/div&gt;
150 |       &lt;div class=&quot;hex&quot;&gt;&lt;/div&gt;
151 |       &lt;div class=&quot;hex&quot;&gt;&lt;/div&gt;
152 |       &lt;div class=&quot;hex&quot;&gt;&lt;/div&gt;
153 |     &lt;/div&gt;
154 |   &lt;/div&gt;
155 | &lt;/div&gt;</code></pre>
156 | </div>
157 | 
158 | <h4><a name="scss"></a>SCSS</h4>
159 | <p>Include the Hexi-Flexi Grid component files in the same directory as your main SCSS file. Within your main SCSS file, import <mark>hex-style.scss</mark> above any rules that will affect the content of the grid.</p>
160 | 
161 | <div class="codeblock">
162 | <p>SCSS (main)</p>
163 | <pre><code>@import 'path/to/hex-style.scss';</code></pre>
164 | </div>
165 | 
166 | <p>Inside of <mark>hex-style</mark> is a modular block of code that contains settings for the hex grid. Set the id selector the top of the code block to match the id of the top-level parent div. </p>
167 | <p>If there will be multiple unique hex grids, duplicate this code block for each unique id.</p>
168 | 
169 | <div class="codeblock">
170 | <p>SCSS (_hex-style.scss)</p>
171 | <pre><code>#myHexGrid {
172 |   $gridWidth:   20em;
173 |   $gridHeight:  auto;
174 |   $columnCount: 3;
175 |   $rowCount:    2;
176 |   $hexCount:    auto;
177 |   $hexLayout:   row;
178 |   $gridOrient:  vertical;
179 |   $crop:        none;
180 |   $cropFactor:  1;
181 |   $hexContent:  auto;
182 |   $hexSize:     auto;
183 |   $hexMargin:   0.5em;
184 |   $hexShape:    hexagon;
185 |   $hexColor:    #48a999;
186 |   $breakpoints: none;
187 |   $images:      none;
188 | 
189 |   // ...
190 | 
191 | }</code></pre>
192 | </div>
193 | 
194 | <h4><a name="customization"></a>Customization</h4>
195 | <p>The grid can be assigned custom css from inside the  <mark>hex-style</mark> codeblock.</p>
196 | <p>Hexi-Flexi Grid assigns unique class names to each individual column, row and cell in the hex grid.
197 | <br>
198 | <mark>.c-[n]</mark> targets every cell in column [n].
199 | <br>
200 | <mark>.r-[n]</mark> targets every cell in row [n].
201 | <br>
202 | <mark>.c-[n1].r-[n2]</mark> targets the cell located at column [n1], row [n2].</p>
203 | 
204 | <div class="codeblock">
205 | <p>SCSS (_hex-style.scss)</p>
206 | <pre><code>#myHexGrid {
207 | 
208 |   // ...
209 | 
210 |   margin: 2em;
211 |     // create 2em margin around the grid
212 | 
213 |   .c-1 {background-color: red;}
214 |     // column 1 cells will be red
215 | 
216 |   .r-2 {transform: scale(0.8);}
217 |     // row 2 cells will be 80% as large
218 | 
219 |   .c-3.r-1 {opacity:0.5;}
220 |     // make column 3, row 1 50% opaque
221 | 
222 |   // ...
223 | 
224 | }</code></pre>
225 | </div>
226 |     </div>
227 |     <div class="textWrapper">
228 | <h3><a name="grid-settings"></a>Grid Settings</h3>
229 | <br>
230 | <h5><a name="grid-width"></a>$gridWidth</h5>
231 | <p>Set the width of the hex grid.</p>
232 | <table>
233 |   <thead>
234 |     <tr>
235 |       <th class="value">Value</th>
236 |       <th>Description</th>
237 |     </tr>
238 |   </thead>
239 |   <tbody>
240 |     <tr>
241 |       <td class="value">'auto'</td>
242 |       <td>The grid width will match the ratio of $gridHeight. When set to auto, $gridHeight must be explicitly set.</td>
243 |     </tr>
244 |     <tr>
245 |       <td class="value"><i>length</i></td>
246 |       <td>Explicitly set the height. Note: percent width is not supported.</td>
247 |     </tr>
248 |   </tbody>
249 | </table>
250 | <br>
251 | <h5><a name="grid-height"></a>$gridHeight</h5>
252 | <p>Set the height of the hex grid.</p>
253 | <table>
254 |   <thead>
255 |     <tr>
256 |       <th class="value">Value</th>
257 |       <th>Description</th>
258 |     </tr>
259 |   </thead>
260 |   <tbody>
261 |     <tr>
262 |       <td class="value">'auto'</td>
263 |       <td>The grid height will match the ratio of $gridWidth. When set to auto, $gridWidth must be explicitly set.</td>
264 |     </tr>
265 |     <tr>
266 |       <td class="value"><i>length</i></td>
267 |       <td>Explicitly set the height. Note: percent height is not supported.</td>
268 |     </tr>
269 |   </tbody>
270 | </table>
271 | <br>
272 | <h5><a name="column-count"></a>$columnCount</h5>
273 | <p>Set the number of columns in the hex grid.</p>
274 | <table>
275 |   <thead>
276 |     <tr>
277 |       <th class="value">Value</th>
278 |       <th>Description</th>
279 |     </tr>
280 |   </thead>
281 |   <tbody>
282 |     <tr>
283 |       <td class="value">'auto'</td>
284 |       <td>The column count will match the number of cells divided by the number of rows. When set to auto, $rowCount and $hexCount must be explicitly set.</td>
285 |     </tr>
286 |     <tr>
287 |       <td class="value"><i>number</i></td>
288 |       <td>Explicitly set the number of columns.</td>
289 |     </tr>
290 |   </tbody>
291 | </table>
292 | <br>
293 | <h5><a name="row-count"></a>$rowCount</h5>
294 | <p>Set the number of rows in the hex grid.</p>
295 | <table>
296 |   <thead>
297 |     <tr>
298 |       <th class="value">Value</th>
299 |       <th>Description</th>
300 |     </tr>
301 |   </thead>
302 |   <tbody>
303 |     <tr>
304 |       <td class="value">'auto'</td>
305 |       <td>The row count will match the number of cells divided by the number of columns. When set to auto, $columnCount and $hexCount must be explicitly set.</td>
306 |     </tr>
307 |     <tr>
308 |       <td class="value"><i>number</i></td>
309 |       <td>Explicitly set the number of rows.</td>
310 |     </tr>
311 |   </tbody>
312 | </table>
313 | <br>
314 | <h5><a name="hex-count"></a>$hexCount</h5>
315 | <p>Set the number of hex cells in the hex grid.</p>
316 | <table>
317 |   <thead>
318 |     <tr>
319 |       <th class="value">Value</th>
320 |       <th>Description</th>
321 |     </tr>
322 |   </thead>
323 |   <tbody>
324 |     <tr>
325 |       <td class="value">'auto'</td>
326 |       <td>The cell count will match the number of columns times the number of rows. When set to auto, $rowCount and $columnCount must be explicitly set.</td>
327 |     </tr>
328 |     <tr>
329 |       <td class="value"><i>number</i></td>
330 |       <td>Explicitly set the number of cells.</td>
331 |     </tr>
332 |   </tbody>
333 | </table>
334 | <br>
335 | <h5><a name="hex-layout"></a>$hexLayout</h5>
336 | <p>Set the direction the cells will populate the grid.</p>
337 | <table>
338 |   <thead>
339 |     <tr>
340 |       <th class="value">Value</th>
341 |       <th>Description</th>
342 |     </tr>
343 |   </thead>
344 |   <tbody>
345 |     <tr>
346 |       <td class="value">'row'</td>
347 |       <td>Cells will populate the grid starting at the top left corner and filling in horizontally, spilling over into the next row once each has filled.</td>
348 |     </tr>
349 |     <tr>
350 |       <td class="value">'column'</td>
351 |       <td>Cells will populate the grid starting at the top left corner and filling in vertically, spilling over into the next column once each has filled.</td>
352 |     </tr>
353 |   </tbody>
354 | </table>
355 | <br>
356 | <h5><a name="grid-orient"></a>$gridOrient</h5>
357 | <p>Set the orientation in which the grid cells will align.</p>
358 | <table>
359 |   <thead>
360 |     <tr>
361 |       <th class="value">Value</th>
362 |       <th>Description</th>
363 |     </tr>
364 |   </thead>
365 |   <tbody>
366 |     <tr>
367 |       <td class="value">'vertical'</td>
368 |       <td>Columns will run in straight lines, rows will offset by one half cell.</td>
369 |     </tr>
370 |     <tr>
371 |       <td class="value">'horizontal'</td>
372 |       <td>Rows will run in straight lines, rows will offset by one half cell.</td>
373 |     </tr>
374 |   </tbody>
375 | </table>
376 | <br>
377 | <h5><a name="crop"></a>$crop</h5>
378 | <p>Set whether the grid will be rectangularly cropped.</p>
379 | <table>
380 |   <thead>
381 |     <tr>
382 |       <th class="value">Value</th>
383 |       <th>Description</th>
384 |     </tr>
385 |   </thead>
386 |   <tbody>
387 |     <tr>
388 |       <td class="value">'none'</td>
389 |       <td>The grid will be uncropped.</td>
390 |     </tr>
391 |     <tr>
392 |       <td class="value">'crop'</td>
393 |       <td>The grid will be scaled by the factor set with $cropFactor and overflow is hidden.</td>
394 |     </tr>
395 |   </tbody>
396 | </table>
397 | <br>
398 | <h5><a name="crop-factor"></a>$cropFactor</h5>
399 | <p>Set the amount the grid will be scaled when it is cropped.</p>
400 | <table>
401 |   <thead>
402 |     <tr>
403 |       <th class="value">Value</th>
404 |       <th>Description</th>
405 |     </tr>
406 |   </thead>
407 |   <tbody>
408 |     <tr>
409 |       <td class="value"><i>number</i></td>
410 |       <td>Explicitly set the crop-factor. A value of 1.2 will scale the grid by 120%.</td>
411 |     </tr>
412 |   </tbody>
413 | </table>
414 | <br>
415 | <h5><a name="hex-content"></a>$hexContent</h5>
416 | <p>Set the behavior of the cell content.</p>
417 | <table>
418 |   <thead>
419 |     <tr>
420 |       <th class="value">Value</th>
421 |       <th>Description</th>
422 |     </tr>
423 |   </thead>
424 |   <tbody>
425 |     <tr>
426 |       <td class="value">'auto'</td>
427 |       <td>Cell content will stretch to cover the entire size of the cell, minus the value of $hexMargin.</td>
428 |     </tr>
429 |     <tr>
430 |       <td class="value">'center'</td>
431 |       <td>Cell content will be centered, and will match the value of $hexSize. $hexMargin will be ignored.</td>
432 |     </tr>
433 |   </tbody>
434 | </table>
435 | <br>
436 | <h5><a name="hex-size"></a>$hexSize</h5>
437 | <p>Set the size of the cells.</p>
438 | <table>
439 |   <thead>
440 |     <tr>
441 |       <th class="value">Value</th>
442 |       <th>Description</th>
443 |     </tr>
444 |   </thead>
445 |   <tbody>
446 |     <tr>
447 |       <td class="value">'auto'</td>
448 |       <td>Cells will take up 100% of the available space.</td>
449 |     </tr>
450 |     <tr>
451 |       <td class="value"><i>number</i></td>
452 |       <td>Explicitly set the cell size. Note: percent size is not supported.</td>
453 |     </tr>
454 |   </tbody>
455 | </table>
456 | <br>
457 | <h5><a name="hex-margin"></a>$hexMargin</h5>
458 | <p>Set the size of the margins on the cells.</p>
459 | <table>
460 |   <thead>
461 |     <tr>
462 |       <th class="value">Value</th>
463 |       <th>Description</th>
464 |     </tr>
465 |   </thead>
466 |   <tbody>
467 |     <tr>
468 |       <td class="value"><i>number</i></td>
469 |       <td>Explicitly set the cell margin. Note: percent size is not supported.</td>
470 |     </tr>
471 |   </tbody>
472 | </table>
473 | <br>
474 | <h5><a name="hex-shape"></a>$hexShape</h5>
475 | <p>Set the shape of the clip-mask on the cells.</p>
476 | <table>
477 |   <thead>
478 |     <tr>
479 |       <th class="value">Value</th>
480 |       <th>Description</th>
481 |     </tr>
482 |   </thead>
483 |   <tbody>
484 |     <tr>
485 |       <td class="value">'hexagon'</td>
486 |       <td>Cells will be hexagonal.</td>
487 |     </tr>
488 |     <tr>
489 |       <td class="value">'circle'</td>
490 |       <td>Cells will be circular.</td>
491 |     </tr>
492 |   </tbody>
493 | </table>
494 | <br>
495 | <h5><a name="hex-color"></a>$hexColor</h5>
496 | <p>Set the background color of the cells.</p>
497 | <table>
498 |   <thead>
499 |     <tr>
500 |       <th class="value">Value</th>
501 |       <th>Description</th>
502 |     </tr>
503 |   </thead>
504 |   <tbody>
505 |     <tr>
506 |       <td class="value"><i>color</i></td>
507 |       <td>Accepts hexcode, rgb/a and named colors.</td>
508 |     </tr>
509 |   </tbody>
510 | </table>
511 | <br>
512 | <h5><a name="images"></a>$images</h5>
513 | <p>Set a list of files to be passed to the hex cells as background images. The files will be added to the grid according to the order specified by $gridLayout.</p>
514 | <p>A value of 'none' will disable $images.</p>
515 | <div class="codeblock">
516 | <p>SCSS (_hex-style.scss)</p>
517 | <pre><code>#myHexGrid {
518 | 
519 |   // ...
520 | 
521 |   $images:
522 |     'path/to/image-1.jpg'
523 |     'path/to/image-2.jpg'
524 |     'path/to/image-3.jpg'
525 |     'path/to/image-4.jpg'
526 |     'path/to/image-5.jpg'
527 |     'path/to/image-6.jpg'
528 |   ;
529 | 
530 |   // ...
531 | 
532 | }</code></pre>
533 | </div>
534 |     </div>
535 |   </section>
536 |   <footer class="cell shrink">
537 |     <span>Copyright (c) 2017 Vincent Martin | <a href="https://github.com/vmcreative/Hexi-Flexi-Grid">Fork on Github</a></span>
538 |   </footer>
539 | </main>
540 | </div>
541 | </div>
542 | </div>
543 | 
544 | <script src="assets/js/app.js"></script>
545 | </body>
546 | </html>
547 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | #hexGrid {
 2 |   height: 17.3em;
 3 |   width: 20em; }
 4 |   #hexGrid .hexCrop {
 5 |     position: relative;
 6 |     overflow: visible; }
 7 |   #hexGrid .hexGrid {
 8 |     display: grid;
 9 |     justify-items: auto;
10 |     align-items: auto;
11 |     height: 17.3em;
12 |     width: 20em;
13 |     grid-template-columns: repeat(3, 1fr 2fr) 1fr;
14 |     grid-template-rows: repeat(5, 3.46em); }
15 |     #hexGrid .hexGrid .hex {
16 |       display: none; }
17 |     #hexGrid .hexGrid .c-1, #hexGrid .hexGrid .hex:nth-child(1), #hexGrid .hexGrid .hex:nth-child(4) {
18 |       grid-column-start: 1;
19 |       grid-column-end: span 3; }
20 |     #hexGrid .hexGrid .c-1.r-1, #hexGrid .hexGrid .hex:nth-child(1), #hexGrid .hexGrid .c-1.hex:nth-child(2), #hexGrid .hexGrid .hex:nth-child(2):nth-child(4), #hexGrid .hexGrid .c-1.hex:nth-child(3), #hexGrid .hexGrid .hex:nth-child(3):nth-child(4), #hexGrid .hexGrid .r-1.hex:nth-child(4) {
21 |       grid-row-start: 1;
22 |       grid-row-end: span 2; }
23 |     #hexGrid .hexGrid .c-1.r-2, #hexGrid .hexGrid .r-2.hex:nth-child(1), #hexGrid .hexGrid .hex:nth-child(1):nth-child(5), #hexGrid .hexGrid .hex:nth-child(1):nth-child(6), #hexGrid .hexGrid .hex:nth-child(4), #hexGrid .hexGrid .c-1.hex:nth-child(5), #hexGrid .hexGrid .c-1.hex:nth-child(6) {
24 |       grid-row-start: 3;
25 |       grid-row-end: span 2; }
26 |     #hexGrid .hexGrid .c-2, #hexGrid .hexGrid .hex:nth-child(2), #hexGrid .hexGrid .hex:nth-child(5) {
27 |       grid-column-start: 3;
28 |       grid-column-end: span 3; }
29 |     #hexGrid .hexGrid .c-2.r-1, #hexGrid .hexGrid .c-2.hex:nth-child(1), #hexGrid .hexGrid .hex:nth-child(1):nth-child(5), #hexGrid .hexGrid .hex:nth-child(2), #hexGrid .hexGrid .c-2.hex:nth-child(3), #hexGrid .hexGrid .hex:nth-child(3):nth-child(5), #hexGrid .hexGrid .r-1.hex:nth-child(5) {
30 |       grid-row-start: 2;
31 |       grid-row-end: span 2; }
32 |     #hexGrid .hexGrid .c-2.r-2, #hexGrid .hexGrid .r-2.hex:nth-child(2), #hexGrid .hexGrid .hex:nth-child(2):nth-child(4), #hexGrid .hexGrid .hex:nth-child(2):nth-child(6), #hexGrid .hexGrid .c-2.hex:nth-child(4), #hexGrid .hexGrid .hex:nth-child(5), #hexGrid .hexGrid .c-2.hex:nth-child(6) {
33 |       grid-row-start: 4;
34 |       grid-row-end: span 2; }
35 |     #hexGrid .hexGrid .c-3, #hexGrid .hexGrid .hex:nth-child(3), #hexGrid .hexGrid .hex:nth-child(6) {
36 |       grid-column-start: 5;
37 |       grid-column-end: span 3; }
38 |     #hexGrid .hexGrid .c-3.r-1, #hexGrid .hexGrid .c-3.hex:nth-child(1), #hexGrid .hexGrid .hex:nth-child(1):nth-child(6), #hexGrid .hexGrid .c-3.hex:nth-child(2), #hexGrid .hexGrid .hex:nth-child(2):nth-child(6), #hexGrid .hexGrid .hex:nth-child(3), #hexGrid .hexGrid .r-1.hex:nth-child(6) {
39 |       grid-row-start: 1;
40 |       grid-row-end: span 2; }
41 |     #hexGrid .hexGrid .c-3.r-2, #hexGrid .hexGrid .r-2.hex:nth-child(3), #hexGrid .hexGrid .hex:nth-child(3):nth-child(4), #hexGrid .hexGrid .hex:nth-child(3):nth-child(5), #hexGrid .hexGrid .c-3.hex:nth-child(4), #hexGrid .hexGrid .c-3.hex:nth-child(5), #hexGrid .hexGrid .hex:nth-child(6) {
42 |       grid-row-start: 3;
43 |       grid-row-end: span 2; }
44 |     #hexGrid .hexGrid .hex:nth-child(1) {
45 |       display: flex;
46 |       align-items: center;
47 |       justify-content: center; }
48 |     #hexGrid .hexGrid .hex:nth-child(2) {
49 |       display: flex;
50 |       align-items: center;
51 |       justify-content: center; }
52 |     #hexGrid .hexGrid .hex:nth-child(3) {
53 |       display: flex;
54 |       align-items: center;
55 |       justify-content: center; }
56 |     #hexGrid .hexGrid .hex:nth-child(4) {
57 |       display: flex;
58 |       align-items: center;
59 |       justify-content: center; }
60 |     #hexGrid .hexGrid .hex:nth-child(5) {
61 |       display: flex;
62 |       align-items: center;
63 |       justify-content: center; }
64 |     #hexGrid .hexGrid .hex:nth-child(6) {
65 |       display: flex;
66 |       align-items: center;
67 |       justify-content: center; }
68 |     #hexGrid .hexGrid .hex:nth-child(1) {
69 |       background-image: url(none); }
70 |     #hexGrid .hexGrid .hex {
71 |       -webkit-clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
72 |       clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
73 |       background-color: #48a999;
74 |       background-size: cover;
75 |       margin: 0.4325em 0.5em; }
76 | 
77 | /*# sourceMappingURL=style.css.map */
78 | 


--------------------------------------------------------------------------------
/style.scss:
--------------------------------------------------------------------------------
1 | @import 'hex-style.scss';
2 | 


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Hexi-Flexi Grid</title>
 6 |     <link href="style.css" rel="stylesheet" type="text/css">
 7 |   </head>
 8 |   <body>
 9 |       <div id="hexGrid">
10 |         <div class="hexCrop">
11 |           <div class="hexGrid">
12 |             <div class="hex"></div>
13 |             <div class="hex"></div>
14 |             <div class="hex"></div>
15 |             <div class="hex"></div>
16 |             <div class="hex"></div>
17 |             <div class="hex"></div>
18 |           </div>
19 |         </div>
20 |       </div>
21 |     </main>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------