Foundation Tutorials

Foundation 5

Foundation for the development of responsive HTML, CSS and JavaScript frameworks.

Foundation is an easy to use, powerful and flexible framework for building Web-based applications on any device.

Foundation is a popular framework to move priority.


Online examples

This tutorial contains hundreds Foundation instances.

You can use our online editor, and click "Submit Run" button to see the results:

Examples Foundation

<Div class = "row">
<Div class = "medium-12 columns">
<Div class = "panel">
<H1> Foundation Page </ h1 >
<P> Resize this responsive page to see the effect! </ P>
<Button type = "button" class = "button small"> I Like It! </ Button>
</ Div>
</ Div>
</ Div>

<Div class = "row">
<Div class = "medium-4 columns">
<H3> Column 1 </ h3 >
<P> Lorem ipsum /en </ p>
</ Div>
<Div class = "medium-4 columns">
<H3> Column 2 </ h3 >
<P> Lorem ipsum /en </ p>
</ Div>
<Div class = "medium-4 columns">
<H3> Column 3 </ h3 >
<P> Lorem ipsum /en </ p>
</ Div>
</ Div>

Click the "Try" button to view the online instance.


Foundation characteristic

To demonstrate these effects in an iframe tag, you can click "try" to view online examples:

Push button


form:


Image pop:


caveat:



grid:


progress bar:


panel:


Drop-down menu:


Accordion effect:


Top Navigation:


Modal box:


switch:


Slider: