Zurb Foundation

Zurb foundation With Angular CLI

March 28, 2017 by Chris Sherman

Create a new Angular CLI project with the SASS style option:
ng new my-foundation-app --style=sass cd my-foundation-app

Continue reading

Sticky Foundation Alert Elements

March 11, 2015 by Chris Sherman

Zurb’s Foundation front-end framework comes with built-in alert elements you can drop into a page, but my guess is you’ll want to make them sticky (fixed to the top of the view). To accomplish this behavior, we just need to add a bit of CSS.

Continue reading

Integrate Foundation Abide Validation with Razor HTML Helpers

March 10, 2015 by Chris Sherman

Razor HTML Helpers are convenient methods that return HTML strings representing different types of content. In this tutorial I’ll explain how to extend the Razor validation message helper so it integrates with Foundation’s Abide Validation library.

Continue reading

Inverse Foundation Top Bar to Light Background

February 26, 2015 by Chris Sherman

Foundation 5 ships with a dark navigation bar and, unlike Bootstrap, does not have a class to quickly inverse the color scheme. To change the Foundation Top Bar to dark text on a light background, open the _settings.scss file and replace the Top Bar variables section with the settings below.

Continue reading

Razor Paging

February 25, 2015 by Chris Sherman

When you have large numbers of a particular object, it can be beneficial to add paging to limit the number of instances displayed. In this tutorial, I’ll demonstrate a Razor paging implementation that you can use with the Umbraco CMS as well as other projects that make use of Razor.

Continue reading

Use Font Awesome with Foundation

December 23, 2014 by Chris Sherman

Font Awesome has a massive collection of icon fonts and is widely used across the web. You may wish you use it in place of the Foundation font library, and in this tutorial I will explain how. I will assume you have followed the instructions for installing Foundation as a Libsass project.

Continue reading

Responsive Image Reflow Solution

December 22, 2014 by Chris Sherman

Have you ever visited a website and started scrolling down the page only to have the content suddenly jump? You lose your position on the page and are left to search up and down to find your place again. For devices with slow connections, this can occur multiple times, becoming especially frustrating.

Continue reading

Create an Overlay Image Caption for Foundation

December 19, 2014 by Chris Sherman

If you’ve used Foundation’s Orbit image slider, you have seen the clean, opaque captions the JavaScript overlays on your images. Unfortunately, the framework doesn’t provide styles for overlaying a similar caption on images that do not utilize Orbit. Let’s go ahead and add this.

Continue reading

Configuring a Foundation Libsass Project

December 18, 2014 by Chris Sherman

Setting up Foundation as a Libsass project can be confusing, especially if you’re not familiar with Node, Grunt, Bower and Git. I found quite a bit of discussion on how best to go about configuring everything but no definitive answer bubbled to the surface. In the following tutorial I’ll provide a set up that’s worked for me.

We’ll begin with a freshly created, Foundation Libsass project. The Foundation documentation does a good job explaining how to set this up, so I’ll refer you to that if you need instructions.

Continue reading

Tips for Using Foundation's Interchange

December 17, 2014 by Chris Sherman

Foundation’s Interchange is a responsive content solution that enables resource requests to adapt according to available screen real estate. Images are a particularly applicable use-case for Interchange since a massive, landscape photo doesn’t have the same effect on a phone as on a 27-inch monitor.

Continue reading