Zurb Foundation Development

Zurb Plugin Working Example

You’ve read the Zurb 6 plugin introduction. You’ve read the documentation. You want to develop your own plugin, but you still have questions or want to see a working plugin example. This article demonstrates a working Zurb blink tag plugin. Remember these from the old Netscape days? It’s nothing elaborate, but hopefully it will help get you started. You can jump right to the working example or follow along below.
Read More...

Zurb Foundation 6 Compatibility and Accessibility

Accessibility and compatibility are difficult to write about. Neither are a day in, day out concern for the average developer. Most of the time we do not worry about either until the very end of a project or worse, after a release to production.
Read More...

Zurb 5 Sticky Topbar Performance

While profiling our Zurb 5 implementation, we noticed a slight bottle neck using the “sticky” topbar component. The user would sometimes experience a “stutter” or “glitch” while scrolling. And users with lower end devices would experience the issue more often.
Read More...

Zurb 5 IE Dropdown Jump Prevention

Internet Explorer likes to “jump” the user into position when jQuery’s .focus() is called within a Zurb 5 dropdown. I don’t like this. Notice in the video below that when the dropdown is positioned at the bottom of the screen, and the user selects a dropdown, their positioning “jumps” up. And then the dropdown disappears (this is a separate unrelated scroll handler issue).
Read More...

Zurb Foundation 6 Pricing Table

Zurb’s Foundation for Sites 6 no longer includes a Pricing table component. No problem. Let’s put a Pricing table in the Zurb 6 pipeline. They are great for marketing landing pages, product signups, and subscription or product comparisons. Unfortunately, I saw a few people on the interwebs indicate Zurb 6’s lack of Pricing tables a show stopper; preventing their move from Zurb 5 to Zurb 6. At the end of the day, regardless of version, Zurb Foundation is still CSS, HTML, and Javascript. And both Zurb 5 and Zurb 6 utilize Sass; although some Scss variables have either changed, were made obsolete, or flat-out no longer make sense. After utilizing the code and instructions below, you will end up with a Zurb 6 responsive Pricing table.
Read More...

Introducing Zurb Foundation 6 Plugins

Zurb Foundation for Sites 6 allows you to design and develop your own custom responsive plugins. As previously mentioned in What’s new in Zurb Foundation 6, plugins help facilitate consistent integration and enable extensibility. Foundation comes with several out of the box plugins such as accordion, dropdown, menu, reveal, slider, and tooltip. Foundation is great at getting you most of the way there, but sometimes it is not enough. Your project or client may require more specific functionality. However, Zurb has deemed these too broad to include in the base framework. This is fair. Most frameworks work this way, at least in the beginning. jQuery, Java, and Microsoft .NET have ballooned in size with features that most of us never use. Worse, it’s difficult or near impossible to cherry pick only what you need. Unfortunately, it can be all or nothing, but I digress.
Read More...

What's new in Zurb Foundation 6?

Initially released in November 2015, Zurb’s Foundation for Sites 6 brings some new features, functionalities, and concepts. This post assumes you have some prior Foundation experience: if you’re a newbie, hopefully it will at least shine some light on the framework and tools, and provide a general overview of what to expect.
Read More...

Windows 10 Universal App WebView Transition Flicker Prevention

Currently, I am developing a Windows 10 Universal App that utilizes a WebView, Knockout Js, and Zurb Foundation. Yeah, I know nothing earth shattering.
Read More...