An Introduction to Foundation Framework

Posted on Posted in Javascript

An Introduction to Foundation Framework

With today’s trend where people are fond of using mobile devices, it is very important to still give your target audience a user-friendly experience whenever they visit your site. With that, responsive web design is now a requirement in achieving this purpose.The principle behind responsive web design is that a website can be viewed using any device, of any screen size and still maintaining the quality and order of its content. This will involve using relative measurements rather than exact values for elements on a page. Hiding and scaling them when they don’t fit in a smaller window, and gather them back when the browser is later enlarge or un-zoomed.

But this means more work for the developers/designers. Unlike before, they will now consider a number of screen sizes and try to add rules just to make the site look better for each screen size.This sounds that making a site responsive is a tiresome experience. Are there tools that can be used to make this process easier?

This is where front-end frameworks comes in. They have built-in functionalities that are ready to use and are easy to implement. And since they are so-called frameworks, they are expected to be fully tested across browsers of any size.

Among the frameworks that I saw, Foundation made a stand. Aside from the developers’ claim that it is the most advanced framework today, there are a lot of features that Foundation offers. It was first released in 2011 by Zurb and Foundation is the first open source framework that is responsive. It is also the first semantic framework and the first Mobile First. In addition, it’s not only just for styling and prototyping, it’s also equipped with powerful and easy to learn components.

Below are my top Foundation features. See how easy they are to understand and implement.

  1. Orbit Slider

    Orbit Slider is a powerful and easy to use image slider that required minimal HTML markup to function. Orbit is also responsive and allows users to swipe on touch-enabled devices.

    Required Library: foundation.orbit.js

    HTML:

    JAVASCRIPT:

        
            $(document).foundation({ 
                orbit: { animation: 'slide', 
                         timer_speed: 1000, 
                         pause_on_hover: true 
                    } 
            });
    

    LIVE DEMO: http://foundation.zurb.com/docs/components/orbit.html

  2. Tool tips

    Creating tool tips to provide extended information on a term is now made easy. For an added bonus, users can position their tooltips where to display just by adding classes such as “tip-right” and “tip-top”.

    Required Library: foundation.tooltip.js

    HTML:

        
    		extended information
    

    JAVASCRIPT:

        
            $(document).foundation({ 
                tooltips: { selector : '.has-tip', 
                tooltip_class : '.tooltip', 
                touch_close_text: 'tap to close', 
            });
    

    LIVE DEMO: http://foundation.zurb.com/docs/components/tooltips.html

  3. Clearing

    Clearing is a plugin for creating responsive light boxes without having trouble with images having different sizes.

    Required Library: foundation.clearing.js

    HTML:

    JAVASCRIPT:

     
    	$(document).foundation(); 
    		
    

    LIVE DEMO: http://foundation.zurb.com/docs/components/clearing.html

Let us now compare Foundation with some front-end framework that are currently available.

  1. Foundation vs. Twitter Bootstrap
    Advantage:

    Foundation uses Sass and Compass as its preprocessor engine while Bootstrap uses LESS. As discuss by Joshua Johnson, Compass is a powerful tool that makes coding up cross browser CSS3 easy.

    Disadvantage:

    Twitter bootstrap already has a large community that offers discussion about the frameworks features and common issues encountered. Problems can easily be search and resolved through reading forums. Unlike Bootstrap, Foundation’s support is just starting to take shape. But to cope up with this, Zurb provided a good documentation and demos of the framework’s features.

  2. Foundation vs. Kickoff

    Zander Martineau stated that Foundation is not nearly as prescriptive. He also said that while Foundation define almost every aspect of a website with CSS styles and Javascript plugins, Kickoff has most of that but does not enable it by default. This can be an advantage because it makes the framework lightweight and just include those that are needed. A disadvantage is that there is a tendency to import a lot of libraries making your code less organized and might slow down the page load time.

  3. Foundation vs. Gumby
    Advantage:

    Foundation offers more script plugins in comparison with Gumby. But Gumby also has some interesting plugins such as Parallax and InView.

    Disadvantage:

    Gumby comes with a PSD and UI kit that makes creating mock up design in a traditional manner easy.

In the end, choosing the right framework for you will depend on your needs. Frameworks are made to make application development easier. It cuts off the time in making your site responsive in half. Also, frameworks are made to promote clean and organized programming. Try Foundation on your website and see what it can do for you.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.