What the flexbox exercises are now on github

AnthonyDippy · Aug 2, 2015 · 383b2c3 · 383b2c3
commit 383b2c3
Show file tree

Hide file tree

Showing 50 changed files with 2,526 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+.DS_Store
+*.zip
diff --git a/alignment-and-centering/index.html b/alignment-and-centering/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>FlexBox Tutorial</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <div class="container">
+    <div class="box box1">1</div>
+    <div class="box box2">2</div>
+    <div class="box box3">3</div>
+    <div class="box box4">4</div>
+    <div class="box box5">5</div>
+    <div class="box box6">6</div>
+    <div class="box box7">7</div>
+    <div class="box box8">8</div>
+    <div class="box box9">9</div>
+    <div class="box box10">10</div>
+  </div>
+
+</body>
+</html>
diff --git a/alignment-and-centering/style.css b/alignment-and-centering/style.css
@@ -0,0 +1,54 @@
+/* CSS Normalize */
+article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;}pre{white-space:pre-wrap;word-wrap:break-word;}q{quotes:\201C \201D \2018 \2019;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}img{border:0;}svg:not(:root){overflow:hidden;}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,html input[type=button],/* 1 */
+input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}body,figure{margin:0;}legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+
+/* Box-sizing border-box */
+* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+
+
+/* Some default styles to make each box visible */
+.box {
+  color:white;
+  font-size: 100px;
+  text-align: center;
+  text-shadow:4px 4px 0 rgba(0,0,0,0.1);
+  padding:10px;
+}
+
+/* Colours for each box */
+.box1 { background:#1abc9c;}
+.box2 { background:#3498db;}
+.box3 { background:#9b59b6;}
+.box4 { background:#34495e;}
+.box5 { background:#f1c40f;}
+.box6 { background:#e67e22;}
+.box7 { background:#e74c3c;}
+.box8 { background:#bdc3c7;}
+.box9 { background:#2ecc71;}
+.box10 { background:#16a085;}
+
+
+/* We start writing out flexbox here. The above is just page setup */
+.container {
+  display:flex;
+  border:10px solid mistyrose;
+  height:100vh;
+  align-items:flex-start;
+}
+
+.box {
+  width:33.333%;
+}
+
+.box2 {
+  padding-bottom: 200px;
+}
+
+.box6 {
+  padding-bottom: 0;
+}
+
+.box9 {
+  padding-bottom: 50px;
+  align-self:stretch;
+}
diff --git a/autoprefixer/build/styles.css b/autoprefixer/build/styles.css
@@ -0,0 +1,33 @@
+.container {
+  display:-webkit-box;
+  display:-webkit-flex;
+  display:-ms-flexbox;
+  display:flex;
+  -webkit-box-orient:vertical;
+  -webkit-box-direction:normal;
+  -webkit-flex-direction:column;
+      -ms-flex-direction:column;
+          flex-direction:column;
+  -webkit-align-content:center;
+      -ms-flex-line-pack:center;
+          align-content:center;
+  -webkit-box-pack:center;
+  -webkit-justify-content:center;
+      -ms-flex-pack:center;
+          justify-content:center;
+}
+
+.box1 {
+  -webkit-box-flex:10;
+  -webkit-flex:10 5 450px;
+      -ms-flex:10 5 450px;
+          flex:10 5 450px;
+}
+
+.box2 {
+  -webkit-box-flex:1;
+  -webkit-flex:1 1 360px;
+      -ms-flex:1 1 360px;
+          flex:1 1 360px;
+}
+
diff --git a/autoprefixer/css/styles.css b/autoprefixer/css/styles.css
@@ -0,0 +1,15 @@
+.container {
+  display:flex;
+  flex-direction:column;
+  align-content:center;
+  justify-content:center;
+}
+
+.box1 {
+  flex:10 5 450px;
+}
+
+.box2 {
+  flex:1 1 360px;
+}
+
diff --git a/autoprefixer/gulpfile.js b/autoprefixer/gulpfile.js
@@ -0,0 +1,14 @@
+var gulp = require('gulp');
+var autoprefixer = require('gulp-autoprefixer');
+
+
+gulp.task('styles',function() {
+  gulp.src('css/styles.css')
+    .pipe(autoprefixer())
+    .pipe(gulp.dest('build'))
+});
+
+
+gulp.task('watch',function() {
+  gulp.watch('css/styles.css', ['styles']);
+});
diff --git a/autoprefixer/index.html b/autoprefixer/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>AutoPrefixer Example</title>
+  <link rel="stylesheet" href="build/styles.css">
+</head>
+<body>
+
+</body>
+</html>
diff --git a/autoprefixer/package.json b/autoprefixer/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "autoprefixer",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "gulp": "^3.9.0",
+    "gulp-autoprefixer": "^2.3.1"
+  }
+}
diff --git a/equal-height-elements/index.html b/equal-height-elements/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>FlexBox Nav</title>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <div class="elements">
+
+    <div class="item">You can tell the world you never was my girl</div>
+    <div class="item">You can burn my clothes when I'm gone</div>
+    <div class="item large">Or you can tell your friends just what a fool I've been</div>
+    <div class="item">And </div>
+
+    <div class="item">You </div>
+    <div class="item small">You </div>
+    <div class="item">Or you can tell my lips to tell my fingertips</div>
+    <div class="item small">They won't be reaching out for you no more</div>
+
+    <div class="item large">But don't tell my heart my achy breaky heart</div>
+    <div class="item">I just don't think he'd understand</div>
+    <div class="item small">And if you tell my heart</div>
+    <div class="item large">my achy breaky heart</div>
+    <div class="item">He might blow up and kill this man</div>
+
+    <div class="item">[guitar]</div>
+
+    <div class="item">You can tell your ma I moved to Arkansas</div>
+    <div class="item large">You can tell your dog to bite my leg</div>
+    <div class="item">Or tell your brother Cliff whose fist can can tell my lip</div>
+    <div class="item small">He never really liked me anyway</div>
+
+    <div class="item">Or tell your Aunt Louise tell anything you please</div>
+    <div class="item">Myself already knows I'm not okay</div>
+    <div class="item large">Or you can tell my eyes to watch out for my mind</div>
+    <div class="item">It might be walking out on me today</div>
+
+    <div class="item">Don't tell my heart my achy breaky heart...</div>
+
+    <div class="item">[guitar]</div>
+
+    <div class="item">Don't tell my heart my achy breaky heart...</div>
+    <div class="item">Don't tell my heart my achy breaky heart...</div>
+
+  </div>
+
+</body>
+</html>
diff --git a/equal-height-elements/style-ANSWER.css b/equal-height-elements/style-ANSWER.css
@@ -0,0 +1,36 @@
+/* Some CSS Setup - nothing to do with flexbox */
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 0;
+  background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
+}
+
+a {
+  color:white;
+}
+
+.item.large {
+  font-size: 40px;
+}
+
+.item.small {
+  font-size: 20px;
+}
+
+.item {
+  background:rgba(255,255,255,0.2);
+  margin:10px;
+  padding:20px;
+  font-size: 30px;
+}
+
+/* Flexbox Starts Here: */
+
diff --git a/equal-height-elements/style-START.css b/equal-height-elements/style-START.css
@@ -0,0 +1,36 @@
+/* Some CSS Setup - nothing to do with flexbox */
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 0;
+  background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
+}
+
+a {
+  color:white;
+}
+
+.item.large {
+  font-size: 40px;
+}
+
+.item.small {
+  font-size: 20px;
+}
+
+.item {
+  background:rgba(255,255,255,0.2);
+  margin:10px;
+  padding:20px;
+  font-size: 30px;
+}
+
+/* Flexbox Starts Here: */
+
diff --git a/equal-height-elements/style.css b/equal-height-elements/style.css
@@ -0,0 +1,43 @@
+/* Some CSS Setup - nothing to do with flexbox */
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 0;
+  background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
+}
+
+a {
+  color:white;
+}
+
+.item.large {
+  font-size: 40px;
+}
+
+.item.small {
+  font-size: 20px;
+}
+
+.item {
+  background:rgba(255,255,255,0.2);
+  margin:10px;
+  padding:20px;
+  font-size: 30px;
+}
+
+/* Flexbox Starts Here: */
+.elements {
+  display:flex;
+  flex-wrap:wrap;
+}
+
+.item {
+  flex: 1 1 calc(33.33% - 20px);
+}
diff --git a/flex-direction/index.html b/flex-direction/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>FlexBox Tutorial</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <div class="container">
+    <div class="box box1">1</div>
+    <div class="box box2">2</div>
+    <div class="box box3">3</div>
+    <div class="box box4">4</div>
+    <div class="box box5">5</div>
+    <div class="box box6">6</div>
+    <div class="box box7">7</div>
+    <div class="box box8">8</div>
+    <div class="box box9">9</div>
+    <div class="box box10">10</div>
+  </div>
+
+</body>
+</html>