Step by Step - foundation

Responsive Site Designer Tutorials

How I use RSD foundation with step by step instructions


Use the step by step to build from the site
download the completed zip file or
save the tutorial text file to try them later


Off Canvas Menu

This is the menu I'm using here. An off canvas side slide in panel with an accordion menu from a fixed icon.

Off CanvasExample

Dropdown Menu

A dropdown UL bar from a hidden accordion style menu that opens from an icon for mobile


Button Menu

Horizontal button bar from a vertical stack of hidden buttons that open from an icon for mobile



Smooth Scroll

Scroll from a linked
element with an added
attribute to an ID

Smooth ScrollExample

Button Dropdown

Making a button on hover
dropdown a pane
with buttons in it

Button DropExample

Thumbnail Pop Up

Thumbnail modal image
pop-ups with text 
and animations

Thumbnail Pop UpExample

Orbit Slideshow

Image carousel
with animations
and customizable

Orbit SlideshowExample


jQuery Page Scroll

Uses a script to
automatically find the
link to the ID

jQuery Page ScrollExample

Image Gallery 1

Thumbnail gallery
with a description
Uses one image 

Image Gallery 1Example

Image Gallery 2

Thumbnail gallery with
caption and image text
Uses two images 

Image Gallery 2Example

Fade Slideshow

A fading
using jQuery

Fade SlideshowExample