Posts About Foundation sticker Foundation
Foundation sticker
Posts About Foundation

How Design Insights Transformed Foundation Building Blocks

John wrote this on May 26, 2017 in . Share this Post

Foundation started out as an internal tool to help our team build cutting edge applications for our clients more quickly. Little did we know, it would blow up to be one of the most popular open source projects ever, accelerate the adoption of responsive web design, and power hundreds of thousands of brands all across the world. We're proud that Foundation has become a leading voice helping shape where the web is heading. However, through our constant conversations with students, the community, and Yetinauts, we discovered that many users were not harnessing its full power.

A Clear Purpose Drives Meaningful Design

So when we asked ourselves, 'What's next?' Giving users more access to Foundation's power was front and center.

Of course, it will always be important to keep growing the power of Foundation to fulfill ZURB's mission of changing the way people design connected products and services. However, to get there we realized we needed to empower a new generation of web developers to engage with the platform so more people can contribute to, and benefit, from its power.

In short, we wanted to make it easy for anyone to quickly and easily build world-class web products, and share their best practices so the entire community can grow from their hard-won successes.

The Right Challenges Frame The Right Conversations

There were some BIG challenges.

First, only a small subset of users were taking full advantage of Foundation's power. Our client work showed that this was a problem many companies struggle with, and few solve well.

Secondly, sacrificing robustness in the pursuit of learnability was out of the question because what makes Foundation special is that it is the world's most advanced front-end framework.

And finally, the experience of using Foundation needed to stay a focused one. Through the years, client after client have expressed how they tried to serve multiple audiences and ended with a splintered, compromised experience they need our help to re-strategize.

Design Insights Reveal User Behavior and Drive Bold Decisions

To solve these challenges, we did what we do best and got outside the design bubble to talk to users. Through these conversations, we found pivotal Design Insights:

  • When users are able to quickly find code snippets that closely match their project type, they are much more likely to adopt Foundation into their workflow.

  • When technical contributors in the Foundation community are able to contribute using public repositories rather than proprietary platforms, they contribute with higher frequency, and with a greater sense of ease, transparency, and power.

  • Because of the breadth of project types users work on and the infinite nuances in each, components that were flexible are more likely to to used by a larger audience.

  • Because users typically look for components during their build process and there is scarcity of time, only components that immediately fulfill a need with minimal effort are used.

  • When new users of Foundation saw examples of components built with Foundation, they understand the product better and start incorporating it more quickly.

Opportunities Bridge Design Insight and Design Innovation

With these insights in hand, we found key organizational strengths that would drive the product direction. Our diverse client work gave us a treasure-trove of the most common and up-to-date web design patterns. Internally, there is an amazing and committed Foundation community ready to support the tools they love. And within the framework itself, styling was largely done on a system-wide scale, which lent easily to creating assets that were transferrable without breaking styling rules.

Powerful Building Blocks Turns Learners into Pros, Pros into All-Stars

After weeks of ideation and prototyping, Foundation Building Blocks was launched. Building Blocks are designed to be quick, plug-and-play components meant to speed up any project. Because users need to see how they would fit, they're organized by how they might function within a particular project. Users can promote and find the best Building Blocks by liking specific Building Blocks and sharing it with others. To give credit where it was due, each building block card and page has large Building Block images and visual links to users' GitHub profile. Lastly, the flow is built around quickly grabbing and plugging in complex objects into live project, creating the perfect experience for the mid-project learner.

Project-Specific Kits Kickstart Rapid Prototypes and Rapid Learning

While Foundation Building Blocks speed up projects mid-flow, Foundation Kits was launched as sets of curated Building Blocks meant to help any user get up and running with rapid prototyping in any situation. To make it as useful as possible to as many people as possible, Kits are organized around the most common project types in our 20+ years of client experience, with only Building Blocks that lived up to the best in web usability being included. And the best part - anyone can get started using Kits within 5 minutes of exploration.

Meaningful Metrics Validate Product Direction

As Foundation Building Blocks and Foundation Kits launched, the initial feedback from our community was positive in helping keep the power of Foundation while making it easier for anyone to use:

  • A site that would've normally taken experienced web designers a day to fully scaffold now took less than 15 minutes.
  • Students in our Intro to Foundation course consistently expressed how much they were able to learn the basics of Foundation and move onto more advanced projects.
  • Within the first month after launch, 20% of the Building Blocks were built by members of the community.

Foundation was created to help our team design better, and went on to help millions of designers and developers create amazing things. Foundation Building Blocks worked in reverse. We thought we were building something for our community, and ended up with a resource that has helped us deliver some of our best work ever to our clients. That's the amazing thing about Foundation, that it empowers a whole community, and that community empowers us to make even better tools.

We're thrilled to work with our wonderful community to keep pushing it forward and breaking new boundaries! And this is only the beginning. Check out the Foundation Building Blocks site and see how it can revolutionize your workflow.

The New Foundation Docs: Learn Your Way

Danny wrote this on May 17, 2017 in . Share this Post

Whether for internal use or for an open-source project, most programmers hate writing technical documentation. Not just dislike, hate. They hate it. And because they hate it, it usually isn't very good. It can be hard to follow and incomplete, which is irritating to experienced devs and causes panic attacks for newbies just trying to learn something. RTFM, or Read the F@$%& Manual, is an expression commonly thrown at people trying to learn some new coding language or technology, but how can they if nobody wants to WriteTFM?

But even if a developer or team wants to create good documentation, it will inevitably fall short because not everyone learns best through reading. Many people are visual learners, and even more learn best through the act of doing. Docs do nothing to engage those two groups of people.

As the creators of some of the world's most popular open-source projects that incorporate other technologies and integrate with dozens more, we've both felt the pain of combing through terrible documentation to try and learn something and the pain of writing comprehensive docs for our own projects. We believe technical documentation can be much better, so we set out to reinvent the very idea of what documentation is and how it could be done with the new Foundation docs.

The new Foundation docs was designed to help people learn through Reading, Seeing, and Doing:

  • Videos demonstrating how to use each component - Each and every component has an easy to follow video walkthrough.

  • Live demos to play with in real time - Quickly experiment with and edit components without having to setup a full install on your machine with our live CodePen demos.

  • Easy to understand descriptions - We've rewritten all of the descriptions to be clearer and more concise than ever.

In addition to all of these new features, the interface has been streamlined to be easier to navigate and find what you need. It's technical documentation without the frustration, with easily digestible content for each of the three learning types. Welcome to the new Foundation Docs.

Combined with our recent Foundation Building Blocks release, we've made a huge investment in helping both veteran Foundation users and newbies better harness the power of Foundation!

Check out Foundation Docs!

Foundation Building Blocks: Over 100 Components to Jump Start Your Projects

Danny wrote this on April 13, 2017 in . Share this Post

The Foundation team has cut your development time in half again. Today we're thrilled to share Foundation Building Blocks with you- a comprehensive, open-source library of coded UI components you can drop into any standard Foundation project to give yourself a massive head start in your projects.

Hundreds of Coded UI Components for Your Foundation Projects

The Foundation Building Blocks library has been rebuilt from the ground up with over 100 code snippets in six categories including Navigation, Status, Control, Media, Containers and Form components. Built by the ZURB team, these are the most common and useful design patterns and UI components we've found in our two decades of web development work. Just browse the library, select the Building Block you need, and copy and paste the code into your project.

Powerful Kits to Help You Build A Diverse Range of Sites

Download ZURB-curated bundles of Building Blocks called Kits that are organized by project type so you have exactly what you need to build specific kinds of websites and apps. There are seven kit types available including Blog, Portfolio, Ecommerce, Marketing, Dashboard, Mobile App, and Travel - each containing the specific mix of Building Blocks you'll need to complete your project. Unlike a template, a kit doesn't dictate a page layout or design, but rather gives you a set of ready-to-use components that integrate naturally into your design.

Components Created by the Global Foundation Community

Battle-tested by designers and developers around the world and reviewed by ZURB, the Foundation Building Blocks library will continue to expand with components created by the Foundation community. Have an idea for component or pattern? Submit it using our easy to follow guidelines and it will be reviewed by the ZURB team and made available to the community.

Code That Will Cut Your Development Time in Half

Building Blocks are specifically built for Foundation projects, which means you won't need to worry about compatibility issues or dependencies. You won't find any pointless experiments or explorations, either. Instead, you'll find real, usable, and practical components every designer needs based on our two decades of designing for the web.

Both Kits and Building Blocks can be easily downloaded from the website. You can also copy and paste individual Building Blocks into Foundation projects. After installing the new 2.2.0 version of the Foundation CLI, Building Blocks and Kits can even be downloaded and installed automatically into ZURB stack projects, available instantly as ready-to-use partials. Simply run npm install -g foundation-cli@2.2.0 and then foundation kits install <kitname> in any project for Kits or foundation blocks install <blockname> for individual Building Blocks.

We've been using Building Blocks internally in our client work to give ourselves a head start in our projects, and we've seen our development time cut in half. We're excited to see the Foundation Building Blocks library continue to grow with new Building Blocks and Kits from the ZURB team and our amazing community of Foundation users!

Check out Foundation Building Blocks!

Foundation & CSS Grid: Think Beyond the Page

Danny wrote this on March 13, 2017 in . Share this Post

There's a revolution happening right now. The way we think about and design websites is going to change again. Old conventions and methods are being replaced by exciting new technologies that open up entirely new ways to design and build the web. And they're available today.

Out With the Old

Most early websites in the 90’s were little more than digital brochures, which makes sense since the web was born from the world of print. Our options as web designers for laying out content fell short of what was available to print designers for many years. Slowly but surely, our tools got better and we discovered new methods and techniques that allowed us to do some incredible things. The web came into its own, but the world of print still exerts its influence on the way many designers think. To this day we still call web files “documents,” arrange our content in “pages,” and try to fit the experience of users into sitemaps.

But pages are limiting. Pages are a convention of print- they don’t fit for the dynamic, interactive medium that is the web. Users don’t look at websites in some linear order, they journey through them, they explore through multiple pathways. We have a completely transformable, liquid canvas to paint this picture with, but we aren’t using it! The next decade will see more customization, personalization and predictive technologies that make the content and presentation fully dynamic. The factory line, widget production line mentality no longer applies- each user can have a unique experience.

In With the New

Over the last two decades, ZURB has pushed the web forward through our design work, and wth Foundation, the world’s most advanced front-end framework. Foundation was designed to help people take full advantage of the power of the web. It was the first framework to give designers a responsive grid to work with, the first to be mobile-first, the first to be semantic, and the first to be constructed with Sass, and the first to have accessibility built in to give designers and developers the tools they needed to make a user experience. Just last year, Flexbox was added to expand layout options even more. And we’re continuing to bring technology advancements to you. We're excited about a new technology that we think has the power to dramatically change the web, a technology that finally transform websites into the completely moldable, interactive, and customizable experiences we have always envisioned they would be. That technology is CSS Grid.

CSS Grid is a pure-CSS implementation of a grid layout. It enables truly 2 dimensional layouts of all sorts using dramatically less markup than previous tools. What’s more, because it pure CSS, it is all easily changeable with media queries. This means that designers can create layouts and components that are responsive to browser size in radically new ways - layout changes that previously required JavaScript and complex logic to manipulate structural elements can be done with simple CSS and relatively minimal markup.

We’ve been experimenting with the possibilities of CSS Grid for months, and we’re incredibly excited about what we’ve been able to achieve. Here are three Playground Pieces that demonstrate the possibilities of CSS Grid, each with huge ramifications for Foundation:

1. Foundation CSS Grid Examples

First, an exploration into the the possibilities of CSS Grid with Foundation. In this grid we explore three different possibilities enabled by CSS grid. First a responsive data component that uses tabular views where space permits, second a responsive navigation “mega menu”, and finally a complex layering of content that previously would have been complicated and fragile to implement. Each of these can be a new component within Foundation. These also highlight how with CSS-grid, we will be able to evolve even components that previously were dramatically different to morph into one another responsively.

Foundation CSS Grid Examples

2. Foundation CSS Grid + Container Queries

Next, we take one of these CSS-grid enabled components in Foundation and explore the possibilities that arise when combining it with another hot new technology: Container Queries. Container Queries take the concept of media queries and allow you to apply it to containers within a page - letting you truly create components responsive to the space available to them. In this exploration, we combine a responsive data view with an expandable navigation, using container queries to automatically adjust the data view based on the space available to it. While container queries do not yet have browser support, there is a first class polyfill and we are making them a first class citizen within Foundation.

Foundation CSS Grid + Container Queries

3. Foundation Grids within Grids

Finally, we take these concepts to the next level. Proponents of CSS Grid often talk about the page-level layout possibilities, but by combining CSS Grid with container queries we firmly believe that we should be thinking beyond the page, and into nestable, reusable, grid-based components. In this final exploration we explore the possibilities of nesting grid based components with Foundation, with the inner component able to move seamlessly between parts of the other grid, formatting itself intelligently based on the space available to it. Foundation’s grid has always been flexible, but with CSS Grid hitting browsers the potential to mix, match, and combine grids is quickly becoming a reality.

Foundation Grids within Grids

What CSS Grid means for Foundation and the Future of the Web

Foundation has always led the way for how the web is designed and built, and we’ve been preparing ways we can help you harness the power CSS Grid. We see a future filled with radically responsive components that morph and change depending on the circumstance or device. The development of CSS Grid will enable the very concept of grids to change from a massive structural choice to something more like components. Imagine having a set of grid components that allow you to get entire layouts and sublayouts right out of the box, and then nesting, combining, and recombining them.

Browser support for CSS Grid is exploding, with several adding support just this month:

  • Chrome. Enabled by default since version 57.
  • Firefox. Enabled by default since version 53.
  • Internet Explorer. Enabled by default since IE10
  • Opera. Enabled by default since version 44.
  • Safari. Enabled by default since version 10.1.

The term “web page” is starting to feel very, very... inadequate. CSS Grid opens up layout in ways that were not possible before, and our minds are racing with the opportunity in front of us. We hope these experiments will get you as excited as we are, and demonstrate a little of what’s possible with this new tool.

ZURB works with companies every day to help them reimagine the possible with regards to their web applications, websites, and products. Do you have a project that deserves to push the limits? Feel free to get in touch, we’d love to work with you.

17 Web Design Trends That Will Take Over 2017

Danny wrote this on March 10, 2017 in . Share this Post

Designers working on web projects in 2017, in some ways, face more challenges than ever before. They have to create engaging websites, apps, and services that work seamlessly across all devices and work for a global audience at a pace that seems to speed up every year. That audience too is more tech savvy, have higher expectations and are more design literate than ever before and expect near perfection. Faced with these challenges, it's more important than ever for designers to be aware of emerging trends, solutions and patterns that can help them solve common issues, capture the full attention of their audiences, and deliver amazing experiences.

Here at ZURB, we've helped hundreds of companies surface the best solutions and take advantage of new patterns in their websites and products. We've created this list of 17 design and development trends we think every designer should be familiar with to shape their 2017 and well beyond.

(In no particular order...)

1. Brutalism

Taking its name from the architecture style of the 60's and 70's, Brutalism in design consists of bold, in-your-face collages of text and images, where anything goes. Echoing the web from yesteryear, Brutalist sites often employ simple markup, inline styles, and harsh colors and gradients. Some even argue that Instagram's new(er) gradient logo could be classified as Brutalist, with it's 90's esque neon colors and gradient design.

Example of a Brutalist

Pascal Deville, an authority on the Brutalism trend, and founder of defines the movement as this:

'In its ruggedness and lack of concern to look comfortable or easy, Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today's web design.'

But not all Brutalist websites are an all out attack on the eyes. A few sites like Bloomberg News and borrow from the aesthetic while adding a level of polish not typically seen in most sites.

We think designers can use Brutalism to set their site apart from the rest with bold color choices, large typography, and layouts that break away from the common hero-image-then-3-up pattern.

2. Large Screen Design

When most people think of responsive web design, they think of shrinking a website down from a desktop to something that looks great on a tablet or mobile phone. But this is ignoring a growing segment of users, those that have large scale monitors. Yes, while mobile has certain exploded in popularity over the last ten years, so has extra large monitors with ever increasing pixel densities. The problem is that most focus has seemed to be on the smaller side of the spectrum with, few sites truly catering to their large screen users. By looking at your data, you may find that the majority of your users, or at least you're converting users are on displays of 1920x1080 or higher. There are a lot of cool and creative ways to use that kind of screen real estate and clever designers are not afraid to go big.

Apple is great example of large screen

We think designers should be well acquainted with the data and know exactly who their audience is and what equipment they're on. By using techniques like resolution independent SVG's, bold typography, and serving up either high or low resolution photos with JavaScript, they can deliver a rich experience for everyone, even those with massive screens.

  • SVG’s are perfect for large screen design because they are scalable, resolution independent, have small file sizes and are supported by most browsers. Here are 10 resources to learn more about them.
  • Targeting SVGs with CSS allows you to do cool things like using media queries to hide and reveal parts of an image by screen size. Check out our lesson to learn the basics.
  • The Interchange component in Foundation uses media queries to load the images that are appropriate for a user's browser, making responsive images a snap. It decreases the load times for mobile users while still serving the bigger content to your visitors with higher screen resolutions. Learn how to use it.

3. Responsive Components

It's been nearly 8 years since Ethan Marcotte introduced the concept of responsive web design to the world, and we've seen it develop at an incredible pace. There are new techniques and technologies on the horizon though, that are going to dramatically simplify the write of responsive elements and make today's responsive sites look simplistic and naive. Some examples are element queries and the upcoming CSS-grid spec. These two technologies will enable web designers and developers to create experiences that are truly tuned to every device size. Element queries will allow creating components that are responsive based on the space allotted to them rather than the full screen size, while CSS-grid allows us to dramatically change layouts based on media queries.

Between the two, we believe we will see dramatic increase in the diversity of responsive patterns easily available to designers and front-end developers.

4. Device Specific Microinteractions

Up until now, the mobile-first method has meant building a slick and usable experience for small screens, and then layering in more complex interactions and animations for the desktop. But as mobile web tooling mature and mobile traffic eclipses that on desktop, we think there is a ton of opportunity to take advantage of the native paradigms of different devices for mobile-focused interactions. With the rise of touch and gesture related JavaScript libraries, there is a ton of opportunity for subtle animations in response to gestures (e.g. the Twitter mobile app's tweet refresh interaction) to make their way into more and more web applications.

As Nick Babich pointed out in a recent post on Medium, microinteractions provide users acknowledgement they crave. Popular apps like Slack have skillfully weaved them throughout the entire experience, delighting users and making the app feel more intuitive.

By taking advantage of whatever is available to them, device specific microinteractions will only serve to make microinteractions more compelling and personal.

  • Learn the basics of microinteractions, why they’re important, and how to use them.
  • Playing around CSS animations and transitions can help you build and test some neat microinteractions. Here’s a few techniques.

5. Split-screen Design

A simple way to highlight a contrast, balance text with images, or share two different products, split-screen design has grown in popularity with many designers. Easy to implement, split-screen design is a great way to present content in a way that feels fresh and balanced. For products or sites that require a comparison, split-screen design is a no brainer.

Example of split screen

We've seen some really creative uses of split-screen design, and we think people are only beginning to scratch the surface. We're looking forward to new ways this pattern can be used to tell a unique story and guide users.

6. Reactive Animations

The explosion of native mobile apps this decade put a spotlight on human centered design. Apple's iPhone and iOS were breakthroughs in part because of the way they used design to mimic humans and appeal to emotion. How good a design looks now plays second fiddle to the way it feels. While mobile apps have been the driver of these breakthroughs, desktop experiences have still felt clunky and unintuitive. But advances in desktop browsers, JavaScript, and CSS variables, have made it possible to add those human focused interactions in really compelling ways.

We think we'll soon see more technologies that push what's possible in the browser, led by animation heavy interactions.

  • Our Reactive Listener playground piece is a great example of how reactive animation can be used to highlight content to users even before they take action.
  • By harnessing the power of JS and a little CSS, combined with the capabilities of modern browsers, we can deliver experiences that are responsive, fluid, react to user input and give native mobile apps a run for their money. Here are 10 resources to start with.

7. Refreshing Card Based Interfaces

While cards have been around for years, they are a solution that is not going away anytime soon. A pattern tailor made for responsive web design, they make it easy to display large amounts of information in a way that is easy to browse and simple to implement. In recent months, we've seen them used for more than text and links, becoming hubs of all kinds of rich media. Designers are playing around with rich microinteractions within cards themselves, and are finding ways to make this old pattern new again.

Google cards

We see no reason to abandon tried and true patterns that solve common problems, and are excited about the new experimentation we're seeing with cards.

Download the PDF for 10 More Trends, Exclusive Resources and Tutorials

The world of the web moves at light speed. It requires designers and developers working in it to constantly soak up new information, techniques and strategies to stay effective and impactful. To help them stay up to date and on top of new trends and solutions, we publish Responsive Reading, an email magazine covering new developments in responsive web design each month. It's free to sign up, and if you join now you'll get a free copy of our 17 Responsive Trends PDF that contains all 17 trends along with links to resources, tutorials and articles that will help you implement these trends in your own projects today.

What's Underneath Matters: How MeUndies Increased Mobile Conversion by 40%

Ryan wrote this on March 02, 2017 in . Share this Post

Did you know that most men own at least one pair of underwear that's over 7 years old? We didn't' and we sort of wish that realization stayed hidden from us, to be honest. MeUndies, a company leading the movement in underwear innovation by providing comfortable everyday basics and a transparent shopping experience, gave us this fact. They recently started using Foundation on their site in an effort to boost their mobile sales, which constitutes most of their traffic and we wanted to share their story.

After 7 years, it was time for MeUndies to change their site's underwear, which is to say their code. See, the MeUndies site was beginning to boom on mobile, but they were losing sales by not optimizing the experience and ease of use for those mobile users. The team began to put their heads together and started exploring solutions.

What's underneath matters, something MeUndies knows all too well, so they chose Foundation as the basis for their new responsive website. With the decision clearly made, the MeUndies team put on their freshest pairs of undies for coding and got to work. Since they're a small start-up team of 2-3 people coding, they needed to be able to work quickly and effectively. It was an ambitious project, involving rebuilding their entire website, but Foundation made it easy for them to work at lightning speed. Within just 3 months they were able to build a beautifully responsive site with some especially slick interactions on mobile. 'How did this help them?' you may ask. Well, after they put a new, fresh pair of Foundation-woven underwear on their site to make it responsive, they saw a 40% increase in their mobile conversion! Now their mobile traffic is 60% of their sales. Just like on any third date, underwear was the closer.

MeUndies Mobile Website

According to MeUndies, Foundation is the best underwear they could have put on their site. What makes Foundation such a good pair though? Check out the case study to see how the MeUndies team cleverly swapped out a non-responsive grid for Foundation's and how they configured Foundation's components to do their bidding.

Check out the case study

If you're site is in need of a refresh, we encourage you to check out Foundation- don't wait seven years to change out your underwear or your site's code! Hey and guess what? MeUndies was so happy with Foundation they wanted to give back to you, the community, by giving what they know best: undies!

We're partnering with MeUndies to give one lucky winner a pair of underwear for each month of the year - that's 12 pairs! All you need to do to enter is sign up for our email newsletter and you're entered in to win. Not only will you be entered into the giveaway, but you'll also stay up to date with all the latest updates and news from us and on Foundation. That way, you can get the freshest code possible on your site, to always keep it fresh, clean, and sexy. So, open up those drawers (or terminals), throw out your old underwear and get a fresh new pair now!

Enter to Win!

Official Contest Rules

Foundation 6.3 Brings Mutation Observers Out Of The Shadows

Kevin wrote this on December 20, 2016 in . Share this Post

Mutation, it is the key to our evolution. It has enabled us to evolve into the dominant species on the planet. This process normally takes thousands and thousands of years. But every few hundred millenia, evolution leaps forward. - Professor X (Marvel's X-Men Comic Book Series)

If you believe the Marvel comic books' records, over 5000 years ago the first mutants appeared on this earth. Apocalypse arose in Egypt, with great power but the unfortunate tendency to wreak havoc on his surroundings. This was strikingly similar to the rise of the original Mutation Events for the browser. Added to the DOM Events Level 2 spec back in the year 2000, they were the first to give true JavaScript access to DOM changes as they happened: wielding unprecedented power, but a little slow, and with the unfortunate tendency to wreak havoc on your web application due to a multitude of browser bugs.

Marvel Comics Super Villain ApocalypseOscar Isaac as "Apocalypse" in 'X-Men: Apocalypse.' 20th Century Fox Film

Following along the history of the Marvel Universe, there was a long period of time with no change in the world of Mutation... the DOM Events Level 3 spec deprecated Mutation Events but there were no major changes from 2000 until the arrival of the DOM Events Level 4 spec in 2013, where Mutation Observers were introduced.

As with the proliferation of observed Mutants in Marvel's universe during WW2, the re-instigation of the Browser Wars in the early 2010s resulted in the rapid spread of Mutation Observers throughout the web ecosystem. First showing up in Safari, Chrome and Firefox in early 2012 (before the public spec was drafted!), they rapidly arrived in iOS Safari (January 2013), Opera (July 2013), Internet Explorer (October 2013), and Android Browser (December 2013). They are now widely enough spread that we are able to more or less count on their presence throughout the web, and they have been added to Foundation in the 6.3.0 release.

Foundation's First Mutants

The first steps towards the true integration of Mutation Observers were submitted as a pull request by Corey Snyder on August 18, 2016. This pull request started out simply by creating the infrastructure we need to take advantage of this new capability throughout the framework. By adding a data-mutate attribute and some automatic listeners and triggers, we began to lay the groundwork for our Mutant future. Like Professor X setting up Xavier's School for Gifted Youngsters, this utility gives us the ability to begin teaching ALL of our Foundation components how to work with and understand Mutations.

The key to understanding this is to understand what a Mutation Observer is, and how it works. Mutation Observers allow JavaScript to "subscribe" to changes in particular elements of the DOM, having the browser update them whenever those areas change. There are many different ways this can be useful, so let's start outlining what those are.

Building and Distributing Cerebro

Image of Professor X in CerebroPatrick Stewart as "Professor X" in 'X-Men.' 20th Century Fox Film

The primary use case for Mutation Observers is for elements that need to understand something about their children (the elements they contain) in order to properly render or behave. For example, the Equalizer component depends on understanding the sizes of all of the different sub-elements that it is equalizing. Prior to utilizing Mutation Observers, if those sub elements changed, the Equalizer component would break, unless you as a user manually told it to reinitialize. What the [data-mutate] attribute allows for is to have the Equalizer component AUTOMATICALLY notice when those subcomponents change and reinitialize itself to adjust. This is kind of like the Cerebro machine used by Professor X - adding a [data-mutate] attribute amplifies the abilities the Equalizer component already has and gives it the ability to be instantly in touch with changes happening in its children.

Many components such as Equalizer, Tabs, Interchange, Toggler, and Responsive Navigation have already benefited from the Mutation Observer infrastructure and in doing so have cleaned up and resolved many long-standing bugs. As we get deeper into this shift, one can imagine new possibilities of automatic adjustments and interacting components.

However, with great power there is great responsibility - it takes time, energy, and care to teach someone to use Cerebro - and simply slapping a 'data-mutate' attribute onto a component may cause more problems than it solves. Many of the components that will eventually benefit from understanding Mutation Observers still need work to make it happen. There's a catalog of ongoing efforts underway here, you can watch the progress or even jump in and help make it happen.

You Too Can Take Advantage of Mutation Observers

X-MenCast of 'X-Men: Apocalypse.' 20th Century Fox Film

One of the awesome things about integrating Mutation Observers into the Foundation Triggers utility is that it makes it much easier for YOU to take advantage of Mutation Observers. Simply add a [data-mutate] data attribute to any element in your page, and the Foundation Utilities will set up observers on the children of that element, triggering a 'mutateme.zf.trigger' event on any structural or stylistic change. With this infrastructure in place, Mutation Observers can finally follow Mutants out of the shadows, and into the key roles of society (aka application) where they can do the most good.

Check out the new Foundation 6.3 update to learn more about Mutation Observers and all of the other cool new features!

See what's in 6.3!

Foundation for Sites 6.3 - A Little Bit Naughty and A Whole Lotta Nice!

Danny wrote this on December 15, 2016 in . Share this Post

Holiday season has arrived and that usually means one thing' more gifts than you can shake a handlebar mustache at! The Foundation team, Yetinauts, and a whole lotta contributors have been hard at work on a huge update to Foundation that is stuffed to the brim with new goodies you're going to go nuts for. The best part? It's available for you to download today, whether you've been naughty or nice. You don't need to shake the box, we'll tell you exactly what's inside:

  • A new, bulletproof off-canvas: 6.3 includes an all new off-canvas implementation that adds features and improves performance over the existing version. Open from the top, bottom, side, you name it. It's even backwards compatible so you don't need to change any markup. Thanks for your hard work Brett Mason!

  • Cards!: After lots of debate and iterations we have added Cards to Foundation 6. Card based designs are perfect for responsive sites and make it easy to display a ton of information without overwhelming your users (as long as you use them correctly). Another awesome contribution by Brett Mason!

  • Responsive Accordion to Tabs: Tabs work great on larger screens but can be a mess on mobile. With this new update, you can switch your UI based on screen size from tabs to responsive accordions for a better experience on mobile. It's a breeze to implement and provide an awesome experience for your users. Thanks to designerno1, for this one!

  • Mutation observers: Foundation is the most advanced framework in the world for a reason. We're always looking to include awesome technologies that will help you develop faster. Mutation observers work behind the scenes and automatically detect DOM changes and triggers updates in components. This saves you manually having to Reflow elements to trigger changes in things like reveal modals, sticky bars, equalizer, and more. Shoutout to Corey Snyder for putting this one together!

  • Deep linking to Tabs: Deep linking has become one of the hottest topics on the web within the last few years and absolutely critical for eCommerce sites and mobile apps. Have specific content in tabs and want to send users to it? Now you can in 6.3 thanks to ahebrank.

  • Print Styling: Traditionally, printing a responsive webpage is very difficult. Foundation typically would only show the mobile screen, other frameworks throw up their hands, and you'd have to spend hours setting up a custom print stylesheet. In 6.3, you can specify exactly which breakpoint you want your print page to mirror, and Foundation will figure out the rest. Shout out to Andy Cochran for adding that!

  • Vertical Rhythm: Foundation has always made it easy to manipulate the sizes of your different types of headers and text, but to create strong vertical rhythm on a site you need more than this. With 6.3 the configuration of typography sizing, line height, and margins are all accessible in a single compact setting. Kudos to Karl Anders!

  • Flexbox Helpers:We've been using #FLEXBOX more and more recently, and getting more and more excited about using it for UI. In 6.3 we've added a bunch of new helpers that make Flexbox more accessible and easier to prototype with.

Yep, we're ending the the year with a bang, our biggest update since Foundation for Sites 6 was launched last year. It's also a fitting way to cap off Foundation's 5th birthday celebration. Thanks to all who contributed, Foundation is still the most advanced front-end framework in the world. We couldn't have done any of this without our awesome community of Yetinauts and contributors. So tear into the new Foundation for Sites 6.3 update today and let us know what you think!

Download Foundation 6.3!

Transformers, Components on Resize

Kevin wrote this on December 08, 2016 in . Share this Post

The new Transformers movie trailer just dropped to a surprising amount of fanfare. Regardless of how you feel about Michael Bay's metal clanking movie pantheon, you have to admit that at least the concept of robots beating the snot out of each other is pretty cool. In the series, a set of shape changing robot-beings invade earth and entangle humans in their battles in search of universal domination. In the web world we're fighting a similar battle, the proliferation of devices that have led to the rise of a set of shape changing components, entangling designers in their own search for universal domination.

Like Transformers, responsive components change their size and shape to fit into different circumstances and devices. But how do you make sure you're using them effectively and not just creating a loud, metallic mess? Key to winning the battle is a deep understanding of the makeup of your 'troops', knowing the key factors to consider and the components you can call upon to step up and fill their roles.

Assessing the Battlefield - Key Factors of Responsive Components

When considering responsive components, the elephant (or Dinobot) in the room is space, but there's a multitude of space-related factors to consider.

  • Vertical Space - how much will you need to scroll, can you make something take less height by shrinking an image, or splitting a list into multiple columns?
  • Horizontal Space - Large numbers of columns are challenging to display within a mobile device, resulting in a desire to create interfaces that make sense when you stack components or align them vertically.
  • Clickable Space - On mobile devices, while you have less space to play with, you actually want clickable items to take up MORE space, because fingers on a touch screen are less precise than a mouse.

Your Transformer Army - Common Responsive Patterns

Just as the Transformers have different specialties and are called to duty in ways that match their abilities, different components also have specialties. As mobile-first design has become more and more of a standard, we've begun to develop common, reusable patterns that function well responsively and can be used as parts of your design tool chest.

The Transformer Bumblebee

The first of these is cards. Cards are the Bumblebee of Responsive design - small, able to fit into many situations, but often overused and can get into trouble. Cards are by their nature incredibly easy to make responsive - they form an atomic unit that can be expanded or laid out side by side as screen size permits, but also fit naturally within a mobile environment. Just be careful not to overuse.

The Transformer Constructicon

Another extremely common pattern for a responsive component is in site navigation. This is a place where not only the content layout matters, but interaction patterns are super important. Dropdown menus feel extremely natural in desktop environments, but are clunky and hard to navigate on a small, touchscreen device. In contrast, drilldown menus have been a part of iOS native navigation since the beginning, and feel completely natural in a mobile environment. An extremely common pattern for a responsive navigation component is now to use a top bar containing a set of links that have dropdown navigation on large screens, switching over to have a top bar hamburger icon that taps open either a drilldown menu or scrollable 'mega menu'. These menu patterns are like the Constructicons - relatively weak in isolation, but super similar and when their powers combine they create a super-powerful component.

The Transformer Optimus Prime

A final pattern we want to highlight is for hiding and displaying content. Sometimes, you have just too much content to handle, and you need to throw something powerful at it. In the Transformers, this is when Optimus Prime gets called in - he's relatively vanilla but can handle situations that no one else seems to be able to deal with. In the responsive web world, this is when you want to use accordions and tabs. On large screens, it is common to have tabs-based interfaces to allow you to navigate between different content blocks or images, but on a small screen fitting both the tabs and the content all on screen is challenging. Designers have learned to switch their tabs for accordions on mobile to keep the hide/show controls directly adjacent to the content being shown, making it much easier to navigate on a small screen. This responsive 'accordion-tabs' pattern has been growing in popularity and is starting to show up in many different situations where you're trying to manage large amounts of content in a small space.

Responsive Components in Foundation 6.3

While navigation has been reasonably well handled in Foundation 6 via responsive menus and the off-canvas component, we have not had a built in responsive accordion/tabs solution, and we have not had a cards component. Until now. Foundation 6.3 (due to ship December 15, check out the release candidate here) will include BOTH a responsive accordion tabs component and a cards component.

The cards component, while very 'foundational', makes it easy to start building responsive cards within Foundation without having to spend a bunch of time building up the basic component structure.

The responsive accordion tabs component follows the model of our responsive menus, allowing you to use the exact same markup to generate an accordion at one screen size, shifting seamlessly into tabs at another. This will dramatically improve the ease of implementing this common design pattern. Optimus Prime has arrived. ;)

The Future of Responsive Components

There are a few technologies on the horizon that are going to dramatically shift our ability to build powerful responsive components. Currently we create components that are responsive based on screen size using media queries, but the coming of element queries will allow the creation of components that are responsive based on the space allotted to them rather than the full screen size. This alone will dramatically improve the ease with which we'll be able to integrate responsive components throughout the web.

Secondly, the upcoming CSS grid spec allows you to dramatically change layouts based on media queries. This will enable us to create radically responsive components, doing transformations using a few lines of CSS that previously would have taken complex JavaScript manipulations and large amounts of structural markup. Between the two, we couldn't be more excited about the future of responsive components in web design - possibly even more excited than we are for the next Transformers movie.

Stay updated about Foundation 6.3!

5 Common Mistakes Designers Make When Using Cards In Design

Brandon wrote this on December 02, 2016 in . Share this Post

Cards within design layouts have gained immense popularity over the last several years. Companies like Google, Facebook and Twitter who have millions of users that use their products every day have leveraged this popular UI component within their interfaces. Not surprising since, cards are a perfect response to the rise of responsive design. They're self contained units that can be moved, shuffled and mixed with different content types. They respond easily on different screen sizes, from single columns on mobile devices to multi-column on larger devices, and can move independently around the web.

At ZURB we've found cards to be a great solution within our client work and have been keeping close tabs on their use around the web. Google has written pretty in depth about their usage within their Material Design framework as well as some great content from teams like Intercom. From our 100+ card based projects the last couple years we have, however noticed some pitfalls when designing with them. Here we'll cover 5 of the most common mistakes we see designers make with card based UI:

1. Large visual gaps from different content lengths

Uneven card content image

In a perfect world, our content would be as neat and tidy (and consistent) as it is in our Sketch files, but real world content isn't perfectly uniform. Titles are longer, descriptions vary and (as much as Apple wishes) names aren't always 4 letters long. When cards are placed in a grid at larger screen sizes we can often see large gaps that interrupt flow. This isn't to say whitespace is frowned upon, but inconsistent whitespace can limit the density and make it difficult to scan cards.

There are three things we ask our designers to consider when this issue arises. First we look to see if the data makes sense when truncated. Will titles or descriptions still make sense when data is capped at a specific character count? Will the user be losing vital info? Secondly, we see if cards will make sense in a masonry layout. This works if content doesn't need to be tediously scanned, but instead when users can just peruse the content. Lastly, we see if we can shift content inside the card to make it work on one column on all device sizes. This allows cards to be as short or tall as needed and often allows us to keep information dense within the site.

2. Too many cards visible at once

Too many cards visible illustration

It's always tempting to want to use the entire space of your screen, especially when building something like a dashboard or web app where users may appreciate seeing it all at a single glance. This, however, can become an issue with cards as too many cards within a grid, or on screen at any given moment can become overwhelming and can cause users to strain when scanning.

Much like text line length, we want to think about how much content a user can reasonably take in at any given moment and how far a user's eye can scan horizontally over the screen before it loses it's place. We suggest setting a max-width on your cards container to limit this content overload and while there's no magic number for how many cards across is too many, some basic user testing may help you discover this for your own use case.

3. Too many actions at various areas of the card

Too many actions illustrations

One of the most valuable things about cards is how well they work as bite sized chunks of content that are gateways to additional info or actions that users can take. This means that it's sometimes tempting to pack cards with tons of actions in every area of the card. A gear in the top left, or a trash can on the top right may seem like a good use of space, but turning every aspect of the card into a link can be be more confusing than helpful to your user.

This link overload is often at the behest of a client or project owner and it can sometimes be easier just to add the actions rather than fight the battle. We encourage our designers to think through what actions are necessary on any given level and to potentially group the actions by importance or type. This allows us to unify the few key actions to their easily found spot at the bottom of each card.

4. Overloading cards with content

Overloaded card content illustration

Cards do a great job of breaking down large amounts of data into small digestible bits. They are especially fantastic for getting a quick snapshot of a project, a document, or a news story, but can sometimes tempt us to continue piling on content. Adding an Image, a button, a description, a chart, or a graph can seem like a helpful way to give users everything they're looking for, but more often it ends up overloading their ability to focus.

Outlining your primary content, secondary content and tertiary content is a great way to keep the card focused and allow users to take action to see more content. To do this we must know who is using our product and why they're coming to this page. We can then help rule out outliers and trim our card data to the minimum users need to see before they choose to take action and drill down.

5. Forcing a visual when one isn't needed

Cards with unnecessary visuals illustration

We've all seen pretty Dribbble shots with amazing photography, illustrations or icons in the header of a card. This makes the card feel visually striking and can split up some of the typographic content, but sometimes our cards' purpose doesn't have a visual that is part of the cards' primary reason for being. We leave a gray place holder in the wireframes and assume we'll figure out it's purpose when we start visual explorations.

When our designers add an image onto a card we often ask for the 'why'. Why does this need an image or an icon? Does this help the user better find content they're looking for, or will it simply become visual noise as users leave the default icon? This is usually a symptom of poor understanding of composition and needing an image or icon to balance out the cars, or separate the content. A great way to combat this is to do some typographic explorations and work with content order and hierarchy till the cards look balanced and clear.

Play Your Cards Right

Card design has been a welcomed force on the web and the ZURB team has been embracing them in our design work for years. We've explored them in websites and web apps in every industry from finance to biotech and have always found them to be a flexible part of a well oiled design. We've even noticed that In recent months as our designers have been coding within Foundation 6 that there has been an increase in projects with card components built from the ground up. While there's nothing wrong from coding a component from scratch, the team has taken the most solid use cases for cards and has added them into the forthcoming Foundation 6.3. This means cards will be even easier to use in your next project, but just make sure you're not falling into any of these pitfalls while using them.

We're testing out Cards in the Foundation 6.3 Release Candidate now with a full release coming December 15th!