fill out flex examples and add spacing css

Author: gelder-ux

css/css-utilities.css

@@ -8,19 +8,203 @@
   justify-content: space-around; }
 
 .justify-content-start {
-  justify-content: start; }
+  justify-content: flex-start; }
 
 .justify-content-end {
-  justify-content: end; }
+  justify-content: flex-end; }
 
 .align-items-center {
   align-items: center; }
 
 .align-items-start {
-  align-items: start; }
+  align-items: flex-start; }
 
 .align-items-end {
-  align-items: end; }
+  align-items: flex-end; }
 
 .align-items-stretch {
   align-items: stretch; }
+
+.padding-half {
+  padding: 0.5rem; }
+
+.padding-1 {
+  padding: 1rem; }
+
+.padding-2 {
+  padding: 2rem; }
+
+.padding-3 {
+  padding: 3rem; }
+
+.padding-top-half {
+  padding-top: 0.5rem; }
+
+.padding-top-1 {
+  padding-top: 1rem; }
+
+.padding-top-2 {
+  padding-top: 2rem; }
+
+.padding-top-3 {
+  padding-top: 3rem; }
+
+.padding-right-half {
+  padding-right: 0.5rem; }
+
+.padding-right-1 {
+  padding-right: 1rem; }
+
+.padding-right-2 {
+  padding-right: 2rem; }
+
+.padding-right-3 {
+  padding-right: 3rem; }
+
+.padding-bottom-half {
+  padding-bottom: 0.5rem; }
+
+.padding-bottom-1 {
+  padding-bottom: 1rem; }
+
+.padding-bottom-2 {
+  padding-bottom: 2rem; }
+
+.padding-bottom-3 {
+  padding-bottom: 3rem; }
+
+.padding-left-half {
+  padding-left: 0.5rem; }
+
+.padding-left-1 {
+  padding-left: 1rem; }
+
+.padding-left-2 {
+  padding-left: 2rem; }
+
+.padding-left-3 {
+  padding-left: 3rem; }
+
+.padding-x-half {
+  padding-right: 0.5rem;
+  padding-left: 0.5rem; }
+
+.padding-x-1 {
+  padding-right: 1rem;
+  padding-left: 1rem; }
+
+.padding-x-2 {
+  padding-right: 2rem;
+  padding-left: 2rem; }
+
+.padding-x-3 {
+  padding-right: 3rem;
+  padding-left: 3rem; }
+
+.padding-y-half {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem; }
+
+.padding-y-1 {
+  padding-top: 1rem;
+  padding-bottom: 1rem; }
+
+.padding-y-2 {
+  padding-top: 2rem;
+  padding-bottom: 2rem; }
+
+.padding-y-3 {
+  padding-top: 3rem;
+  padding-bottom: 3rem; }
+
+.margin-half {
+  margin: 0.5rem; }
+
+.margin-1 {
+  margin: 1rem; }
+
+.margin-2 {
+  margin: 2rem; }
+
+.margin-3 {
+  margin: 3rem; }
+
+.margin-top-half {
+  margin-top: 0.5rem; }
+
+.margin-top-1 {
+  margin-top: 1rem; }
+
+.margin-top-2 {
+  margin-top: 2rem; }
+
+.margin-top-3 {
+  margin-top: 3rem; }
+
+.margin-right-half {
+  margin-right: 0.5rem; }
+
+.margin-right-1 {
+  margin-right: 1rem; }
+
+.margin-right-2 {
+  margin-right: 2rem; }
+
+.margin-right-3 {
+  margin-right: 3rem; }
+
+.margin-bottom-half {
+  margin-bottom: 0.5rem; }
+
+.margin-bottom-1 {
+  margin-bottom: 1rem; }
+
+.margin-bottom-2 {
+  margin-bottom: 2rem; }
+
+.margin-bottom-3 {
+  margin-bottom: 3rem; }
+
+.margin-left-half {
+  margin-left: 0.5rem; }
+
+.margin-left-1 {
+  margin-left: 1rem; }
+
+.margin-left-2 {
+  margin-left: 2rem; }
+
+.margin-left-3 {
+  margin-left: 3rem; }
+
+.margin-x-half {
+  margin-right: 0.5rem;
+  margin-left: 0.5rem; }
+
+.margin-x-1 {
+  margin-right: 1rem;
+  margin-left: 1rem; }
+
+.margin-x-2 {
+  margin-right: 2rem;
+  margin-left: 2rem; }
+
+.margin-x-3 {
+  margin-right: 3rem;
+  margin-left: 3rem; }
+
+.margin-y-half {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem; }
+
+.margin-y-1 {
+  margin-top: 1rem;
+  margin-bottom: 1rem; }
+
+.margin-y-2 {
+  margin-top: 2rem;
+  margin-bottom: 2rem; }
+
+.margin-y-3 {
+  margin-top: 3rem;
+  margin-bottom: 3rem; }

css/reset.css

@@ -0,0 +1,48 @@
+/* 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;
+}

css/typography.css

@@ -0,0 +1,26 @@
+h1 {
+	font-weight: bold;
+	font-size: 2rem;
+}
+
+h2 {
+	font-weight: bold;
+	font-size: 1.8rem;
+}
+
+h3 {
+	font-size: 1.5rem;
+}
+
+h4 {
+	font-size: 1.02rem;
+}
+
+h5 {
+	font-size: 1.01rem;
+}
+
+h6 { 
+	font-weight: bold; 
+	font-size: 1rem;
+}