Skip to content

Instantly share code, notes, and snippets.

@owain-stratton

owain-stratton/hex_grid_demo.markdown

Created February 15, 2017 21:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save owain-stratton/3db01a6c651e34ff0aa5d3b2f349b1e7 to your computer and use it in GitHub Desktop.
Save owain-stratton/3db01a6c651e34ff0aa5d3b2f349b1e7 to your computer and use it in GitHub Desktop.
Download ZIP
hex_grid_demo
Raw
index.haml
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,900" rel="stylesheet">
%header
%h1 Hex Grid Demo
%article
%h2 Hex Grid Section One
%div.example-1
- (1..22).each do |i|
%section.hex
%div.inner-hex
%div.hex-content
%h3 hx #{i}
%img{:src => "https://c1.staticflickr.com/1/741/32738266682_1c72be7bf4_k.jpg", :width => "2048", :height => "1536", :alt => "L&#x27;envol | Chouette lapone | Les Cèdres"}
Raw
style.scss
/*******************************
/===============================
/===============================
FUNCTIONS
===============================/
===============================/
*******************************/
$pi: 3.14159265359;
$_precision: 10;
@function pow($base, $exp) {
$value: $base;
@if $exp > 1 {
@for $i from 2 through $exp {
$value: $value * $base;
}
}
@if $exp < 1{
@for $i from 0 through -$exp {
$value: $value / $base;
}
}
@return $value;
}
@function fact($num) {
$fact: 1;
@if $num > 0{
@for $i from 1 through $num {
$fact: $fact * $i;
}
}
@return $fact;
}
@function _to_unitless_rad($angle) {
@if unit($angle) == "deg" {
$angle: $angle / 180deg * $pi;
}
@if unit($angle) == "rad" {
$angle: $angle / 1rad;
}
@return $angle;
}
@function sin($angle){
$a: _to_unitless_rad($angle);
$sin: $a;
@for $n from 1 through $_precision {
$sin: $sin + (pow(-1, $n) / fact(2 * $n + 1) ) * pow($a, (2 * $n + 1));
}
@return $sin;
}
@function cos($angle){
$a: _to_unitless_rad($angle);
$cos: 1;
@for $n from 1 through $_precision {
$cos: $cos + ( pow(-1,$n) / fact(2*$n) ) * pow($a,2*$n);
}
@return $cos;
}
@function tan($angle){
@return sin($angle) / cos($angle);
}
/*******************************
/===============================
/===============================
MIXINS
===============================/
===============================/
*******************************/
$mobile-width: 480px;
$tablet-width: 768px;
$desktop-width: 1024px;
$ultra-wide: 1280px;
$highRes: 200dpi;
@mixin mobile {
@media screen and (max-width: #{$mobile-width}) {
@content;
}
}
@mixin tablet {
@media screen and (min-width: #{$mobile-width}) and (max-width: #{$desktop-width}) {
@content;
}
}
@mixin desktop {
@media screen and (min-width: #{$desktop-width}) and (max-width: #{$ultra-wide}) {
@content;
}
}
@mixin ultrawide {
@media screen and (min-width: #{$ultra-wide}) {
@content;
}
}
/*******************************
/===============================
/===============================
APP STYLES
===============================/
===============================/
*******************************/
body {
font-family: 'Source Sans Pro', sans-serif;
line-height: 1.6;
font-size: 16px;
color: #f2f2f2;
background-color: rgb(142, 55, 1);
text-rendering: optimizelegibility;
}
header {
display: flex;
align-items: stretch;
justify-content: center;
}
article {
width: 90%;
margin: 0 auto;
}
h1 {
font-size: 4.8rem;
font-weight: 400;
line-height: 1.6 * 2;
}
h2 {
font-size: 3rem;
width: 100%;
text-align: center;
line-height: 1.6 * 2;
margin-bottom: 22px;
}
/*******************************
EXAMPLE 1
*******************************/
.example-1 {
width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
overflow: hidden;
padding-bottom: 11.2%;
@include tablet {
padding-bottom: 7.4%;
}
@include desktop {
padding-bottom: 5.5%;
}
.hex {
position: relative;
visibility: hidden;
outline: 1px solid transparent;
background-color: rgb(142, 55, 1);
width: 50%;
/*
:nth-child(a, b)
a = x + y
b = x + 1
odd row: indent {.hex} [width / 2]
*/
@include mobile {
/*
x = 2, y = 1
a = 2 + 1
b = 2 + 1
*/
&:nth-child(3n+3) { /* 2 -> 1 grid */
margin-left: 25%;
}
}
@include tablet {
width: 33.33%;
/*
x = 3, y = 2
a = 3 + 2
b = 3 + 1
*/
&:nth-child(5n+4){ /* 3 -> 2 grid */
margin-left: 16.666%;
}
}
@include desktop {
width: 25%;
/*
x = 4, y = 3
a = 4 + 3
b = 4 + 1
*/
&:nth-child(7n+5){ /* 4 -> 3 grid */
margin-left: 12.5%;
}
}
@include ultrawide {
width: 20%;
/*
x = 5, y = 4
a = 5 + 4
b = 5 + 1
*/
&:nth-child(9n+6){ /* 5 -> 4 grid */
margin-left: 10%;
}
}
&::after {
content: '';
display: block;
padding-bottom: 100 / tan(60) * 2.5%;
}
.inner-hex {
position: absolute;
width: 96%;
padding-bottom: 110.851%;
margin: 0 2.5%;
overflow: hidden;
visibility: hidden;
outline: 1px solid transparent;
transform: rotate3d(0, 0, 1, -60deg) skewy(30deg);
}
.inner-hex * {
position: absolute;
visibility: visible;
outline: 1px solid transparent;
}
.hex-content {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgb(142, 55, 1);
text-align: center;
transform: skewy(-30deg) rotate3d(0, 0, 1, 60deg);
}
h3 {
box-sizing: border-box;
z-index: 99;
transform: translate3d(0, 0, 0);
font-size: 2.4rem;
}
img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment