Added grid examples

samdutton · Mar 28, 2018 · 48e8f25 · 48e8f25
1 parent eab52ac
commit 48e8f25
Show file tree

Hide file tree

Showing 6 changed files with 521 additions and 4 deletions.
diff --git a/grid/css/main.css b/grid/css/main.css
@@ -0,0 +1,13 @@
+section {
+  display: grid;
+  grid-template-columns: 100px auto 100px;
+  grid-gap: 10px 20px;
+}
+
+section div {
+  background-color: #444;
+  color: #fff;
+  border-radius: 5px;
+  padding: 20px;
+  text-align: center;
+}
diff --git a/grid/index.html b/grid/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+
+<!--
+Copyright 2017 Google Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<html lang="en">
+<head>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-33848682-1"></script>
+<script>
+window.dataLayer = window.dataLayer || [];
+function gtag() {
+  window.dataLayer.push(arguments);
+}
+gtag('js', new Date());
+gtag('config', 'UA-33848682-1');
+</script>
+
+<meta charset="utf-8">
+<meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript.">
+<meta name="author" content="//samdutton.com">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
+<meta itemprop="image" content="/images/icons/icon192.png">
+<meta id="theme-color" name="theme-color" content="#fff">
+
+<link rel="icon" href="/images/icons/icon192.jpg">
+
+<base target="_blank">
+
+
+<title>CSS Grid</title>
+
+<link rel="stylesheet" href="../css/main.css">
+<link rel="stylesheet" href="css/main.css">
+
+</head>
+<body>
+<div id="container">
+
+  <h1><a href="../index.html" title="simpl.info home page">simpl.info</a> CSS Grid</h1>
+
+  <section>
+    <div>1</div>
+    <div>2</div>
+    <div>3</div>
+    <div>4</div>
+    <div>5</div>
+    <div>6</div>
+  </section>
+
+<a href="https://github.com/samdutton/simpl/blob/gh-pages/cssgrid" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
+
+</div>
+</body>
+</html>
diff --git a/gridpage/css/main.css b/gridpage/css/main.css
@@ -0,0 +1,28 @@
+footer {
+ grid-column: 1 / -1;
+}
+/* span columns 1 to last inclusive */
+header {
+ grid-column: 1 / -1;
+}
+
+h2 {
+  color: white;
+  font-size: 20px;
+}
+
+p {
+  color: white;
+}
+
+section {
+  display: grid;
+  grid-gap: 10px 20px;
+  grid-template-columns: 1fr 3fr;
+}
+
+section > *  {
+ background-color: #444;
+ color: white;
+ padding: 20px;
+}
diff --git a/gridpage/index.html b/gridpage/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+
+<!--
+Copyright 2017 Google Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<html lang="en">
+<head>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-33848682-1"></script>
+<script>
+window.dataLayer = window.dataLayer || [];
+function gtag() {
+  window.dataLayer.push(arguments);
+}
+gtag('js', new Date());
+gtag('config', 'UA-33848682-1');
+</script>
+
+<meta charset="utf-8">
+<meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript.">
+<meta name="author" content="//samdutton.com">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
+<meta itemprop="image" content="/images/icons/icon192.png">
+<meta id="theme-color" name="theme-color" content="#fff">
+
+<link rel="icon" href="/images/icons/icon192.jpg">
+
+<base target="_blank">
+
+
+<title>CSS Grid: </title>
+
+<link rel="stylesheet" href="../css/main.css">
+<link rel="stylesheet" href="css/main.css">
+
+</head>
+<body>
+<div id="container">
+
+  <h1><a href="../index.html" title="simpl.info home page">simpl.info</a> CSS Grid page layout</h1>
+
+  <section>
+    <header>Header spanning two columns</header>
+    <aside>aside</aside>
+    <article>
+      <h2>h2</h2>
+      <p>Paragraph in article.</p>
+      <p>Another paragraph.</p>
+    </article>
+    <footer>Footer spanning two columns</footer>
+  </section>
+
+<a href="https://github.com/samdutton/simpl/blob/gh-pages/cssgridpage" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
+
+</div>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -174,15 +174,15 @@
 <body>
 
   <div id="container">
-
+x`cx`zcx`cx`zc
     <!--     <div id="highlight">
         <p>Subscribe to my free newsletter for audio, video and realtime.</p>
         <p>Sign up: <a href="http://bit.ly/signupmedia" title="Newsletter sign-up">bit.ly/signupmedia</a>.</p>
         <p>Archive: <a href="http://medianews.me" title="Newsletter archive">medianews.me</a>.</p>
       </div> -->
 
     <div id="highlight">
-      <p>New article: <a href="https://medium.com/dev-channel/how-to-add-full-text-search-to-your-website-4e9c80ce2bf4">How to add search to your website</a></p>
+      <p>New(ish) article: <a href="https://medium.com/dev-channel/how-to-add-full-text-search-to-your-website-4e9c80ce2bf4">How to add search to your website</a></p>
     </div>
 
     <h1>simpl.info</h1>
@@ -218,8 +218,10 @@ <h1>simpl.info</h1>
       <a href="canvas" title="Canvas element example">&lt;canvas&gt;</a>
       <a href="cors" title="CORS demo, using XMLHttpRequest">CORS with XHR</a>
       <a href="cssfilters" title="CSS filters">CSS filters</a>
-      <a href="flexboxcenter" title="CSS flexbox center">CSS flexbox: center</a>
-      <a href="flexboxexpand" title="CSS flexbox expand-to-fit example">CSS flexbox: expand to fit</a>
+      <a href="flexboxcenter" title="CSS Flexbox center">CSS Flexbox: center</a>
+      <a href="flexboxexpand" title="CSS Flexbox expand-to-fit example">CSS Flexbox: expand to fit</a>
+      <a href="grid" title="CSS Grid simple example">CSS Grid: simple example</a>
+      <a href="gridpage" title="CSS Grid page layout example">CSS Grid: page layout</a>
       <a href="cssnegativeselector" title="CSS negative selector example">CSS negative selector</a>
       <a href="cssregions" title="CSS regions example">CSS regions</a>
       <a href="csstextindent" title="CSS text-indent example">CSS text-indent</a>