Holy Gail Flexbox

In this example below you will see how to do a Holy Gail Flexbox with some HTML / CSS and Javascript

/* SOLUTION */ .hg { min-height: 100vh;&, &__body { display: flex; flex-direction: column;

Thumbnail
This awesome code was written by hmmh, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hmmh ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Holy Gail Flexbox</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="hg">
  <header class="hg__header">The Holy Grail Layout with Flexbox</header>
  <div class="hg__body">
    <main class="hg__main">
      <p>The holy grail refers to a web page layout which has multiple, equal height columns that are defined with style sheets. It is commonly desired and implemented, although the ways in which it can be implemented with current technologies all have drawbacks. Because of this, finding an optimal implementation has been likened to searching for the elusive Holy Grail.</p>

      <p>The limitations of CSS and HTML, the desirability of semantically meaningful pages that rank well in search engines, and the deficiencies of various browsers combine to create a situation in which there is no way to create this type of layout that would be considered totally correct. As the underlying technologies do not provide a proper solution, web designers have found various ways to work around the limitations. Common workarounds include changes in page structure, the addition of graphics, scripting, and the creative use of CSS. These methods are imperfect, inconvenient, and may even be considered abuse of the web standards and their intent.</p>

      <p>Upcoming web standards will deal with this and other layout issues in a much more elegant fashion. However, the problem will continue until these standards are finalized and widely implemented.</p>

      <hr>

      <h2>The Problem</h2>
      <p>Many web pages require a layout with multiple (often three) columns, with the main page content in one column (often the center), and supplementary content such as menus and advertisements in the other columns (sidebars). These columns commonly require separate backgrounds, with borders between them, and should appear to be the same height no matter which column has the tallest content. A common requirement is that the sidebars have a fixed width, with the center column adjusting in size to fill the window (fluid or liquid layout). Another common requirement is that, when a page does not contain enough content to fill the screen, the footer should drop to the bottom of the browser window instead of leaving blank space underneath.</p>
      <p>There are many obstacles to accomplishing this:</p>

      <ul>
        <li>CSS, although quite useful for styling, currently has limited capabilities for page layout.</li>
        <li>The height of block elements (such as div elements) is normally determined by their content. So two divisions, side by side, with different amounts of content, will have different heights unless their height is somehow set to an appropriate value.</li>
        <li>HTML is meant to be used semantically; HTML elements should be chosen which accurately describe their content. The appearance of a web page as rendered by a user agent should be determined independently by style rules. Many implementations misuse HTML by using tables for non-tabular data, or nesting multiple div elements without semantic purpose. Non-semantic use of HTML confuses users or user agents who are trying to discern the structure of the page content, and is an accessibility issue.</li>
        <li>As search engines consider content in the beginning of a web page's source code to be more relevant, web designers desire the ability to place the content in the page source in an arbitrary order, without affecting the appearance of the page.</li>
        <li>Because of incorrect rendering of content by different browsers, a method that works in a standards-compliant browser may not work in one that does not implement CSS correctly.</li>
      </ul>
    </main>
    <aside class="hg__menu">
      <h3>Menu</h3>
      <ul>
        <li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">CSS Tricks: A Complete Guide to Flexbox</a></li>
      </ul>
    </aside>
    <aside class="hg__ads">
    <h3>Ads</h3>
    <ul>
      <li><a href="https://en.wikipedia.org/wiki/Holy_grail_(web_design)">Wikipedia "The Holy Grail Layout"</a></li>
      <li>Solution <a href="https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/">Flexbox</a></li>
      <li>Solution <a href="https://bitsofco.de/holy-grail-layout-css-grid/">CSS Grid</a></li>
    </ul>
  </aside>
  </div>
  <footer class="hg__footer">Footer</footer>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/hmmh/holy-gail-flexbox-RMLrbQ */
/* Custom Styles */
html {
  font-size: 62.5%;
}

body {
  font-size: 1.5rem;
  line-height: 1.6;
}

p {
  display: block;
  margin-bottom: 15px;
}

.hg__header {
  background-color: #ffdb3a;
  font-size: 2rem;
  font-weight: 700;
  font-style: italic;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hg__footer {
  background-color: #646464;
  color: #fff;
  font-size: 1.2rem;
  font-style: italic;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hg__menu, .hg__ads {
  background-color: #e6e6e6;
  text-align: center;
}
.hg__menu ul, .hg__ads ul {
  list-style: none;
  padding: 0;
}
.hg__header, .hg__menu, .hg__ads, .hg__main {
  padding: 15px;
}

/* Grid Styles */


/*Downloaded from https://www.codeseek.co/hmmh/holy-gail-flexbox-RMLrbQ */
/*
Das Holy Grail Layout
---------------------
- Es ist ein dreispaltiges Layout mit gleich hohen Spalten.
- Der Hauptinhaltsbereich steht im Quellcode ganz oben, wird aber in der dreispaltigen Darstellung in der Mitte angezeigt.
- Die rechte und die linke Spalte haben feste Breiten, die mittlere Spalte ist flexibel.
- Auf kleineren Screens soll das Layout einspaltig erscheinen.

AUFGABE:
--------
1. Gestalte das folgende Layout nach dem Holy Grail Layout mittels CSS Grid um. 
- Der Header soll dabei ca. 100px und der Footer ca. 30px hoch sein. 
- Der Header und Footer sollen natürlich über die volle Bildschirmbreite gehen.
- Die beiden Sidebars menu & ads sollen 150px. 
                    -----------------------
                    |        HEADER       |
                    -----------------------
                    | MENU  | MAIN  | ADS |
                    -----------------------
                    |        FOOTER       |
                    -----------------------
                    
2. Baue nun alles responsiv um. So dass das gerade umgesetzte Layout erst ab 768px gilt. Zuvor soll das Layout wie folgt dargestellt sein
                    -----------------------
                    |        HEADER       |
                    -----------------------
                    |        MENU         |
                    -----------------------
                    |        MAIN         |
                    -----------------------
                    |        ADS          |
                    -----------------------
                    |        FOOTER       |
                    -----------------------

3. Bleibt eigentlich der Footer immer am unteren Bildschirmrand kleben, wenn zu wenig Content im body enthalten ist? Teste es und setze den sticky Footer ebenfalls mit um.


HINWEIS:
--------
1. Zum Lösen dieser Aufgaben benötigst du folgende Eigenschaften:
- flex-direction
- order
- flex

2. Ein vollständiger Guide für Flexbox zum Nachlesen der Eigenschaften, findest du unter: 
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 
*/

Comments