Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
created Holy Grail layout
  • Loading branch information
mdr19002 committed Feb 21, 2020
1 parent 5452799 commit fc62f5a
Show file tree
Hide file tree
Showing 3 changed files with 389 additions and 0 deletions.
328 changes: 328 additions & 0 deletions css/wk5.css
@@ -0,0 +1,328 @@
/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/

/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */

html {
color: #222;
font-size: 1em;
line-height: 1.4;
}

/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/

::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}

::selection {
background: #b3d4fc;
text-shadow: none;
}

/*
* A better looking default horizontal rule
*/

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}

/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/

audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}

/*
* Remove default fieldset styles.
*/

fieldset {
border: 0;
margin: 0;
padding: 0;
}

/*
* Allow only vertical resizing of textareas.
*/

textarea {
resize: vertical;
}

/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */

.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}

/* ==========================================================================
Author's custom styles
========================================================================== */

.grid {
min-height:100vh;
display: grid;
grid-template-rows: auto auto 1fr auto auto;
}

.grid > * {
border: 2px solid black;
text-align: center;
}

header {
background-color: pink;
}

nav {
background-color: yellow;
}

main {
background-color: cyan;
}

#ad {
background-color: magenta;
}

footer {
background-color: chartreuse;
}

@media (min-width:700px) {
.grid {
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-gap: 5px;
}
header {
grid-column: 1/4;
grid-row:1/2;
}
nav {
grid-column:1/2;
grid-row:2/3;
}
main {
grid-column:2/3;
grid-row:2/3;
}
#ad {
grid-column: 3/4;
grid-row:2/3;
}
footer {
grid-column:1/4;
grid-row:3/4;
}
}




/* ==========================================================================
Helper classes
========================================================================== */

/*
* Hide visually and from screen readers
*/

.hidden {
display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
/* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}

.clearfix:after {
clear: both;
}

/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */

@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}

/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
https://www.phpied.com/delay-loading-your-print-css/
========================================================================== */

@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
/* Black prints faster */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}


1 change: 1 addition & 0 deletions index.html
Expand Up @@ -13,6 +13,7 @@
<li><a href="wk2-about-me.html">Wk 2: About Me</a></li>
<li><a href="wk3_axit.html">Wk 3: AXIT Layout</a></li>
<li><a href="wk4_flexbox.html">Wk 4: Flexbox Practice</a></li>
<li><a href="wk5_holy-grail.html">Wk 5: CSS Grid "Holy Grail"</a></li>
</ul>
</nav>
</body>
Expand Down
60 changes: 60 additions & 0 deletions wk5_holy-grail.html
@@ -0,0 +1,60 @@
<!doctype html>
<html class="no-js" lang="en">

<head>
<meta charset="utf-8">
<title>The "Holy Grail" Layout</title>
<meta name="description" content="holy grail layout created with CSS Grid">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/wk5.css">

<meta name="theme-color" content="#fafafa">
</head>

<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->

<!-- Add your site or application content here -->
<div class="grid">
<header>
<h1>HEADER</h1>
</header>
<nav>
<h1>MENU</h1>
</nav>
<main>
<h1>MAIN SITE CONTENT</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, suscipit, asperiores modi placeat eveniet ex, tenetur minima qui omnis enim corporis? Doloribus suscipit magni tempora magnam fugiat repellendus porro animi.</p>
</main>
<div id="ad">
<h1>ADS</h1>
</div>
<footer>
<h1>FOOTER</h1>
</footer>
</div>


<script src="js/vendor/modernizr-3.8.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>

</html>

0 comments on commit fc62f5a

Please sign in to comment.