Foundation 5 Tutorial
Foundation is used to develop responsive HTML, CSS, and JavaScript frameworks.
Foundation is an easy-to-use, powerful, and flexible framework for building web applications on any device.
Foundation is a popular mobile-first framework.
Online Examples
Example Tutorial contains hundreds of Foundation examples.
You can use our online editor directly and click the "Submit and Run" button to see the result:
Foundation Examples
<div class="row">
<div class="medium-12 columns">
<div class="panel">
<h1>Foundation Pages</h1>
<p>Resize the window to see the effect!</p>
<button type="button" class="button small">I am a button!</button>
</div>
</div>
</div>
<div class="row">
<div class="medium-4 columns">
<h3>Example</h3>
<p>Learning is not only about technology, but also about dreams!!!</p>
</div>
<div class="medium-4 columns">
<h3>Example</h3>
<p>Learning is not only about technology, but also about dreams!!!</p>
</div>
<div class="medium-4 columns">
<h3>Example</h3>
<p>Learning is not only about technology, but also about dreams!!!</p>
</div>
</div>
Try it Yourself »
Click the "Try it" button to view the online example.
Foundation Features
The following effect is a demonstration within an iframe tag; you can click "Try it" to view the online example:
Button
Table:
Image Popup:
Alert:
Grid:
Progress Bar:
Panel:
Dropdown Menu:
Accordion effect:
Top Navigation:
Modal:
Switch:
Slider:
other extensions