Early to the age of responsive Frameworks to develop a responsive web-page we required to plan for various resolutions and devices. Practically which is a critical challenge for developers. Looking into this year back some organizations come up with “RWD Framework”. Such as BootStrap or Foundation. Using these frameworks now it is a fun to develop a responsive web-page.
Foundation is a bundle of HTML, CSS and JavaScript files. Using Foundation in less of time we can design amazing responsive web-pages. Foundation works on multiple devices like Laptop, Mobile, Tablet or iPad. Using this Front-end Framework developers can create web-pages ensuring a smooth experience no matter the device.
Getting Started With Foundation
The Framework Foundation is easy to learn and install. Foundation works with SASS. Before we will jump to discuss more about the anatomy of Foundation. Let you know “Looking into the purpose of use Foundation is divided into 2 types “Foundation for Site” and “Foundation for Email”.
Foundation for Site: This package is a best tool for UI designers. Foundation for Site includes HTML, CSS and JavaScript. Using this you can create any kind of awesome web-pages. The CSS file comes with Foundation in rich with many useful in-built CSS Classes. Which saves time to develop responsive web-pages.
Foundation for E-mail Templates: Similar to “Foundation for Site” Foundation for Email designed to create responsive browser friendly email templates. Using this you can easily create any custom responsive emails that work on every device, even in Outlook.
Hello World!
To start with Foundation you required to download the JS and CSS libraries. Download the latest version of Foundation from http://foundation.zurb.com/sites/download.html/. Then unzip the downloaded folder. Add the folder to the root folder of your web application.
To embed Foundation CSS and JS files use link and script tag respectively. Look at the demo app how I implemented Foundation in my first “Hello World!” App.
<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hello World!</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script> </head> <body> <h3>Hello World!</h3> <div class="row"> <div class="large-12 columns"> <label>Input Label</label> <input type="text" placeholder="large-12.columns" /> </div> </div> <div class="row"> <div class="large-4 medium-4 columns"> <label>Input Label</label> <input type="text" placeholder="large-4.columns" /> </div> <div class="large-4 medium-4 columns"> <label>Input Label</label> <input type="text" placeholder="large-4.columns" /> </div> <div class="large-4 medium-4 columns"> <div class="row collapse"> <label>Input Label</label> <div class="small-9 columns"> <input type="text" placeholder="small-9.columns" /> </div> <div class="small-3 columns"> <span class="postfix">.com</span> </div> </div> </div> </div> <div class="row"> <div class="large-12 columns"> <label>Select Box</label> <select> <option value="husker">Husker</option> <option value="starbuck">Starbuck</option> <option value="hotdog">Hot Dog</option> <option value="apollo">Apollo</option> </select> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.js"></script> <script> $(document).foundation(); </script> </body> </html>
Prototype to Production
Off course you can design any custom HTML template as per your requirement. But itself Foundation provides awesome optimized HTML Templates. Rather wasting time to start from scratch, take the benefit of these free templates.
