Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
created Holy Grail layout
- Loading branch information
Showing
3 changed files
with
389 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
} | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |