updated css to split to demo and use CSS grid for layout

Author: profstein

css/demo-style.css

@@ -0,0 +1,184 @@
+/*
+==========================
+General Styles
+==========================
+These are the styles that will apply to the page first. It includes things like basic fonts, font-size, link styling, list, base nvigation styling and so on. I'm not including most of that here but instead a couple of things that will help in most responsive designs (there is no "always" rule).
+*/
+
+/* Border Box
+This is used to help you be able to set the widths of things once and then come and fiddle with borders and padding later without having to recalculate and change the width (something you have to do with the standard, default setting).
+*/
+* {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    -icab-box-sizing: border-box;
+    -khtml-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+
+/* Responsive Media
+These settings allow media elements (img, video) to change size as their containing element changes size (which is part of a fluid grid and you want to happen).
+*/
+img,
+video {
+    width: auto;
+    max-width: 100%;
+    height: auto;
+}
+
+/* Video Embed (youtube or vimeo etc)*/
+.videoWrapper {
+    position: relative;
+    padding-top: 25px;
+    height: 0;
+    clear: both;
+    outline: 1px solid red;
+}
+
+.videoWrapper.ratio-16-9 {
+    padding-bottom: 56.25%;
+    /* 16:9 */
+}
+
+.videoWrapper.ratio-4-3 {
+    padding-bottom: 75%;
+    /* 4:3 */
+}
+
+.videoWrapper iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+
+/* Specific tyles for this design
+These are just some specific styles I set to make the boxes look nice. You can ignore for your own designs. Setting the body font-size is important though as it sets the tone for all of the ems you wil use.
+*/
+
+/* ==== Base page styles, apply to all browsers ==== */
+body {
+    font-size: 100%;
+    line-height: 1.5;
+    font-family: sans-serif;
+    padding: 0 20px;
+}
+
+p {
+    margin-bottom: 1em;
+}
+
+.feature {
+    border: 1px solid #555;
+    padding: 0.625em;
+    /* 10/16 */
+}
+
+.feature p:first-letter {
+    float: left;
+    font-size: 300%;
+    margin: 0 5px 0 0;
+    line-height: 1;
+}
+
+.boxes {
+    margin: 60px 0;
+}
+
+.box {
+    border: 1px solid #999;
+    /*  margin-bottom:1em;*/
+    padding: .5em;
+    height: 4em;
+    line-height: 3em;
+    text-align: center;
+    background-color: #fafafa;
+}
+
+footer {
+    border-top: 3px solid #999;
+}
+
+
+/* ==============================
+    Media Queries
+   ==============================
+  This is the media queries that make the site change at different screen widths.
+*/
+
+/* Your layout code goes here
+Here is a good place to put the code you have for your default layout. By default layout I mean the one that people see if there are no media queries. If you are doing mobile-first design this is where you would style the mobile look. If not then you can just do whatever it is you normally do for a site.
+*/
+
+@supports (grid-area: auto) {
+    .features {
+        display: grid;
+        grid-gap: 20px;
+        grid-template-columns: 1fr;
+    }
+
+    .boxes {
+        display: grid;
+        grid-gap: 20px;
+        grid-template-columns: 1fr 1fr;
+    }
+
+    @media (min-width: 600px) {
+
+        /* this applies to mobile in landscape and some tablets in portrait */
+        .boxes {
+            grid-template-columns: 1fr 1fr 1fr;
+        }
+    }
+
+    /*   end min-width 600 */
+
+
+
+    @media (min-width: 900px) {
+
+        /* this applies to tablets */
+        .features {
+            grid-template-columns: 1fr 1fr 1fr;
+        }
+
+        .boxes {
+            grid-template-columns: 1fr 1fr 1fr 1fr;
+        }
+
+    }
+
+    /*   end min-width 900 */
+
+
+
+    @media (min-width: 1200px) {
+
+        /* this applies average laptops */
+        .boxes {
+            grid-template-columns: repeat(6, 1fr);
+        }
+
+    }
+
+    /*   end min-width 1200 */
+
+
+
+    @media (min-width: 1800px) {
+
+        /* this applies to large laptops and desktops */
+        .boxes {
+            grid-template-columns: repeat(12, 1fr);
+        }
+
+    }
+
+}
+
+/* end @supports grid */