Responsive Design

Foundation 3 – A most effective method of displaying websites under all browsers and all new sized devices with internet like smart phone, tablets etc. which are essential for our customers.
Responsive design is not something new and more websites have benefited from it. Foundation – HTML, CSS and JS Framework is a tool that helps developing this kind of websites with good visibility under all kinds of resolutions for different devices (smart phone, tablet, laptop, computer, TV etc). In this article we will focus on the new version of Foundation 3 framework and his new features.

With Foundation 3 Framework easily we can organize our web design, developing and content of our website using the Grid structure combined with the CSS classes. By standard the framework uses Grid with 12 columns, but the number of the columns can be changed depending on the specific needs and preferences of the user or customer. The Grid is adaptive to every screen and does not depend on any resolution.
foundation grid
To have better control and presentation of our content Foundation in the new version rewrites his own CSS classes and creates new classes. New feature are “box-sizing”, “border-box” – that prevent the conflict with element sizes when we are using “border” or “padding”, also many tedious calculations. Attention is paid to all aspects of website, like buttons, different fields for data entering and choice, menus, tables, notes, messages and tooltips if the needs of the website require it, etc.

foundation buttons
Most of the pictures that the previous versions of the framework were using are removed. That of course increases the speed of the website and the amount of data transferred, but the true advantage is that the elements do not depends from the resolution of the device.
Some of the elements need a little “javascript”, so they can work properly like “dropdown menu”, “tab menu”, etc.

Do not forget both “jQuery” responsive plugins, which Zurb developed specially for the needs of Foundation framework: “Orbit” – slider for images and content, and “Revel” – dialog window. Both are including in the “css” and “javascript” libraries, so if you use the standard package, you do not need anything extra. One of the biggest update in Foundation 3 is including the “SASS” and “COMPASS” technologies instead of working directly with “CSS”. Including the pre-processor increases the speed of the work allowing the use of variables, functions and so-called mixins. Powerful method for inheritance. All this of course is not necessarily! For more conservative people, another version of FOUNDATION is provided. Version that contains only “CSS” library without the need for pre-processor and here from Zurb have optimized the process of work. The user can modify the standard package in advance according to his needs. There is a possibility to turn off some of the “CSS” classes and set up settings of some bases elements, which is not big deal, but at least is annoying if you have to do it by hand.

responsive design | cholakov it
And finally the most important question. What really is happening under the different browsers and devices? Chrome, Firefox, Safari are browsers where Foundation framework works perfectly. Under the “famous and beloved” Internet Explorer everything works also perfectly, but unfortunately only for the versions 8+. If the support for IE7 is important for you, you can use Foundation 2.2.1. Under the mobile devices like iPhone & iPad, Android 2+ (Phone & Tablet) and Windows 7 are those, which test were made and proved that they are safe and good to use.
The “CSS” library with classes and “javascript” plugins, ready solutions, pre-processor for optimizing of the work with styles, of course we are not forgetting the free license. This is generally the last third version of the FOUNDATION. How this will help you to develop web sites with responsive design and etc, you will decide.

Leave a Reply

Your email address will not be published. Required fields are marked *