{"id":13548541,"url":"https://github.com/vmcreative/Hexi-Flexi-Grid","last_synced_at":"2025-04-02T21:31:47.294Z","repository":{"id":217600567,"uuid":"113164834","full_name":"vmcreative/Hexi-Flexi-Grid","owner":"vmcreative","description":"An SCSS partial that builds flexible, modular hex grids using CSS Grid","archived":false,"fork":false,"pushed_at":"2018-03-06T07:10:56.000Z","size":2386,"stargazers_count":195,"open_issues_count":5,"forks_count":25,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-11-03T17:39:49.461Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vmcreative.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-05T09:58:54.000Z","updated_at":"2024-09-26T21:00:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"90254387-9546-42b0-945f-b87c5934d36c","html_url":"https://github.com/vmcreative/Hexi-Flexi-Grid","commit_stats":null,"previous_names":["vmcreative/hexi-flexi-grid"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vmcreative%2FHexi-Flexi-Grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vmcreative%2FHexi-Flexi-Grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vmcreative%2FHexi-Flexi-Grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vmcreative%2FHexi-Flexi-Grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vmcreative","download_url":"https://codeload.github.com/vmcreative/Hexi-Flexi-Grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246895813,"owners_count":20851332,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T12:01:11.643Z","updated_at":"2025-04-02T21:31:46.827Z","avatar_url":"https://github.com/vmcreative.png","language":"CSS","funding_links":[],"categories":["CSS","others","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# Hexi-Flexi Grid\n\n[Github Page](https://vmcreative.github.io/Hexi-Flexi-Grid/)\n\nHexi-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.\n\n## Features\n- Pure CSS styling, no JavaScript\n- Flexible height, width, column and row counts\n- Modular styling for individual cells, columns and rows\n- Supports auto-populating background images\n\n## Browser Support\n- Firefox 56+\n- Chrome 61+\n- Safari 10.1+\n- iOS Safari 10.3+\n- Chrome for Android 62+\n- 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.\n\n## Getting Started\nTo build a basic 3x2 hex grid, follow the steps listed below.\n\n### HTML\nInclude 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.\nWithin 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).\n\n```\n\u003cdiv id=\"myHexGrid\"\u003e\n  \u003cdiv class=\"hexCrop\"\u003e\n    \u003cdiv class=\"hexContainer\"\u003e\n      \u003cdiv class=\"hex\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"hex\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"hex\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"hex\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"hex\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"hex\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### SCSS\nInclude 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.\n\n```\n@import 'path/to/hex-style.scss';\n```\n\nInside 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.\nIf there will be multiple unique hex grids, duplicate this code block for each unique id.\n\n```\n#myHexGrid {\n  $gridWidth:   20em;\n  $gridHeight:  auto;\n  $columnCount: 3;\n  $rowCount:    2;\n  $hexCount:    auto;\n  $hexLayout:   row;\n  $gridOrient:  vertical;\n  $crop:        none;\n  $cropFactor:  1;\n  $hexContent:  auto;\n  $hexSize:     auto;\n  $hexMargin:   0.5em;\n  $hexShape:    hexagon;\n  $hexColor:    #48a999;\n  $breakpoints: none;\n  $images:      none;\n\n  // ...\n\n}\n```\n\n### Customization\nThe grid can be assigned custom css from inside the `hex-style` codeblock.\nHexi-Flexi Grid assigns unique class names to each individual column, row and cell in the hex grid. \n- `.c-[n]` targets every cell in column [n]. \n- `.r-[n]` targets every cell in row [n]. \n- `.c-[n1].r-[n2]` targets the cell located at column [n1], row [n2].\n\n```\n#myHexGrid {\n\n  // ...\n\n  margin: 2em;\n    // create 2em margin around the grid\n\n  .c-1 {background-color: red;}\n    // column 1 cells will be red\n\n  .r-2 {transform: scale(0.8);}\n    // row 2 cells will be 80% as large\n\n  .c-3.r-1 {opacity:0.5;}\n    // make column 3, row 1 50% opaque\n\n  // ...\n\n}\n```\n\n## Grid Settings\n\n### $gridWidth\nSet the width of the hex grid.\n\n- **'auto'**  The grid width will match the ratio of $gridHeight. When set to auto, $gridHeight must be explicitly set.\n- **_length_**\tExplicitly set the height. Note: percent width is not supported.\n\n### $gridHeight\nSet the height of the hex grid.\n\n- **'auto'**\tThe grid height will match the ratio of $gridWidth. When set to auto, $gridWidth must be explicitly set.\n- **_length_**\tExplicitly set the height. Note: percent height is not supported.\n\n### $columnCount\nSet the number of columns in the hex grid.\n\n- **'auto'**\tThe 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.\n- **_number_**\tExplicitly set the number of columns.\n\n### $rowCount\nSet the number of rows in the hex grid.\n\n- **'auto'**\tThe 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.\n- **_number_**\tExplicitly set the number of rows.\n\n### $hexCount\nSet the number of hex cells in the hex grid.\n\n- **'auto'**\tThe cell count will match the number of columns times the number of rows. When set to auto, $rowCount and $columnCount must be explicitly set.\n- **_number_**\tExplicitly set the number of cells.\n\n### $hexLayout\nSet the direction the cells will populate the grid.\n\n- **'row'**\tCells will populate the grid starting at the top left corner and filling in horizontally, spilling over into the next row once each has filled.\n- **'column'**\tCells will populate the grid starting at the top left corner and filling in vertically, spilling over into the next column once each has filled.\n\n### $gridOrient\nSet the orientation in which the grid cells will align.\n\n- **'vertical'**\tColumns will run in straight lines, rows will offset by one half cell.\n- **'horizontal'**\tRows will run in straight lines, rows will offset by one half cell.\n\n### $crop\nSet whether the grid will be rectangularly cropped.\n\n- **'none'**\tThe grid will be uncropped.\n- **'crop'**\tThe grid will be scaled by the factor set with $cropFactor and overflow is hidden.\n\n### $cropFactor\nSet the amount the grid will be scaled when it is cropped.\n\n- **number**\tExplicitly set the crop-factor. A value of 1.2 will scale the grid by 120%.\n\n### $hexContent\nSet the behavior of the cell content.\n\n- **'auto'**\tCell content will stretch to cover the entire size of the cell, minus the value of $hexMargin.\n- **'center'**\tCell content will be centered, and will match the value of $hexSize. $hexMargin will be ignored.\n\n### $hexSize\nSet the size of the cells.\n\n- **'auto'**\tCells will take up 100% of the available space.\n- **_number_**\tExplicitly set the cell size. Note: percent size is not supported.\n\n### $hexMargin\nSet the size of the margins on the cells.\n\n- **_number_**\tExplicitly set the cell margin. Note: percent size is not supported.\n\n### $hexShape\nSet the shape of the clip-mask on the cells.\n\n- **'hexagon'**\tCells will be hexagonal.\n- **'circle'**\tCells will be circular.\n\n### $hexColor\nSet the background color of the cells.\n\n- **_color_**\tAccepts hexcode, rgb/a and named colors.\n\n### $images\nSet 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.\nA value of 'none' will disable $images.\n\n```\n#myHexGrid {\n\n  // ...\n\n  $images:\n    'path/to/image-1.jpg'\n    'path/to/image-2.jpg'\n    'path/to/image-3.jpg'\n    'path/to/image-4.jpg'\n    'path/to/image-5.jpg'\n    'path/to/image-6.jpg'\n  ;\n\n  // ...\n\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvmcreative%2FHexi-Flexi-Grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvmcreative%2FHexi-Flexi-Grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvmcreative%2FHexi-Flexi-Grid/lists"}