Zurb Foundation - Grid System

Zurb Foundation is a responsive front end framework that helps us to develop beautiful responsive websites that work on all devices effortlessly. It is a similar framework as Twitter BooStrap Framework to some extent.

The powerful and most beneficial part of the Foundation Framework is its Responsive Grid System.

More on Foundation Grid System

In order to understand the Grid System, Imagine any web page as an excel sheet with 12 columns in it and with multiple rows as below.

Each cell can be merged with the adjacent cells above or below so that blocks can be formed for the web page. Below is an example for such merged cells into blocks formed page layout. The blocks can be formed in n different ways. Imagine a web page with such blocks and it can be easily created with piece of code in Zurb Foundation.

I have created a sample web layout with the help of Foundation Framework that displays as below.

Below is the major component of Foundation code that has driven into the above layout. The code is mostly self understandable. The class "row" defines each row of the above block and any number of "div" from 1 to 12 can be defined in each row based on the layout need, with the help of the class "column". The large-6, large-12 etc defines how each row needs to be split into.

 <div class="row">
        <div class="large-6 column callout"></div>
        <div class="large-6 column callout"></div>
    </div>
    <div class="row">
        <div class="large-12 column callout"></div>
    </div>
    <div class="row">
        <div class="large-10 column callout"></div>
        <div class="large-2 column callout"></div>
    </div>
    <div class="row">
         <div class="large-6 column callout"></div>
         <div class="large-6 column callout"></div>
    </div>
</div>

In order to understand better, I have attached the code to this article.

Download code here

Please remember that Foundation is a responsive web framework. Take a look on the attached code in multiple devices or alter the browser size in your computer and see that the blocks stack up on one another on small browsers so that the content is visible and sized up completely and the responsiveness is achieved.

Read this before kick·off Sass

What is Sass?

Sass can be claimed as a most powerful CSS Extension language. It adds abundance of nice features to CSS, and helps the developers to build better stylesheets.

Sass is a CSS Preprocessor, How?

The developer writes Sass code in a .sass or .scss file and the Sass Preprocessor converts it to CSS format, that is .css file so that the browser understands the code and renders the page. The .scss format is the widely used one, because of its close to CSS syntax.

The advantage of Sass over css is that, it eradicates the monotonous code style of CSS and craft CSS easily.

How to install Sass on Windows?

Sass is a package provided by the programming language Ruby as one of its dependencies. All the packages of Ruby are called as Gems. Sass is one such Gem. To start with we need to install Ruby first on our machine.

Download and install the proper version of Ruby Installer that suits your computer from the below link.

http://rubyinstaller.org/downloads/

Please note that for a 64 bit Windows operating system, the below link works charm.

https://github.com/oneclick/rubyinstaller2/releases/download/rubyinstaller-2.5.0-2/rubyinstaller-2.5.0-2-x64.exe

 

Start using Sass

 

In your computer create a dummy folder to test, with couple of subfolders named, CSS and SCSS, and a .scss test file in the scss folder as below.

 

Now you can watch your .scss test file for any changes and tell the preprocessor to convert to .css file using an inbuilt watch program. 

In order to do this go to the Dummy folder in the command prompt and run the below command.

sass --watch scss:css

Hereupon when you do any change in your .scss file, the watcher detects the change and compile it into a .css file. Try adding code to .scss file, save and check for the compilation happening automatically.

Outline of Rest Architecture for Web Application

Rest (Representational State Transfer) is an architectural style for the web application.
A restful web service is nothing but a service that follows the below six important constraints that defines a rest architecture.

Client Server Separation

The Client and Server has individual responsibilities to do. The client's involvement is not needed for the server to perform any of its task and vice versa. So they are independently serviceable .

Stateless Communication between client and server

The client sends any request to the server with all the information embedded within the request itself
and the server provides the response based on the request and no state is maintained i.e no other information is retained by either the client or the server.

Cache-able

The response from server should indicate to the server if the information is cache able or not. This way the client can use the cached data and need not request the server for repetitive data.

Code on demand

The Server can optionally send piece of code to the client, where it can be executed in order to extend the functionality of the Client.

Layered System

The Rest based system can have multiple layers in it, including the client and many layers of server.
But each layer has knowledge as well as interaction only with the adjacent layers.

Uniform Interface

Interface separates from implementation and this is accomplished with the below four sub constraints of any rest architecture.

Resource Identification

The action of sending requests and receiving responses done by the client acts as an interface for the restful architecture. The request to get any resource is identified by the URI and the response is always received in any of the formats like HTML, JSON and XML. This doesn't have any dependency on how the data is stored or manipulated on the server side, which is considered as the implementation from server end. In this way, this constraint allows to achieve the Uniform interface constraint.

Operation control of resources by client

The client can perform any change to the resources on the server with the help of the HTTP methods and URI.

Independent messages

Any request sent by the client doesn't have any dependency on any other requests generated by the client. Each request is complete on its own to get the necessary response from the server.

HATEOAS (Hypermedia as the engine of application state)

This constraint provides a paradigm that whenever a client sends a request to the server, the server should provide not only the requested information, but all the possible related end points in the form of links to the client.