Skip to content

Instantly share code, notes, and snippets.

@zellwk

zellwk/SassMeister-input-HTML.html

Created April 8, 2015 13:25
Show Gist options
  • Save zellwk/f6eb964f0c595835d573 to your computer and use it in GitHub Desktop.
Save zellwk/f6eb964f0c595835d573 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Starter Kit!</title>
<!-- build:css css/styles.min.css -->
<link rel="stylesheet" href="css/styles.css">
<!-- endbuild -->
<!--build:headjs js/head.min.js -->
<!--endbuild -->
</head>
<body>
<div class="container">
<div class="hex hex-1">
<div class="inner">
<h4>HOME</h4>
<hr />
<p>Home Sweet Home</p>
</div>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex hex-2">
<div class="inner">
<h4>ABOUT US</h4>
<hr />
<p>We Are The Experts</p>
</div>
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex hex-3">
<div class="inner">
<h4>CONTACT US</h4>
<hr />
<p>We Open Everyday</p>
</div>
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex"
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex"
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex"
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex"
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex"
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex"
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex"
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex"
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
</div>
<!--build:js js/foot.min.js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Susy (v2.2.2)
// ----
@import "susy";
$hex-width:200px;
$hex-height-width-ratio: 86 / 150;
$hex-vertical-margin-width-ratio: 1 / 6;
$hex-rotation: 60deg;
$hex-rotated-item-size: 173 / 150;
$hex-gap-ratio: 81 / 150;
$susy: (columns: 6, math: static, column-width: $hex-width, gutters: 0.03333, gutter-position: split, global-box-sizing: border-box);
@include border-box-sizing;
$c1-translate: -$hex-height-width-ratio * span(1), 0;
$c2-translate: -48 / 150 * span(1), -11 / 150 * span(1);
.container {
@include container;
margin-top: 50px;
}
/* HEXAGON STARTS HERE */
.hex {
float: left;
position: relative;
width: span(1);
height: span(1) * $hex-height-width-ratio;
margin: (span(1) * $hex-vertical-margin-width-ratio) gutter();
background-color: #ccc;
background-repeat: no-repeat;
background-position: 50% 50%;
text-align: center;
}
// Hex Gap
$num-hex-items: susy-get(columns);
$nth: susy-get(columns) * 2;
@debug $nth;
.hex:first-child,
.hex:nth-child(#{$nth}n) {
margin-left: $hex-gap-ratio * span(1);
}
.hex a {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.hex .corner-1,
.hex .corner-2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: inherit;
overflow: hidden;
z-index: -1;
backface-visibility: hidden;
}
.hex .corner-1 {
transform: rotate($hex-rotation);
}
.hex .corner-2 {
transform: rotate(-#{$hex-rotation});
}
.hex .corner-1:before,
.hex .corner-2:before {
width: $hex-rotated-item-size * span(1);
height: $hex-rotated-item-size * span(1);
content: '';
position: absolute;
background-color: inherit;
top: 0;
left: 0;
z-index: 1;
background-repeat: no-repeat;
backface-visibility: hidden;
}
.hex .corner-1:before {
transform: rotate(-#{$hex-rotation}) translate($c1-translate);
transform-origin: 0 0;
}
.hex .corner-2:before {
transform: rotate($hex-rotation) translate($c2-translate);
bottom: 0;
}
Raw
SassMeister-output.css
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 1239.996px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
.container:after {
content: " ";
display: block;
clear: both;
}
/* HEXAGON STARTS HERE */
.hex {
float: left;
position: relative;
width: 200px;
height: 114.66667px;
margin: 33.33333px 3.333px;
background-color: #ccc;
background-repeat: no-repeat;
background-position: 50% 50%;
text-align: center;
}
.hex:first-child,
.hex:nth-child(12n) {
margin-left: 108px;
}
.hex a {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.hex .corner-1,
.hex .corner-2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: inherit;
overflow: hidden;
z-index: -1;
backface-visibility: hidden;
}
.hex .corner-1 {
transform: rotate(60deg);
}
.hex .corner-2 {
transform: rotate(-60deg);
}
.hex .corner-1:before,
.hex .corner-2:before {
width: 230.66667px;
height: 230.66667px;
content: '';
position: absolute;
background-color: inherit;
top: 0;
left: 0;
z-index: 1;
background-repeat: no-repeat;
backface-visibility: hidden;
}
.hex .corner-1:before {
transform: rotate(-60deg) translate(-114.66667px, 0);
transform-origin: 0 0;
}
.hex .corner-2:before {
transform: rotate(60deg) translate(-64px, -14.66667px);
bottom: 0;
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Starter Kit!</title>
<!-- build:css css/styles.min.css -->
<link rel="stylesheet" href="css/styles.css">
<!-- endbuild -->
<!--build:headjs js/head.min.js -->
<!--endbuild -->
</head>
<body>
<div class="container">
<div class="hex hex-1">
<div class="inner">
<h4>HOME</h4>
<hr />
<p>Home Sweet Home</p>
</div>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex hex-2">
<div class="inner">
<h4>ABOUT US</h4>
<hr />
<p>We Are The Experts</p>
</div>
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex hex-3">
<div class="inner">
<h4>CONTACT US</h4>
<hr />
<p>We Open Everyday</p>
</div>
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex"
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex"
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex"
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex"
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex"
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex"
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex"
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex"
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
</div>
<!--build:js js/foot.min.js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment