Topic 3 - HTML5 APIs

03-HTML5-APIs/.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

03-HTML5-APIs/css/grid.css

@@ -0,0 +1,144 @@
+/*________________________________________________________________________________________________
+Borders and padding are drawn inside the set width of your content. The margin is drawn outside.*/
+
+*,
+*:before,
+*:after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+/*________________________________________________________________________________________________
+Grid Layout.*/
+
+@media (min-width: 600px) {
+    main {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+    }
+
+
+    .col-1-row-1 {
+        grid-column: span 1;
+        grid-row: span 1;
+    }
+
+    .col-2-row-1 {
+        grid-column: span 2;
+        grid-row: span 1;
+    }
+
+    .col-3-row-1 {
+        grid-column: span 3;
+        grid-row: span 1;
+    }
+
+    .col-4-row-1 {
+        grid-column: span 4;
+        grid-row: span 1;
+    }
+
+    .col-5-row-1 {
+        grid-column: span 5;
+        grid-row: span 1;
+    }
+
+    .col-6-row-1 {
+        grid-column: span 6;
+        grid-row: span 1;
+    }
+
+    .col-1-row-1 {
+        grid-column: span 1;
+        grid-row: span 1;
+    }
+
+    .col-2-row-2 {
+        grid-column: span 2;
+        grid-row: span 2;
+    }
+
+    .col-3-row-2 {
+        grid-column: span 3;
+        grid-row: span 2;
+    }
+
+    .col-4-row-2 {
+        grid-column: span 4;
+        grid-row: span 2;
+    }
+
+    .col-5-row-2 {
+        grid-column: span 5;
+        grid-row: span 2;
+    }
+
+    .col-6-row-2 {
+        grid-column: span 6;
+        grid-row: span 2;
+    }
+
+    .col-1-row-3 {
+        grid-column: span 1;
+        grid-row: span 3;
+    }
+
+    .col-2-row-3 {
+        grid-column: span 2;
+        grid-row: span 3;
+    }
+
+    .col-3-row-3 {
+        grid-column: span 3;
+        grid-row: span 3;
+    }
+
+    .col-4-row-3 {
+        grid-column: span 4;
+        grid-row: span 3;
+    }
+
+    .col-5-row-3 {
+        grid-column: span 5;
+        grid-row: span 3;
+    }
+
+    .col-6-row-3 {
+        grid-column: span 6;
+        grid-row: span 3;
+    }
+
+    .col-1-row-4 {
+        grid-column: span 1;
+        grid-row: span 4;
+    }
+
+    .col-2-row-4 {
+        grid-column: span 2;
+        grid-row: span 4;
+    }
+
+    .col-3-row-4 {
+        grid-column: span 3;
+        grid-row: span 4;
+    }
+
+    .col-4-row-4 {
+        grid-column: span 4;
+        grid-row: span 4;
+    }
+
+    .col-5-row-4 {
+        grid-column: span 5;
+        grid-row: span 4;
+    }
+
+    .col-6-row-4 {
+        grid-column: span 6;
+        grid-row: span 4;
+    }
+
+}
+
+/*________________________________________________________________________________________________*/