{"id":24597,"date":"2015-09-07T21:01:05","date_gmt":"2015-09-07T13:01:05","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24597"},"modified":"2024-03-22T00:06:25","modified_gmt":"2024-03-21T16:06:25","slug":"building-website-foundation-5","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/building-website-foundation-5\/","title":{"rendered":"Accelerate Web Development with Foundation 5: A Comprehensive Guide"},"content":{"rendered":"

Adopting a frontend framework can revolutionize your web design process in several ways. It empowers you to adhere to modern design standards such as a mobile-first philosophy, semantic markup, and responsive design. By taking advantage of numerous pre-made CSS and JavaScript components, you can drastically enhance the speed of your development work<\/strong>, allowing you more time to concentrate on the aesthetics and user experience aspects.<\/p>\n

Zurb Foundation 5<\/a> stands out as one of the leading frontend frameworks available today. It\u2019s structured in a logical manner, user-friendly, and entirely free. The framework offers a versatile CSS grid system<\/strong> that aids in crafting neat, user-centric designs. Additionally, Foundation is thoroughly tested to ensure compatibility across different browsers and devices. See their compatibility guide<\/a> for more details.<\/p>\n

In this tutorial, I will guide you through how to quickly construct a website using Zurb Foundation 5<\/strong>. You can view the end result on the demo page. While I\u2019ll be setting up the site\u2019s layout, I\u2019ll leave the addition of subtle design touches to you. The site we\u2019re going to build together will fulfill every modern UX designer\u2019s wish: it will be responsive, prioritize mobile, be user-friendly, and maintain semantic integrity.<\/p>\n

This guide is quite detailed, so here are some shortcuts to help you navigate to specific sections more easily:<\/p>\n

    \n
  1. Downloading Foundation 5<\/a><\/li>\n
  2. Understanding the Grid<\/a> <\/li>\n
  3. Adding the Top Menu Bar<\/a><\/li>\n
  4. Filling the Main Section<\/a> <\/li>\n
  5. Enhancing The Sidebar<\/a> <\/li>\n
  6. Wrapping Up<\/a><\/li>\n<\/ol>\n
    \n

    Downloading Foundation 5<\/h2>\n

    You can download Foundation 5<\/a> in four distinct variations:<\/p>\n

      \n
    1. the complete package<\/li>\n
    2. a basic version containing only essential components<\/li>\n
    3. a customizable version allowing you to select specific features<\/li>\n
    4. a Sass version for those who prefer to customize variables and mixins in SCSS<\/li>\n<\/ol>\n

      For the purposes of this tutorial, I\u2019ll be using the Complete package with vanilla CSS. However, you\u2019re free to choose any version that suits your project\u2019s needs, enabling you to keep your site lean by using only the components you actually need.<\/p>\n

      Once you\u2019ve downloaded and extracted the ZIP file, opening the index.html file in your browser will present you with a page similar to this:<\/p>\n

      \"Foundation<\/figure>\n

      Indeed, the developers have included useful links right within the index file. While you can start building on this template by creating a new file (perhaps naming it home.html), accessing the Foundation Documentation<\/a> is straightforward, rendering the preservation of this file unnecessary.<\/p>\n

      Launch your preferred code editor and erase all content within the <body> tag, stopping just before the closing <script> tags<\/strong>.<\/p>\n

      Modify the <title> tag within the <head> section to reflect your page\u2019s title; for instance, \u201cFoundation 5 Recipes\u201d will be my choice.<\/p>\n

      \"Initial<\/figure>\n

      The demonstration will be themed around food-related content, culminating in a final appearance akin to the following:<\/p>\n

      \"Final<\/figure>\n
      \n

      Understanding the Grid<\/h2>\n

      By its design, Foundation 5 structures the screen using rows and columns. Rows are identified by the CSS class \u201crow\u201d and columns by the class \u201ccolumns\u201d.<\/p>\n

      The naming of CSS selectors in Foundation is intuitive. The framework incorporates three distinct grid systems<\/a>:<\/p>\n