Foundation tutorials


May 04, 2021 10:00 Foundation5


Table of contents


Foundation 5 tutorial

Foundation tutorials


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 >

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

Foundation tutorials

Try it out . . .


Form:

Foundation tutorials

Try it out . . .


Picture Bounter:

Foundation tutorials

Try it out . . .


Warning:

Foundation tutorials

Try it out . . .



Grid:

Foundation tutorials

Try it out . . .


Progress bar:

Foundation tutorials

Try it out . . .


Panel:

Foundation tutorials

Try it out . . .


Drop-down menu:

Foundation tutorials

Try it out . . .


Accordion effect:

Foundation tutorials

Try it out . . .


Top navigation:

Foundation tutorials

Try it out . . .


Modal box:

Foundation tutorials

Try it out . . .


Switch:

Foundation tutorials

Try it out . . .


Slider:

Foundation tutorials

Try it out . . .