<div class="grid">
	
		<header class="grid-item flex-container">

	<div class="flex-item logo-container">
		<h1 class="logo">FLEX-<strong>HEADER</strong></h1>
	</div>
	
	<div class="flex-item social">
		
		<div class="social__item">
			<a target="_blank" href="https://twitter.com/matchboxhero10" class="social__icon--twitter"><i class="icon--twitter"></i></a>
	    </div>
		
		<div class="social__item">
            <a target="_blank" href="https://facebook.com" class="social__icon--facebook"><i class="icon--facebook"></i></a>
    </div>
		
		<div class="social__item">
            <a target="_blank" href="https://www.linkedin.com/pub/steven-roberts/7a/707/409" class="social__icon--linkedin"><i class="icon--linkedin"></i></a>
    </div>
		
		<div class="social__item">
            <a target="_blank" href="#" class="social__icon--rss"><i class="icon--rss"></i></a>
    </div>
		
	</div>
	
	<div class="flex-item menu-button">
		<button class="hamburger header__menu-button js-menu-button" type="button">
                <span class="hamburger__box">
                    <span class="hamburger__inner"></span>
                </span>
            </button>
	</div>
	
</header>
	
	<article class="grid-item">
		<h1>CSS Grid - The Holy Grail (of) Layout</h1>
				
		<p>The idea here is to build the holy grail layout in Grid, but obviously it needs to be responsive. Incase you don't know the holy grail layout is a header, a left sidebar, content and right sidebar and then a footer. The code to accomplish this complex layout is pretty short and really easy to follow and understand, the syntax and new properties in Grid are not only simple but somehow elegant.</p>
		
		<p>Just as a bonus, we've also got that much asked for feature of the footer being at the bottom of the viewport when the content isn't long enough to fill it.</p>
		
		<p>As this demo is built using CSS Grid you may need to turn on the appropriate browser flag, until around March 2017 when most modern broswers will support it, yey! :)</p>
		
		<h2>Chrome</h2>
		<p><a href="chrome://flags/#enable-experimental-web-platform-features">chrome://flags/#enable-experimental-web-platform-features</a><br>
		Enable experimental Web Platform features
		</p>
		
		<h2>Firefox</h2>
		<p><a href="about:config">about:config</a><br>
		Enable layout.css.grid.enabled
		</p>
		
		
	</article>
	
	<aside class="grid-item left">
		Aside Left
	</aside>	
	
	<aside class="grid-item right">
		Aside Right
	</aside>
	
	<footer class="grid-item">
		Built with &hearts;
	</footer>
	
</div>

//
// Define Grid Areas
//

header {
	grid-area: header;
}

.left {
	grid-area: left-sidebar;
}

.right {
	grid-area: right-sidebar;
}

article {
	grid-area: article;
}

footer {
	grid-area: footer;
}

// Apply Grid display and define template areas 

.grid {
	display: grid;
	min-height: 100vh;
	height: 100vh; // Needed for chrome
	grid-template-areas:
		"header"
		"article"
		"left-sidebar"
		"right-sidebar"
		"footer"
	;
	grid-template-columns: 1fr;
		
	@media (min-width: 540px) {
		grid-template-areas:
			"header header"
			"left-sidebar article"
			"right-sidebar right-sidebar"
			"footer footer";
		grid-template-columns: 1fr 2fr;
	}
	
	@media (min-width: 1200px) {
		grid-template-areas:
			"header header header"
			"left-sidebar article right-sidebar"
			"footer footer footer"
		;
		grid-template-columns: 1fr 3fr 1fr;
		grid-template-rows: 
			minmax(min-content, max-content) 
			auto 
			minmax(min-content, max-content)
		;
	}

}

.grid-item {
	padding: 24px;
}

/////
//
// FLEXBOX CODE FROM THE PREVIOUS TUTORIAL
//
/////

.flex-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
	text-align: center;	
	padding: 0;
	
	@media (min-width:540px) {
		flex-direction: row;
		text-align: left;
	}
}

.flex-item {
	flex: 1 0 auto;
	width: 100%;
	padding: 12px;
	
	@media (min-width:540px) {
		width: auto;
		
		&:nth-child(1) {
			order: 2;
			text-align: center;
		}
		
		&:nth-child(2) {
			order: 3;
		}
		
		&:nth-child(2),
		&:nth-child(3) {
			flex: 0 0 auto;
		}
		
	}
		
}





/////
//
// General Styling Starts
//
/////

// Set variables for padding and spacing
$base-spacing-unit: 24px;
$half-spacing-unit: $base-spacing-unit / 2;

*, *:before, *:after {
  box-sizing: border-box;
}

.body {
	font-family: 'Dosis', sans-serif;
}

// Import icon font, I've used Entypo (http://entypo.com/)
@import url(http://weloveiconfonts.com/api/?family=entypo);

// General Styling to make it look okay

@import url('https://fonts.googleapis.com/css?family=Sansita:400,700|Ubuntu:400,700');

body {
	font-family: "Ubuntu", sans-serif;
	line-height: 1.6;
	color: #333;
}

h1 {
	margin-top: 0;
}

h2 {
	font-size: 1.2em;
	margin-bottom: $half-spacing-unit / 2;
}

* + h2 {
	margin-top: $base-spacing-unit;
}

h2 + p {
	margin-top: 0;
}

article p:first-of-type {
	font-size: 1.1em;
}

header {
	background-color: #1D1F20;
	color: white;
}

.left {
	background-color: #828282;
	color: white;
}

.right {
	background-color: #B5B5B5;
}

article {
	background-color: #E3E3E3;
}

footer {
	background-color: #1D1F20;
	color: white;
}

.logo {
	font-weight:400;
	font-size: 1.8em;
	margin: 0;
}

// Hamburger icon

.hamburger {
    padding: $half-spacing-unit;
    display: inline-block;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    margin: 0;
	
    &__box {
        width: $base-spacing-unit * 1.75;
        height: $base-spacing-unit;
        display: inline-block;
        position: relative;
    }

    &__inner {
        display: block;
        top: 50%;
    }

    &__inner,
    &__inner:before,
    &__inner:after {
        width: $base-spacing-unit * 1.75;
        height: 4px;
        background-color: white;
        border-radius: 4px;
        position: absolute;
        transition-property: transform;
        transition-duration: 0.15s;
        transition-timing-function: ease;
    }

    &__inner:before,&__inner:after {
        content: "";
        display: block;
    }

    &__inner:before {
        top: -($half-spacing-unit);
    }

    &__inner:after {
        bottom: -($half-spacing-unit);
    }

}

// List of icon unicode symbols from the icon font
// and background colours for the icons
$icon-list: (
    twitter "\F309" #32b9e7,
    facebook "\F30C" #4b70ab,
    linkedin "\F318" #0087be,
    instagram "\F32D" #6291b2,
    rss "\E73A" #FB7629,
);

// Each loop for creating the icon CSS
@each $icon, $unicode, $icon-background in $icon-list {
  
    .icon--#{$icon} {
        &::before {
            content: $unicode;
        }
    }

    .social__icon--#{$icon} {
      background-color: $icon-background;
      
        &:hover {
          // Swap black for white to make the icons lighter on hover
          background-color: mix(black, $icon-background, 15%);
        }
      
    }

}

// Basic icon style
.icon {
	font-family: 'entypo';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	// Better Font Rendering
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

// Extend icon to all other icons
[class^="icon--"] {
	@extend .icon;
}

// Display icons next to each other
.social__item {
    display: inline-block;
    margin-right: $half-spacing-unit / 4;
}

// Icon background
.social__icon {
	font-size: 1.4em;
	color: white;
	text-decoration: none;
	border-radius:100%;
	width: $base-spacing-unit * 2;
	height: $base-spacing-unit * 2;
	text-align: center;

	// Vertical Centering
	display: flex;
	align-items: center;
	justify-content: center;
}

// Extend social__icon to all other icons
[class^="social__icon"] {
	@extend .social__icon;
}