{"id":190,"date":"2017-01-16T19:48:53","date_gmt":"2017-01-16T19:48:53","guid":{"rendered":"http:\/\/appsbyjohn.com\/learn\/?p=190"},"modified":"2017-04-30T01:09:36","modified_gmt":"2017-04-30T01:09:36","slug":"using-the-foundation-framework-for-responsive-web-design","status":"publish","type":"post","link":"https:\/\/appsbyjohn.com\/learn\/using-the-foundation-framework-for-responsive-web-design\/","title":{"rendered":"Using the Foundation Framework for Responsive Web Design"},"content":{"rendered":"<p><a href=\"#get-guide\">Request a PDF of this post<\/a><\/p>\n<p>A development framework can assist tremendously when upgrading to a responsive website. One of the most robust responsive web frameworks is <a href=\"http:\/\/foundation.zurb.com\/\" title=\"Zurb Foundation Framework\">Zurb Foundation<\/a>. This post dives into using Foundation when converting a non-responsive website into a responsive website. At the time of writing the latest version of Foundation was 6.3 according to <a href=\"http:\/\/foundation.zurb.com\/sites\/docs\/\" title=\"Foundation Framework Documentation\">the Foundation Documentation<\/a>.<\/p>\n<p><!--more--><\/p>\n<p><b>Sample Website Layout<\/b><\/p>\n<p>Here is a sample website layout with a logo, navigation, a featured section, a two column section and a footer. As seen in the code this layout was created with CSS floats.<\/p>\n<p><b>Sample Website HTML<\/b><\/p>\n<pre><code>&lt;body&gt;\r\n\r\n  &lt;header&gt;\r\n    &lt;div id=\"logo\"&gt;&lt;\/div&gt;\r\n    &lt;nav&gt;\r\n      &lt;ul&gt; ... &lt;\/ul&gt;\r\n    &lt;\/nav&gt;\r\n  &lt;\/header&gt;\r\n\r\n  &lt;main id=\"featured\"&gt;&lt;\/main&gt;\r\n\r\n  &lt;section id=\"posts\"&gt;\r\n    &lt;article&gt;&lt;\/article&gt;\r\n    &lt;article&gt;&lt;\/article&gt;\r\n  &lt;\/section&gt;\r\n\r\n  &lt;footer&gt;&lt;\/footer&gt;\r\n&lt;\/body&gt;<\/code><\/pre>\n<p><b>Sample Website CSS<\/b><\/p>\n<pre><code>body {\r\n  width: 100%;\r\n  max-width: 1000px;\r\n  margin: 0 auto;\r\n}\r\n\r\n#logo {\r\n  float: left;\r\n  width: 25%;\r\n  height: 24px;\r\n}\r\n\r\nnav {\r\n  float: left;\r\n  width: 75%;\r\n  text-align: right;\r\n}\r\n\r\nmain,\r\n#posts {\r\n  width: 100%;\r\n  float: left;\r\n}\r\n\r\n#posts article {\r\n  float: left;\r\n  width: 45%;\r\n}\r\n\r\n#posts article:first-child { margin-right: 10%; }\r\n\r\nfooter { clear: left; }\r\n\r\nheader, main, section { margin-bottom: 40px; }<\/code><\/pre>\n<p><b>Preview of Sample Website<\/b><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/appsbyjohn.com\/learn\/wp-content\/uploads\/2017\/01\/Tutorial3Base.gif\" alt=\"\" width=\"1224\" height=\"1080\" class=\"aligncenter size-full wp-image-226\" \/><\/p>\n<p>This layout is not terrible on a mobile device but there are a few issues to address:<\/p>\n<ul>\n<li>The menu does not fit<\/li>\n<li>Content becomes too tight in the two column section<\/li>\n<li>The logo becomes too small<\/li>\n<\/ul>\n<p>Ideally we would <a href=\"http:\/\/appsbyjohn.com\/learn\/topics\/responsive-web-design\/#step3-media-queries\" title=\"Change a CSS layout using media queries\">change the layout using media queries<\/a> to create a mobile friendly layout for smaller screens. However, the Foundation Framework simplifies this process. Let&#8217;s upgrade the sample website using Foundation.<\/p>\n<p><b>Updated HTML using Foundation<\/b><\/p>\n<pre><code>&lt;body&gt;\r\n  &lt;header class=\"row collapse\"&gt;\r\n    &lt;div id=\"logo\" class=\"columns small-12 medium-3\"&gt;&lt;\/div&gt;\r\n    &lt;nav class=\"columns small-12 medium-6 menu-centered\"&gt;\r\n      &lt;ul class=\"menu align-right\"&gt; ... &lt;\/ul&gt;\r\n    &lt;\/nav&gt;\r\n  &lt;\/header&gt;\r\n\r\n  &lt;main id=\"featured\" class=\"row\"&gt;&lt;\/main&gt;\r\n\r\n  &lt;section id=\"posts\" class=\"row\"&gt;\r\n    &lt;article class=\"columns small-12 medium-5\"&gt;&lt;\/article&gt;\r\n    &lt;article class=\"columns small-12 medium-5\"&gt;&lt;\/article&gt;\r\n  &lt;\/section&gt;\r\n\r\n  &lt;footer class=\"row\"&gt;\r\n    &lt;span class=\"hide-for-large\"&gt;Download our App!&lt;\/span&gt;\r\n  &lt;\/footer&gt;\r\n\r\n&lt;\/body&gt;<\/code><\/pre>\n<p><b>Simplified CSS using Foundation<\/b><\/p>\n<pre><code>body {\r\n  width: 100%;\r\n  max-width: 1000px;\r\n  margin: 0 auto;\r\n}\r\n\r\n#logo {\r\n  <del>float: left;<\/del>\r\n  <del>width: 25%;<\/del>\r\n  height: 24px;\r\n}\r\n\r\nnav {\r\n  <del>float: left;<\/del>\r\n  <del>width: 75%;<\/del>\r\n  <del>text-align: right;<\/del>\r\n}\r\n\r\n@media screen and (min-width: 640px) {\r\n  .menu-centered {\r\n    text-align: right;\r\n  }\r\n}\r\n\r\n#posts {\r\n  <del>width: 100%;<\/del>\r\n  <del>float: left;<\/del>\r\n}\r\n\r\n#posts article {\r\n  <del>float: left;<\/del>\r\n  <del>width: 45%;<\/del>\r\n}\r\n\r\n#posts article:first-child { <del>margin-right: 10%;<\/del> }\r\n\r\nfooter { <del>clear: left;<\/del> }\r\n\r\nheader, main, <del>section<\/del> article { margin-bottom: 40px; }<\/code><\/pre>\n<p><b>Preview of Updated Website<\/b><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/appsbyjohn.com\/learn\/wp-content\/uploads\/2017\/01\/Tutorial3Foundation.gif\" alt=\"\" width=\"1228\" height=\"1080\" class=\"aligncenter size-full wp-image-244\" \/><\/p>\n<p>There are a few Foundation items I would like to point out here:<\/p>\n<ul>\n<li>The Grid<\/li>\n<li>Visibility Classes<\/li>\n<li>Helper Classes<\/li>\n<li>Overriding Foundation Styles<\/li>\n<\/ul>\n<h2>The Grid<\/h2>\n<p>One of the most basic features of Foundation Framework is the <a href=\"http:\/\/foundation.zurb.com\/sites\/docs\/grid.html\" title=\"Foundation Grid\">layout grid<\/a>. I like to visualize the grid as a table with columns and rows. Elements within the page are fit within this grid layout. Notice that many of the elements were given a class of <code>.row<\/code>. Foundation stacks each row vertically and assumes a 100% width of their parent element. Child elements of the rows are given a class of <code>.columns<\/code> and an optional column width such as <code>small-#<\/code>. Our <code>header<\/code> element is being treated as a row that is split into, by default, 12 columns.<\/p>\n<p>The <code>#logo<\/code> is given a class of <code>.small-12<\/code> and a class of <code>.medium-3<\/code>. This is our way of telling the element to span all 12 columns on small screen sizes and only 3 columns on screen sizes medium or larger. Foundation is a mobile first framework. This means that any declarations will be applied &#8220;up&#8221; in screen size until told otherwise. The <code>.small<\/code> styles will apply at all screen sizes unless specifically overridden.<\/p>\n<p>Two other items to note about the Grid relate to our <code>&lt;header class=\"row collapse\"&gt;<\/code> element. On medium-sized screens and above we are giving the <code>&lt;nav class=\"columns medium-6 ...\"&gt;<\/code> half of the row width (6 of 12). Even though there are 9 columns left in this row Foundation floats this column to the right since it is the last column in the row. Also, notice the class of <code>.collapse<\/code> on the row. By default Foundation will add padding to each column. The class of <code>.collapse<\/code> removes this padding which keeps our navigation links flush with the right side of our layout.<\/p>\n<h2>Visibility Classes<\/h2>\n<p>Another useful Foundation feature is is called <a href=\"http:\/\/foundation.zurb.com\/sites\/docs\/visibility.html\" title=\"Visibility Classes from the Foundation Framework\">visibility classes<\/a>. This is a simple way to show and hide elements at different screen sizes.<\/p>\n<p>The updated example added a link in the footer to download our mobile app. For the sake of example we only want to show this content to users on a smaller screen, most likely a mobile device. By simply adding the class of <code>.hide-for-large<\/code> we are telling Foundation to hide this element at screen sizes large and above. Note that we can also use a class to <code>.show-for-small-only<\/code> for a similar result. Foundation also provides useful classes to <code>show-for-landscape<\/code> or <code>show-for-portrait<\/code>.<\/p>\n<h2>Helper Classes<\/h2>\n<p>Another Foundation feature to point out is a <a href=\"http:\/\/foundation.zurb.com\/sites\/docs\/typography-helpers.html\" title=\"Foundation Helper Classes\">helper class<\/a>. If we would like to align text of a specific element we can add a class such as <code>.text-justify<\/code>. Also, we can change the alignment based on screen size. Take this element for instance: <code>&lt;p class=\"text-left medium-text-justify\"&gt; ... &lt;\/p&gt;<\/code>. Text will be left-aligned on smaller screens but justified for medium sizes and above.<\/p>\n<h2>Overriding Foundation Styles<\/h2>\n<p>Most of these Foundation classes provide the exact styles you are looking for. However, from time to time you may want to customize the classes a bit further. Each class is easily customizable. In our example we converted our navigation <code>ul<\/code> into a Foundation menu. The parent <code>nav<\/code> element has a class of <code>.menu-centered<\/code> to center the menu per <a href=\"http:\/\/foundation.zurb.com\/sites\/docs\/menu.html\" title=\"Foundation Menu\">Foundation Menu documentation<\/a>. This is exactly what we want on smaller screens. For large screens we would like to keep the menu right aligned. Our example added a media query to override the Foundation styles.<\/p>\n<pre><code>@media screen and (min-width: 640px) {\r\n  .menu-centered {\r\n    text-align: right;\r\n  }\r\n}<\/code><\/pre>\n<p>Foundation is a great tool to take advantage of when upgrading a site using Responsive Web Design. Check them out at <a href=\"http:\/\/foundation.zurb.com\/\" title=\"Foundation Framework\">http:\/\/foundation.zurb.com\/<\/a>.<\/p>\n<p>Thanks for reading this introduction to Foundation. I invite any questions or comments through Email or Twitter.<\/p>\n<h2 id=\"get-guide\">Get this Guide as a PDF<\/h2>\n<p>Subscribe to the Apps by John Newsletter. I will send you a PDF of this guide and send announcements of future guides!<\/p>\n<script>(function() {\n\twindow.mc4wp = window.mc4wp || {\n\t\tlisteners: [],\n\t\tforms: {\n\t\t\ton: function(evt, cb) {\n\t\t\t\twindow.mc4wp.listeners.push(\n\t\t\t\t\t{\n\t\t\t\t\t\tevent   : evt,\n\t\t\t\t\t\tcallback: cb\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n})();\n<\/script><!-- Mailchimp for WordPress v4.9.17 - https:\/\/wordpress.org\/plugins\/mailchimp-for-wp\/ --><form id=\"mc4wp-form-1\" class=\"mc4wp-form mc4wp-form-261\" method=\"post\" data-id=\"261\" data-name=\"Get Post PDF\" ><div class=\"mc4wp-form-fields\"><p>\r\n\t<label>Email address: <\/label>\r\n\t<input type=\"email\" name=\"EMAIL\" placeholder=\"Your email address\" required \/>\r\n<\/p>\r\n\r\n<p>\r\n    <label>First Name<\/label>\r\n    <input type=\"text\" name=\"FNAME\">\r\n<\/p>\r\n\r\n<p>\r\n    <label>Last Name<\/label>\r\n    <input type=\"text\" name=\"LNAME\">\r\n<\/p>\r\n\r\n\r\n<p>\r\n    <label>Requested Post<\/label>\r\n    <input type=\"text\" name=\"MMERGE3\" value=\"\/learn\/wp-json\/wp\/v2\/posts\/190\">\r\n<\/p>\r\n\r\n<p>\r\n\t<input type=\"submit\" value=\"Subscribe to get PDF\" \/>\r\n<\/p><\/div><label style=\"display: none !important;\">Leave this field empty if you're human: <input type=\"text\" name=\"_mc4wp_honeypot\" value=\"\" tabindex=\"-1\" autocomplete=\"off\" \/><\/label><input type=\"hidden\" name=\"_mc4wp_timestamp\" value=\"1782159021\" \/><input type=\"hidden\" name=\"_mc4wp_form_id\" value=\"261\" \/><input type=\"hidden\" name=\"_mc4wp_form_element_id\" value=\"mc4wp-form-1\" \/><div class=\"mc4wp-response\"><\/div><\/form><!-- \/ Mailchimp for WordPress Plugin -->\n","protected":false},"excerpt":{"rendered":"<p>Request a PDF of this post A development framework can assist tremendously when upgrading to a responsive website. One of the most robust responsive web frameworks is Zurb Foundation. This post dives into using Foundation when converting a non-responsive website into a responsive website. At the time of writing the latest version of Foundation was &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/appsbyjohn.com\/learn\/using-the-foundation-framework-for-responsive-web-design\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Using the Foundation Framework for Responsive Web Design&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-190","post","type-post","status-publish","format-standard","hentry","category-responsive-web-design"],"_links":{"self":[{"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/posts\/190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/comments?post=190"}],"version-history":[{"count":49,"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/posts\/190\/revisions"}],"predecessor-version":[{"id":291,"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/posts\/190\/revisions\/291"}],"wp:attachment":[{"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/media?parent=190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/categories?post=190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appsbyjohn.com\/learn\/wp-json\/wp\/v2\/tags?post=190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}