SymphisysSymphisys Blog +91 799 354 1983Cloude-CommerceSOC Verification Embedded Solutions

Foundation Framework
Srinivas Kota

Foundation Framework Introduction

Foundation is an advanced front-end framework it uses for designing beautiful responsive websites and also it does provide reach look interfaces layout. From prototype to production, sites that work on any kind of device with Foundation framework.

What is Foundation?

Foundation is a css3 framework. Foundation was originally built by ZURB in 2008. ZURB is a product design company in Campbell, California. It released Foundation version 2.0 as open source in October 2011. The latest version of Foundation is 6.6.3, released in April 2020.

Symphisys Software Consulting And Solutions Private Limited provides an innovative and efficient approach to the clients focusing on Project standards and on time deliverables. Symphisys Software Consulting And Solutions Private Limited commitment is to enrich projects by developing on the latest technologies in the market. Here we are presenting one of the css frameworks like FOUNDATION.

What You Should Already Know?

Before you start Foundation, you have to understanding below technologies

  • HTML
  • CSS
  • JavaScript
  • jQuery

Foundation Installation Process

There are many ways to install Foundation framework, here we have a few suggestions.

Foundation framework is available on Bower, Meteor, npm and Composer. The package includes all of the source Sass and JavaScript files, as well as compiled CSS and JavaScript, in uncompressed and compressed flavors.

CDN Links

Now here going to create a basic foundation template by including the foundation CSS and JS files, as well as other JavaScript dependencies like jQuery and Popper.js via CDN.

Adding foundation in your project via CDN links because CDN offers performance benefit by reducing the loading time, since they are hosting the files on multiple servers spread.

Across the globe so that when a user requests the file it will be served from the server nearest to them.

CDN JS Files
        <!-- Compressed JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js" integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>
CDN CSS Files
        <!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">

        <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation-float.min.css" integrity="sha256-4ldVyEvC86/kae2IBWw+eJrTiwNEbUUTmN0zkP4luL4=" crossorigin="anonymous">

        <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation-prototype.min.css" integrity="sha256-BiKflOunI0SIxlTOOUCQ0HgwXrRrRwBkIYppEllPIok=" crossorigin="anonymous">

        <!-- foundation-rtl.min.css: Compressed CSS with right-to-left reading direction -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation-rtl.min.css" integrity="sha256-F+9Ns8Z/1ZISonBbojH743hsmF3x3AlQdJEeD8DhQsE=" crossorigin="anonymous">
Creating a Basic HTML file
  • Open up your any favorite code editor and create a new HTML file.
  • Start with an empty window and type the following code and save it as "demo.html" on your desktop.
Example:
<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
Making this HTML File a Foundation Template
  • In order to make this plain HTML file a foundation template, just include the foundation CSS and JS files as well as required jQuery and Popper.js using their CDN links.
  • You should include JavaScript files at the bottom of the page, right before the closing tag to improve the performance of your web pages.
Example:
<!doctype html>
 <html class="no-js" lang="en">
  <head>
     <meta charset="utf-8" />
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Foundation Starter Template </title>
     <link rel="stylesheet" href="css/foundation.css" />
   </head>
  <body>
    <h1>Hello, world! </h1>
    <script src="js/vendor/jquery.js"> </script>
     <script src="js/vendor/what-input.js"> </script>
     <script src="js/vendor/foundation.min.js"> </script>
     <script>
      $(document).foundation();
     </script>
   </body>
 </html>

Foundation Framework Grid System

The Foundation grid system is the fastest and easy way to create responsive web page layout.

Grid Classes:

The Foundation framework system has four classes:

  • .small- (extra small devices - screen width equal to <40em)
  • .medium- (medium devices - screen width equal to 40em)
  • .large- (large devices - screen width equal to 64em)
  • .Custom- (screen width equal to any custom with)
Example:
 <div class="row">
   <div class="columns small-8">8
     <div class="row">
       <div class="columns small-8">8 Nested
         <div class="row">
           <div class="columns small-8">8 Nested Again </div>
           <div class="columns small-4">4 </div>
         </div>
       </div>
       <div class="columns small-4">4 </div>
     </div>
   </div>
   <div class="columns small-4">4 </div>
 </div>

Foundation Responsive

Foundation framework responsive design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. This framework makes three tier grid classes provides better control over the layout as well as how it will be rendered on different types of devices like mobile phones, tablets, laptops and desktops, large screen devices, and so on.

Foundation Advantages

  • It is easy to learn, once you have the basic understanding of HTML, CSS, JavaScript, and JQuery.
  • You can use Foundation freely as it is an open source.
  • It provides you a bunch of templates, which helps you in start developing the website right away.
  • Foundation supports preprocessors like SASS and Compass, which makes development faster.
  • Adding a ‘collapse’ class will allow you to easily collapse columns and remove gutters.
  • Foundation provides you with a HTML5 form validation library.
  • User experience can be customized because website loads different media for different devices/screen sizes.
  • Mainly Foundation is a very lightweight framework.

Foundation Disadvantages

  • It may take some time for beginners to learn and take advantage of the preprocessor support.
  • Foundation has less themes compared to others.
  • Lack of wider support like QA sites and forums for fixing issues.
Share
Tags
symphisys BlogSymphisys Resources Symphisys Artciles Magento QA Oracle AWS Automation IOT
Categories

Srinivas Kota
UI Developer
Symphisys
Aug 16, 2020