10 Essential Zurb Foundation Snippets



Zurb's popular Foundation 5 framework is a very useful tool for quick, consistent responsive design. Here are some useful code snippets, including navs, forms and cards for your next Foundation based project.


Justified Navbar

Here's a snippet showing a top-nav with centered links that expand the full width of the navbar. It includes a simple CSS override using flexbox to stretch the nav links.

Code: http://codeply.com/go/YsvD6r7Y32


Sticky Navbar

This sticky nav pins to the top once the page is scrolled past the top header.
Foundation sticky top-nav Code: http://codeply.com/go/BEfGlQL5b2


Sticky Footer

The snippet will show you how to create a footer remains at the bottom of the page even when page content is too short to push it down.

Code: http://codeply.com/go/Jl9tlvpwTM


Off-canvas Sidebar

Here's a sidebar menu snippet that collapses to the left side and can be toggled using the hamburger icon.
Foundation responsive sidebar Code: http://codeply.com/go/Ybz46Vkf3l


Nested Accordion

This snippet demonstrates a multi-level nested accordion with expanding options.
Foundation accordion Code: http://codeply.com/go/gKgnaLsSWD


Credit Card Form

Here's an example of a basic credit card payment form with cc number, name, cvv code and exp date.
Foundation payment form Code: http://codeply.com/go/Rp8JNUDGaT


Login Form with Tabs

This snippet shows how to make a tabbed component that enables the user to switch between the login and registration forms.

Code: http://codeply.com/go/1eK1ltMYAx


Simple Contact Form

A basic form snippet with name, email, URL and textarea message fields.
Foundation contact form Code: http://codeply.com/go/Cy451BxR83


User Profile Card

A card snippet using Foundation panels. This has a little custom CSS for the circle thumbnail user profile image.
Foundation cards Code: http://codeply.com/go/6MvmBNcfOz


Pricing Tables

Here's an example of responsive equal height pricing tables using the Foundation Equalizer component.

Code: http://codeply.com/go/umDMSDFrkG


If you're looking for more Foundation snippets, check out Codeply which includes more Foundation snippets integrated with the HTML/CSS/JS editor. Get Started with Foundation on Codeply.