Basic snippet to get started with Zurb foundation 5

foundation-basics

What exactly is CSS Framework?

There is no point reinventing the wheel again or writing all the basic code required to run website again. CSS Framework is collection of stylesheet, couple of HTML pages along with Javascript file that together can help you quickly prototype web page.It reduces the front-end development website. As the Framework is already tested on various platforms and devices so you will be sure that your web page will not break on them.

I’ll explain basic of HTML, CSS here in this post.Here are prerequisite required to get going

  • You know what CSS and HTML is and it will be helpful if you have hands on practical experience
  • Downloaded the required files from  Zurb Foundation site on your PC and “localhost” is running.
  • Know what responsive design is.
  • Web browser any will do even IE but we don’t recommend for obvious reasons.
  • Code editor no no not the notepad or Dreamweaver,Sublime Text or Notepad++ is preferred.
Lets get rollin’

We will try to build 2 column layout.Header, footer, side menu, main content area.

2-column1

 

At this moment you should have foundation files in your localhost folder.If everything  is fine  point your browser to

http://localhost/foundation-folder

and you should see Welcome to foundation page in your browser.Now open index.html in your editor and change the content betweentag.

Now try reducing the size of your browser and you will notice webpage is totally responsive. See  you just nailed responsive design with just few lines of code and Was it difficult? absolutely not. It is incredible easy to create  quick prototype using foundation but hold on its just the bare bones.to help you get going  we have handy code snippets of foundation 5 you can read it here – Quick guide to Foundation 5 : Handy code snippets