Content

Getting Started

To build the basic 3x2 hex grid shown above, follow the steps listed below.

HTML

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.

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).

<div id="myHexGrid">
  <div class="hexCrop">
    <div class="hexContainer">
      <div class="hex"></div>
      <div class="hex"></div>
      <div class="hex"></div>
      <div class="hex"></div>
      <div class="hex"></div>
      <div class="hex"></div>
    </div>
  </div>
</div>

SCSS

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.

@import 'path/to/hex-style.scss';

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.

If there will be multiple unique hex grids, duplicate this code block for each unique id.

#myHexGrid {
  $gridWidth:   20em;
  $gridHeight:  auto;
  $columnCount: 3;
  $rowCount:    2;
  $hexCount:    auto;
  $hexLayout:   row;
  $gridOrient:  vertical;
  $crop:        none;
  $cropFactor:  1;
  $hexContent:  auto;
  $hexSize:     auto;
  $hexMargin:   0.5em;
  $hexShape:    hexagon;
  $hexColor:    #48a999;
  $breakpoints: none;
  $images:      none;

  // ...

}

Customization

The grid can be assigned custom css from inside the hex-style codeblock.

Hexi-Flexi Grid assigns unique class names to each individual column, row and cell in the hex grid.
.c-[n] targets every cell in column [n].
.r-[n] targets every cell in row [n].
.c-[n1].r-[n2] targets the cell located at column [n1], row [n2].

#myHexGrid {

  // ...

  margin: 2em;
    // create 2em margin around the grid

  .c-1 {background-color: red;}
    // column 1 cells will be red

  .r-2 {transform: scale(0.8);}
    // row 2 cells will be 80% as large

  .c-3.r-1 {opacity:0.5;}
    // make column 3, row 1 50% opaque

  // ...

}

Grid Settings

$gridWidth

Set the width of the hex grid.

$gridHeight

Set the height of the hex grid.

$columnCount

Set the number of columns in the hex grid.

$rowCount

Set the number of rows in the hex grid.

$hexCount

Set the number of hex cells in the hex grid.

$hexLayout

Set the direction the cells will populate the grid.

$gridOrient

Set the orientation in which the grid cells will align.

$crop

Set whether the grid will be rectangularly cropped.

$cropFactor

Set the amount the grid will be scaled when it is cropped.

$hexContent

Set the behavior of the cell content.

$hexSize

Set the size of the cells.

$hexMargin

Set the size of the margins on the cells.

$hexShape

Set the shape of the clip-mask on the cells.

$hexColor

Set the background color of the cells.

$images

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.

A value of 'none' will disable $images.

#myHexGrid {

  // ...

  $images:
    'path/to/image-1.jpg'
    'path/to/image-2.jpg'
    'path/to/image-3.jpg'
    'path/to/image-4.jpg'
    'path/to/image-5.jpg'
    'path/to/image-6.jpg'
  ;

  // ...

}