A Responsive Flexbox Layout Foundation

0
834
Responsive Flexbox Foundation

This is our basic responsive flexbox layout.

In a previous article on responsive Flexbox, I designed a flexbox layout using all the goodies available from CSS3 and HTML 5. The demo page that was created contained an example of using lots of different HTML 5 tags.

In this demonstration, I strip away all the extraneous code and get down to the basic structure. What you can take away from this is a basic layout with the following elements:

  • Fully responsive
  • Flexbox based
  • Use of Google fonts
  • Good typography practice
  • Proper element collapse when resized
  • Header, navigation, main, sidebar, footer

Enjoy!

The Layout

This very simple layout will react responsively based upon the width of the user agent. These break points are set at:

  • 320-639 pixels
  • 640-1023 pixels
  • 1024-1239 pixels
  • 1240 pixels and up

Example: Sidebar collapsed; Navigation links collapsed; Footer links collapsed: Width at 320-639 pixels:

Responsive Flexbox Foundation Links Collapsed

Example: Sidebar collapsed: Width at 640-1023 pixels:

Responsive Flexbox Layout Foundation

Example: Sidebar on right; Width greater than 1024 pixels

Responsive Flexbox Foundation with Sidebar

The HTML passes the W3C HTML validator.

The HTML 5

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Title of Document | Website</title>
  6.   <link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC" rel="stylesheet">
  7.   <link href="https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet">
  8.   <link href="styles.css" rel="stylesheet">
  9. </head>
  10. <body>
  11. <div id="page">
  12.   <header>
  13.     Logo
  14.   </header>
  15.   <nav>
  16.     <a href="/">Nav Item 1</a><a href="/">Nav Item 2</a><a href="/">Nav Item 3</a><a href="/">Nav Item 4</a>
  17.   </nav>
  18.   <main>
  19.     <h1>Title of the Document</h1>
  20.     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  21.   </main>
  22.   <aside>
  23.     Sidebar
  24.   </aside>
  25.   <footer>
  26.     <p><a href="/" title="Terms of use">Terms of use</a><a href="/" title="Privacy policy">Privacy policy</a><a href="/" title="About">About</a></p>
  27.     <p><i>Copyright &copy; 2016 Website.com. All rights reserved.</i></p>
  28.   </footer>
  29. </div>
  30. </body>
  31. </html>

The CSS3

  1. /*
  2. Responsive Page Layouts
  3.   320-639px
  4.   640-1023px
  5.   1024-1279px
  6.   1280px+
  7. */
  8.  
  9. @media all and (min-width: 320px) and (max-width: 639px) {
  10.   html {
  11.     font-size: 12px;
  12.   }
  13.   #page {
  14.     display: flex;
  15.     flex-direction: column;
  16.     width: 320px;
  17.   }
  18.   #page header, #page nav, #page main, #page aside, #page footer {
  19.     width: 100%;
  20.   }
  21.   #page nav a, #page footer a {
  22.     display: block;
  23.     text-align: left;
  24.   }
  25. }
  26. @media all and (min-width: 640px) and (max-width: 1023px) {
  27.   html {
  28.     font-size: 16px;
  29.   }
  30.   #page {
  31.     display: flex;
  32.     flex-direction: column;
  33.     flex-wrap: wrap;
  34.     width: 640px;
  35.   }
  36.   #page header, #page nav, #page main, #page aside, #page footer {
  37.     width: 100%;
  38.   }
  39. }
  40. @media all and (min-width: 1024px) and (max-width: 1279px) {
  41.   html {
  42.     font-size: 18px;
  43.   }
  44.   #page {
  45.     display: flex;
  46.     flex-direction: row;
  47.     flex-wrap: wrap;
  48.     width: 1024px;
  49.   }
  50.   #page header, #page nav, #page footer {
  51.     width: 100%;
  52.   }
  53.   #page main {
  54.     width: 80%;
  55.   }
  56.   #page aside {
  57.     width: 20%;
  58.   }
  59. }
  60. @media all and (min-width: 1280px) {
  61.   html {
  62.     font-size: 24px;
  63.   }
  64.   #page {
  65.     display: flex;
  66.     flex-direction: row;
  67.     flex-wrap: wrap;
  68.     width: 1280px;
  69.   }
  70.   #page header, #page nav, #page footer {
  71.     width: 100%;
  72.   }
  73.   #page main {
  74.     width: 80%;
  75.   }
  76.   #page aside {
  77.     width: 20%;
  78.   }
  79. }
  80.  
  81. /*
  82.   Page Elements
  83. */
  84. * {
  85.   box-sizing: border-box;
  86. }
  87. html {
  88.   background-color: #ccc;
  89.   font-family: 'PT Serif', serif;
  90.   line-height: 1.5;
  91. }
  92. h1, h2, h3, h4, h5, h6 {
  93.   font-family: 'Playfair Display SC', serif;
  94. }
  95. h1 {
  96.   font-size: 2.4em;
  97. }
  98. h2 {
  99.   font-size: 2em;
  100. }
  101. h3 {
  102.   font-size: 1.4em;
  103. }
  104. h4 {
  105.   font-size: 1.2em;
  106. }
  107. h5 {
  108.   font-size: 1em;
  109. }
  110. h6 {
  111.   font-size: 0.8em;
  112. }
  113. img, video, canvas {
  114.   max-width: 100%;
  115. }
  116. #page {
  117.   margin: 1em auto;
  118. }
  119. #page header {
  120.   padding: 1em;
  121.   background-color: gray;
  122.   color: white;
  123.   border-top-left-radius: 0.5em;
  124.   border-top-right-radius: 0.5em;
  125.   text-align: center;
  126. }
  127. #page nav {
  128.   margin: 0;
  129.   padding: 1em;
  130.   text-align: center;
  131.   background-color: black;
  132.   color: white;
  133. }
  134. #page nav a {
  135.   margin-right: 2em;
  136.   color: white;
  137.   text-decoration: none;
  138. }
  139. #page nav a:hover {
  140.   color: white;
  141.   text-decoration: underline;
  142. }
  143. #page main {
  144.   padding: 1em;
  145.   background-color: white;
  146. }
  147. #page aside {
  148.   padding: 1em;
  149.   background-color: white;
  150. }
  151. #page footer {
  152.   padding: 1em;
  153.   background-color: black;
  154.   color: white;
  155.   text-align: center;
  156.   border-bottom-left-radius: 0.5em;
  157.   border-bottom-right-radius: 0.5em;
  158.   font-size: 0.8em;
  159. }
  160. #page footer {
  161.   color: white;
  162. }
  163. #page footer a {
  164.   margin-right: 2em;
  165.   color: white;
  166.   text-decoration: none;
  167. }
  168. #page footer a:hover {
  169.   color: white;
  170.   text-decoration: underline;
  171. }

Of Interest