Foundation tutorials
May 04, 2021 Foundation5
Table of contents
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 apps based on any device.
Foundation is a popular framework with mobile first.
Online instance
This tutorial contains hundreds of Foundation instances.
You can view the results directly using our online editor and clicking on the "Submit Run" button:
Foundation instance
<
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.. < /p >
< /div >
< div class= "medium-4 columns" >
< h3 > Column 2 < /h3 >
< p > Lorem ipsum.. < /p >
< /div >
< div class= "medium-4 columns" >
< h3 > Column 3 < /h3 >
< p > Lorem ipsum.. < /p >
< /div >
< /div >
< 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.. < /p >
< /div >
< div class= "medium-4 columns" >
< h3 > Column 2 < /h3 >
< p > Lorem ipsum.. < /p >
< /div >
< div class= "medium-4 columns" >
< h3 > Column 3 < /h3 >
< p > Lorem ipsum.. < /p >
< /div >
< /div >
Try it out . . .
Click the "Try it" button to view the online instance.
Foundation features
The following effect is a demo in the iframe tab, you can click "Try" to view the online instance:
Button
Form:
Picture Bounter:
Warning:
Grid:
Progress bar:
Panel:
Drop-down menu:
Accordion effect:
Top navigation:
Modal box:
Switch:
Slider:
