learn-javascript-the-hard-way
/
ljsthw-blog-code
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add the equal height holy grail code.

Browse Source
main
Zed A. Shaw 2 years ago
commit 3da5a44881
5 changed files with 327 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      17-equal-height-holy-grail-layout-in-modern-css/README.md
  2. 101
      17-equal-height-holy-grail-layout-in-modern-css/basic.html
  3. 107
      17-equal-height-holy-grail-layout-in-modern-css/mobile.html
  4. 117
      17-equal-height-holy-grail-layout-in-modern-css/twotone.html
  5. 1
      README.md

1
17-equal-height-holy-grail-layout-in-modern-css/README.md
Unescape View File

@ -0,0 +1 @@
These files come from the [Equal Height Holy Grail Layout in Modern CSS](https://learnjsthehardway.com/blog/17-equal-height-holy-grail-layout-in-modern-css/) blog post. The first layout described is in the file `basic.html`. The two-tone layout is in `twotone.html`. The quick simple mobile layout is in `mobile.html` and should probably the be actual one you use as the basis for your own study or design.

101
17-equal-height-holy-grail-layout-in-modern-css/basic.html
Unescape View File

@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name="description" content="Learn JavaScript the Hard Way">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<title>Holy Grail Starter</title>
<style>
:root {
--height-header: 80px;
--height-footer: 200px;
}
body {
margin: 0px;
padding: 0px;
}
footer {
display: flex;
background-color: hsl(0, 0%, 80%);
min-height: var(--height-footer);
}
header {
display: flex;
background-color: hsl(0, 0%, 80%);
height: var(--height-header);
}
main {
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--height-header) - var(--height-footer));
}
main > columns {
display: flex;
flex-direction: row;
flex: 1 1 auto;
}
main > columns left,
main > columns right {
display: block;
flex: 1 1 auto;
}
main > columns left {
background-color: hsl(0, 70%, 80%);
}
main > columns right {
background-color: hsl(200, 70%, 80%);
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<main>
<columns>
<left>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
</left>
<right>
<h1>Right</h1>
<h1>Right</h1>
<h1>Right</h1>
<h1>Right</h1>
</right>
</columns>
</main>
<footer>
<h1>Footer</h1>
</footer>
</body>
</html>

107
17-equal-height-holy-grail-layout-in-modern-css/mobile.html
Unescape View File

@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name="description" content="Learn JavaScript the Hard Way">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<title>Holy Grail Starter</title>
<style>
:root {
--height-header: 80px;
--height-footer: 200px;
}
body {
margin: 0px;
padding: 0px;
}
footer {
display: flex;
background-color: hsl(0, 0%, 80%);
min-height: var(--height-footer);
}
header {
display: flex;
background-color: hsl(0, 0%, 80%);
height: var(--height-header);
}
main {
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--height-header) - var(--height-footer));
}
main > columns {
display: flex;
flex-direction: row;
flex: 1 1 auto;
}
main > columns left,
main > columns right {
display: block;
flex: 1 1 auto;
}
main > columns left {
background-color: hsl(0, 70%, 80%);
}
main > columns right {
background-color: hsl(200, 70%, 80%);
}
@media only screen and (max-width: 700px) {
main > columns {
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<main>
<columns>
<left>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
</left>
<right>
<h1>Right</h1>
<h1>Right</h1>
<h1>Right</h1>
<h1>Right</h1>
</right>
</columns>
</main>
<footer>
<h1>Footer</h1>
</footer>
</body>
</html>

117
17-equal-height-holy-grail-layout-in-modern-css/twotone.html
Unescape View File

@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name="description" content="Learn JavaScript the Hard Way">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<title>Holy Grail Starter</title>
<style>
:root {
--height-header: 80px;
--height-footer: 200px;
}
body {
margin: 0px;
padding: 0px;
}
footer {
display: flex;
background-color: hsl(0, 0%, 80%);
min-height: var(--height-footer);
}
header {
display: flex;
background-color: hsl(0, 0%, 80%);
height: var(--height-header);
}
main {
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--height-header) - var(--height-footer));
}
main > columns {
display: flex;
flex: 1 1 auto;
}
main > columns left,
main > columns right {
display: flex;
flex: 1 1 auto;
}
main > columns left {
display: flex;
flex-direction: row-reverse;
}
main > columns right {
display: flex;
flex-direction: row;
background-color: hsl(0, 0%, 70%);
}
main > columns left info {
flex: 0 1 400px;
border: 1px solid black;
}
main > columns right info {
flex: 0 1 400px;
border: 1px solid black;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<main>
<columns>
<left>
<info>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
</info>
</left>
<right>
<info>
<h1>Right</h1>
<h1>Right</h1>
<h1>Right</h1>
<h1>Right</h1>
</info>
</right>
</columns>
</main>
<footer>
<h1>Footer</h1>
</footer>
</body>
</html>

1
README.md
Unescape View File

@ -0,0 +1 @@
A simple repository that holds the full code mentioned in blog posts on [learnjsthehardway.com](https://learnjsthehardway.com). The repository is only "semi-open" in that you can't check it out, but you can browse and grab files via the raw view.
Write Preview
Loading…
Cancel
Save