Introducing the New Motion UI

wrote this on in , , . 658 reactions

In preparation for the upcoming release of Foundation for Sites 6, today we're open-sourcing Motion UI, a Sass library for creating custom CSS transitions and animations. Originally bundled with Foundation for Apps, this updated version includes more robust transition options, an animation queueing system, and flexible CSS patterns that can work with any JavaScript animation library.

Prototype to Production

Motion UI includes more than two dozen built-in transition and animation classes that make prototyping easy. When you move to a production environment, the library gives you total control over how your effects work.

The core of the library is a set of powerful transition and animation Sass mixins, which give you complete control over the details of an effect, from what direction an element slides, to how far it spins, to how intensely it shakes. Motion UI also includes a...
Read More

Make a Flipbook with Pure CSS

wrote this on in , . 411 reactions

Just admit it, we've all done it. As designers working on responsive websites, we all grab the edge of our browser window and shrink it down to see how designs change and collapse. We thought it would be cool to add a bit of whimsy to this common interaction, or at least a little surprise and delight. We call it the CSS Flipbook!

Using some Sass and a tiny bit of HTML we recreate the feel of a flipbook. Grab the edge of your browser window and pull it back and forth for a nifty little animation, no JS necessary!

Check out the example in the Playground, download the code and start having some fun. There's all kinds of fun uses for this snippet and we'd love to see how creative you can get, so feel free to share yours with us in the comments! Who knows, we just might send you a special gift from the team!

Make a Flipbook

Foundation 6: Leaner, Meaner and Cleaner Sass

wrote this on in . 479 reactions

Sass in Foundation Illustration

We've been using Sass here at ZURB for many years. In fact, Foundation has had Sass integration since version 2.1, all the way back in 2011! Preprocessors have changed quite a bit since then, but one thing has always stayed constant: they make writing CSS fast and flexible.

We pass this speed and flexibility onto our Foundation users though Sass variables, mixins, and functions. However, every tool has its strengths and weaknesses. As we mentioned in our Foundation 6 announcement, we've been rethinking every aspect of the framework, including closely examining when and where to use Sass. These changes will make the framework faster to learn and easier to use for you, the developer.

The Bottom Line

Yep, let's start with the bottom line: when writing Sass, remember that you're always one step removed from your CSS output. In general, we shouldn't be producing...
Read More

Create, Debate and Win Your Team Over

wrote this on in , . 213 reactions

Making Decisions with Constructive Debate graphic

When we talk to product managers and product designers, there is one question that we hear over and over again. 'How do you get your team to agree on what to build next?' Most people will agree that ideas are cheap, and the people on your team have lots of them. How then do you know which to pursue, and how do you keep the team engaged, when not everyone's ideas will be selected?

First, let's take a step back. We're firm believers that anyone can design and anyone can be a designer. There is no mystical superpower or genetic predisposition that gives someone the ability to do design. We don't believe that only designers or those at the top should be making decisions and passing them down to the rest of the team. Rather design is everyone's responsibility, and Progressive Design makes it easy for everyone to be involved.

A critical part of Progressive Design is the...
Read More

Foundation 6, Prototype to Production

wrote this on in . 1258 reactions

Over the last year we've been re-creating, re-coding and re-thinking the Foundation Framework. A new Foundation is fast approaching and it's going to be a whole lot more than just a visual iteration, code restructure or a simple change in version number.

Since ZURB uses Foundation every day for our Studios client work and design tools, we've been using our experience from the now hundreds of websites we've built on Foundation and we're making a lot of decisions about what a framework's place is for a modern web developer/designer. We've had tons of phone calls, conversations at meetups, and even sent ZURBians on the ZURB World Tour to hear how people were using Foundation. From these hundreds of conversations, we have created the driving force behind every decision for this framework update and developed a new mantra we're calling, Prototype To Production.

Google's New Logo: Standing Out or Blending In?

wrote this on in . 126 reactions

The internet is in an uproar today. People on all sides of the issue are chiming in with their opinions about why this happened, how this happened, and who's to blame. So what has touched the collective nerve of the world wide web? Is it the erratic stock market corrections? The upcoming presidential elections? Nope, the source of all of the passionate interchange is Google's new sans-serif flat logo.

Google's logo has changed a lot over the years, but it settled into the version most of us are familiar with in 1999 with little change until this week.

The original logo was designed by Ruth Kedar who now serves as the Creative Director at Ruth met Larry Page and Sergei Brin through a mutual friend at Stanford. They were looking for something that would set Google apart from their competition...
Read More

Everyone is a Designer

wrote this on in , . 198 reactions

Since our humble beginnings in 1998, we've considered our customers and employees integral parts of our success as a company. No matter their job title or role, we consider all of them designers. They've helped us build an amazing company and consistently focused us on designing great products and services. Our recent ZURB Wired is a fantastic example of teams coming together to design amazing results.

In our fourth principle of Progressive Design, Everyone is a Designer, we explain why everyone can do this. When we interact with clients, students in our classes, or others, we work hard to get them to understand how to contribute feedback on visual ideas, to build off those ideas, and then to own them and carry them on into their everyday practices. There is nothing more gratifying than seeing a former client voluntarily explore five ideas to gather feedback instead of just...
Read More

ZURB Wired 2015 Has Begun!

wrote this on in , . 10 reactions

It's GO time! We've just kicked off ZURB Wired 2015 with Downtown Streets Team! You can keep up with our progress in real-time as we publish our work through blog posts, photos and videos on our ZURB Wired page over the next 24 hours. You can get involved too! Keep an eye on the blog because we'll be posting Notable sets asking for your feedback on our work as we go.

You can help keep us pumped by cheering us on! Tweet us using our @ZURB handle and use the #ZURBWired hashtag and we'll be sure to share it with the teams here.

Lastly, every few hours we're going to hop on Periscope for some live video streaming. Keep an eye on our Twitter feed to be alerted when that happens!

So be a part of the action and follow along over the next 24 hours as we race to help Downtown Streets Team create an amazing marketing campaign!

ZURB Wired 2015: Announcing Downtown Streets Team as This Year's Nonprofit!

wrote this on in , . 60 reactions

After meeting with several amazing nonprofits, we've selected Downtown Streets Team for ZURB Wired 2015! We want to thank all of the other organizations who put together some amazing presentations for our team and look forward to keeping in contact for Wired 2016!

Downtown Streets Team is celebrating 10 years of helping the homeless transform their lives through their unique work and community beautification programs, in addition to assistance with housing, medical care and education. Our team was incredibly impressed by their personal success stories and the impact they're making in our community. Their team is committed, passionate and just crazy enough to take on this 24-hour sprint with us!

The difference that Downtown Streets Team has been making in Silicon Valley is absolutely astounding, and the facts prove it. Since operating in the city of Palo Alto,...
Read More

Iteration Builds Momentum

wrote this on in , . 213 reactions

Last year we set out to challenge what people believed to be Design Thinking. Since then we committed ourselves to defining a design methodology that pulled from our two decades of design knowledge. We realized that the lessons and methods we discovered since our beginnings in 1998 would make it easier for millions of designers to take advantage of our insights and help their design teams create more value in their organizations. We found that in Progressive Design.

We've defined two principles of Progressive Design- Design for Influence and Lead by Design. In this blog post, we define our third principle, Iteration Builds Momentum. Design is a balance of doing, presenting, collecting feedback and collaborating with teams to push ideas forward. Great design happens when we build momentum with rapid design iterations.

Failure helps us get into a flow

Industrialized, rigid...
Read More