Egghead Lesson: Layouts with Flex Mixin START

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Cool Website by McCool</h1>
    <h2>The most important form you will ever fill out</h2>
 
  
  <form>
    <div class="input-wrapper">
      <label for="name">Your Name</label>
      <input type="text" id="name">
    </div>
    <div class="input-wrapper">
      <label for="age">How many moons</label>
      <input type="text" id="age">
    </div>
    <div class="side-by-side">
      <div class="input-wrapper">
        <label for="jellybean">Favorite Jellybean</label>
        <select id="jellybean">
          <option value="cream soda">A&amp;W Cream Soda</option>
          <option value="root beer">A&amp;W Root Beer</option>
          <option value="berry">Berry Blue</option>
          <option value="blueberry">Blueberry</option>
          <option value="gum">Bubble Gum</option>
          <option value="popcorn">Buttered Popcorn</option>
          <option value="cantaloupe">Cantaloupe</option>
        </select>
      </div>
      
      <div class="input-wrapper">
        <label for="color">Favorite Color</label>
        <select id="color">
          <option value="grey">#CCCCCC</option>
          <option value="gray">#DDDDDD</option>
          <option value="offwhite">#FBFBFF</option>
          <option value="rebeccapurple">#663399</option>
        </select>
      </div>
    </div>
    <input type="submit" value="Submit"/>
  </form>

  </body>

</html>

// Code goes here

/* Le Styles */
/*  */
/*  */

@mixin flex-container($direction: row, $spacing: space-between, $alignment: null) {
  display: flex;
  flex-direction: $direction;
  justify-content: $spacing;
  align-items: $alignment;
}

.input-wrapper {
  @include flex-container($direction: column, $spacing: space-around);
}

.side-by-side {
  @include flex-container();
}

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Le Styles */
/*  */
/*  */
body {
  text-rendering: optimizeLegibility !important;
  font-family: "Avenir Next", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
}

h1 {
  font-size: 32px;
  line-height: 32px;
  margin: 0 auto;
}

h2 {
  font-size: 26px;
  line-height: 26px;
}

form {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 14px;
  margin: 20px auto;
  width: 400px;
  
  div {
    margin-bottom: 10px;
  }
}
input {
  width: 100%;
  color: #5d5d5d;
  border-radius: 4px;
  box-shadow: none;
  font-size: 16px;
  padding: 2px 5px;
  box-sizing: border-box;
}

input[type="submit"] {
  box-shadow: inset 0 -1px 0 0 rgba(0,0,0,.2);
  outline: none;
  border: none;
  color: #FFF;
  background-color: #663399;
  text-align: center;
  padding: 10px 15px;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    background-color: #552288;
  }
}

.side-by-side .input-wrapper {
  width: calc(50% - 5px);
}

label {
  font-size: 12px;
  line-height: 12px;
  font-weight: 700;
  color: #464648;
  margin-bottom: 2px;
}