Scott Soderstrom soderalohastrom

## load_css_script
<html>
<head>
  <meta charset="utf-8">
  <title>Load CSS via Script</title>
  <script>
    var ss = document.createElement( "link" );
    var ref = document.getElementsByTagName( "script" )[ 0 ];
    ss.rel = "stylesheet";
    ss.href = "foo.css";
    // temporary non-applicable media query to load it async

## Good-Index-template
<!DOCTYPE html>
<!--
Wirefy by Chris Da Sie
Version: 3.0.3
URL: https://getwirefy.com
MIT License
-->

<!-- HTML5 Boilerplate -->
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->

## Front-End-Guidelines
#Front-end developer guidelines

##About this project
This project introduces a comprehensive new style guide and CSS architecture that front-end devs should **use in all projects going forwards**.

The style guide section currently only covers CSS, and will be extended to include HTML and JavaScript in the future. This project will soon be set up in such a way that it can be downloaded and used to kick-start new projects.

This process is intended to be easy to modify, scale, evolve, and adapt, so your thoughts, concerns, and recommendations are appreciated (and requested). I don't want anyone to feel forced to use this, but it should be immediately apparent that it is a great way to work.

I'm sure you'll agree that we're in need of a bit of consistency regarding front-end code quality and project setup, especially since we are truly global now. Ideally we want to move away from frameworks such as Bootstrap and Foundation; they may be great for prototyping, but I find they interfere too much, and bloat a fu

## multi-columns
@media all and (min-width: 900px) {
   #example p  {
  -webkit-column-count: 3;
  -webkit-column-gap: 1%; /* Saf3, Chrome*/
  -moz-column-count: 3;
  -moz-column-gap: 1%; /* FF3.5+ */
  column-count: 3;
  column-gap: 1%; /* Opera 11+*/
  }
}

## Responsive_background_img
/* Responsive Background-Images */

/* A neat trick to make it possible for background-images to ‘fluidly’ resize keeping the same aspect ratio and without leaving space below or chopping off the image. The smart move is to set the height to 0 and work out the height depending on the aspect ratio of the image itself and use padding-bottom to reveal the image instead.*/

.background {
    display: block;
    height: 0;
    padding-bottom: 80%;
    background: url(images/image.jpg) no-repeat;
    background-size: 100%;

## Full_Background_Img
html {
    background: url(bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

## Auto-line-break
-moz-hyphens:auto;
-ms-hyphens:auto;
-webkit-hyphens:auto;
hyphens:auto;
word-wrap:break-word;

## Overflow_hidden
/*
Applying overflow: hidden allows you to clear the float from the previous element and keep the content running within the containers as the containers resize to fit a new screen environment. This trick is extremely useful for one of the common problems we face when coding with float based layouts, when the wrapper container doesn’t expand to the height of the child floating elements.

But overflow: hidden can also be very useful for images in your responsive web design. You can set a maximum height and crop the image. Put your image in a container and set the width of your image to 100%. Then set the max-height of the container to 450px and hide the overlap by setting the overflow to hidden.
*/

.image-wrap {
    max-height: 450px;
    overflow: hidden;
    max-width: 800px;

## Flexible_images_media
img {
  max-width: 100%;
  height: auto;
}

## Headstart_Gulpfile
'use strict';

var
	path 				= require('path'),
	globule				= require('globule'),
	http				= require ('http'),
	fs 					= require('fs'),
	ncp 				= require('ncp').ncp,
	chalk 				= require('chalk'),
	_ 					= require('lodash'),
	<html>
	<head>
	<meta charset="utf-8">
	<title>Load CSS via Script</title>
	<script>
	var ss = document.createElement( "link" );
	var ref = document.getElementsByTagName( "script" )[ 0 ];
	ss.rel = "stylesheet";
	ss.href = "foo.css";
	// temporary non-applicable media query to load it async
	<!DOCTYPE html>
	<!--
	Wirefy by Chris Da Sie
	Version: 3.0.3
	URL: https://getwirefy.com
	MIT License
	-->

	<!-- HTML5 Boilerplate -->
	<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
	#Front-end developer guidelines

	##About this project
	This project introduces a comprehensive new style guide and CSS architecture that front-end devs should use in all projects going forwards.

	The style guide section currently only covers CSS, and will be extended to include HTML and JavaScript in the future. This project will soon be set up in such a way that it can be downloaded and used to kick-start new projects.

	This process is intended to be easy to modify, scale, evolve, and adapt, so your thoughts, concerns, and recommendations are appreciated (and requested). I don't want anyone to feel forced to use this, but it should be immediately apparent that it is a great way to work.

	I'm sure you'll agree that we're in need of a bit of consistency regarding front-end code quality and project setup, especially since we are truly global now. Ideally we want to move away from frameworks such as Bootstrap and Foundation; they may be great for prototyping, but I find they interfere too much, and bloat a fu
	@media all and (min-width: 900px) {
	#example p {
	-webkit-column-count: 3;
	-webkit-column-gap: 1%; /* Saf3, Chrome*/
	-moz-column-count: 3;
	-moz-column-gap: 1%; /* FF3.5+ */
	column-count: 3;
	column-gap: 1%; /* Opera 11+*/
	}
	}
	/* Responsive Background-Images */

	/* A neat trick to make it possible for background-images to ‘fluidly’ resize keeping the same aspect ratio and without leaving space below or chopping off the image. The smart move is to set the height to 0 and work out the height depending on the aspect ratio of the image itself and use padding-bottom to reveal the image instead.*/

	.background {
	display: block;
	height: 0;
	padding-bottom: 80%;
	background: url(images/image.jpg) no-repeat;
	background-size: 100%;
	html {
	background: url(bg.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}
	-moz-hyphens:auto;
	-ms-hyphens:auto;
	-webkit-hyphens:auto;
	hyphens:auto;
	word-wrap:break-word;
	/*
	Applying overflow: hidden allows you to clear the float from the previous element and keep the content running within the containers as the containers resize to fit a new screen environment. This trick is extremely useful for one of the common problems we face when coding with float based layouts, when the wrapper container doesn’t expand to the height of the child floating elements.

	But overflow: hidden can also be very useful for images in your responsive web design. You can set a maximum height and crop the image. Put your image in a container and set the width of your image to 100%. Then set the max-height of the container to 450px and hide the overlap by setting the overflow to hidden.
	*/

	.image-wrap {
	max-height: 450px;
	overflow: hidden;
	max-width: 800px;
	'use strict';

	var
	path = require('path'),
	globule = require('globule'),
	http = require ('http'),
	fs = require('fs'),
	ncp = require('ncp').ncp,
	chalk = require('chalk'),
	_ = require('lodash'),