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.
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.
This sticky nav pins to the top once the page is scrolled past the top header.
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.
Here's a sidebar menu snippet that collapses to the left side and can be toggled using the hamburger icon.
This snippet demonstrates a multi-level nested accordion with expanding options.
Credit Card Form
Here's an example of a basic credit card payment form with cc number, name, cvv code and exp date.
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.
Simple Contact Form
A basic form snippet with name, email, URL and textarea message fields.
User Profile Card
A card snippet using Foundation panels. This has a little custom CSS for the circle thumbnail user profile image.
Here's an example of responsive equal height pricing tables using the Foundation Equalizer component.
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.