ZURB

The CSS Source Code Behind Our Manifesto

May 18, 2012 in by Chris with 6 comments

A month ago, we finished our initial efforts of redesigning ZURB.com. It took a lot of work and we had to overcome many challenges, but the outcome is totally worth it! We now have a site that we’re proud of and that does a great job of telling our story, sharing our beliefs and showcasing our work.

Our beliefs are told through the ZURBmanifesto, which outlines the core values of our company in a clear and concise way. it’s used to shape how we do business from every angle.

One goal we set for our new site was to showcase our Manifesto in a way that would get people excited when they stumbled upon it. We made sure the page looked like it had the same visual language as the main site, while also standing alone.

By looking at a single slide, you can tell that this is a ZURB page. We used color, typography, sketches and iconography to add dimension to the slides (both visually and metaphorically). To accomplish all of this visual candy, we used and abused CSS and jQuery a bit. We’re going to focus mainly on the CSS side of things for today. Follow along as we take a miraculous journey into the source code of our Manifesto.

The Manifesto features all the colors from the ZURB palette.

Capture Attention Quickly

We really wanted the transition between each slide to be memorable and eye-catching. We used multiple backgrounds that changed position as the user scrolls down the page, creating an effect of depth and movement. We also used sketches that were specific to each section to help add to the story in a visually fun way. These were animated, but aren’t affected by scrolling, just triggered by the position of the scroll bar. This way, they act as little surprises that reveal themselves in a unique way for each slide, even if the user stops scrolling.

To create the animations, we used CSS transitions that were triggered at different times by injecting new values via jQuery at specific increments on the page. The challenge was that we needed to constantly know the size of the screen, even if people resized it in the middle of their visit. This required lots of JavaScript to get right, but the CSS was relatively simple.

We made a container for each animation that had a fixed height and width based on the window size. The sketches were positioned within these containers and moved around by changing values with jQuery. The trick to making the sketches actually move was using only a few lines of CSS:

// A basic transition effect written in CSS
.animation-container img {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
}

To handle a lot of the animation states, timings and positions, we had to rely on jQuery so that we’d be able to know the window size and calculate our positions and timings accordingly.

Blur the Boundaries of What You Thought Was Possible

Another key factor in making the transition between each slide look and feel really awesome was how we handled the main text. As you scroll down the page, each slide overlaps the previous one, adding to the illusion of depth. At first, the text just stayed still, but it needed something more. We fiddled around with a couple ideas and decided that making the text fade into the background as if it was moving on the z-axis of 3D space would be best.

Resizing the text to make it look like it was fading into the background was pretty easy, but we really wanted to sell the illusion by making the text blur as well.

You can see how the text slowly gets smaller and blurrier.
Sizing the Text

To handle the effect of resizing the text as the user scrolls down the page, we strapped on our good ol’ CSS transform tool belt and its friend jQuery. Styling a static piece of text is simple with a transform, but we needed some logic to handle the change in size based on scrolling.

// A basic transform effect written in CSS
.scale {
  -moz-transform: scale(.5);
  -webkit-transform: scale(.5);
  transform: scale(.5);
}

// Written in jQuery, using a variable to change the scale
$blur.css({
  '-moz-transform': 'scale(' + blurScale + ')',
  '-webkit-transform': 'scale(' + blurScale + ')',
  'transform': 'scale(' + blurScale + ')'
});

We created an equation that outputted a percentage (blurScale). This percentage would change as the user got closer to the next slide. Now we had our text scaling and partially looking as if it was moving in a 3D space.

Blurring the Text

The blur effect in the manifesto isn’t really a blur at all, it’s text that has the color attribute set to transparent and the text-shadow attribute set to different amounts. The higher the spread of the text-shadow, the more blurred the text would look. We employed a similar jQuery technique to handle the logic we needed to change the blur effect as the user scrolled.

// CSS Needed to create the blurry text effect
.blurry-text {
  color: transparent;
  text-shadow: 0 0 30px rgb(255,255,255);
}

Our JavaScript simply changed the “30px” value depending on how close the text got to the next slide to create the awesome blur effect that is shown.

Design For Any Device

With the number of devices being used to surf the web these days, we just couldn’t pass up the opportunity to make this puppy responsive. We utilized parts of the Foundation grid, jQuery conditional statements and media queries to render different effects and layouts at different screen sizes. One of the concerns we had was performance. Mobile devices aren’t known for handling lots of animating objects happening at the same time. This has to do with how they handle the code and the size of the load.

To ensure that people viewing on mobile devices had a good experience, we removed most of the fancy JavaScript effects and made the slides stack down the page in their normal flow. The animated images were made static and the backgrounds simplified. We wanted it to be easy to flick down the page without performance slowing people down. The changes were handled using media queries.

// Media query example
@media only screen and (max-width: 768px) {
  .row { 
    overflow: hidden;
    padding: 0 20px;
  }
  …
}

Venturing Into New Territories

We had our heads down in the code on this one for awhile, but we’re really happy with how it turned out. It was a new type of responsive challenge for us, handling such complex animations and logic while mixing so much CSS and jQuery. The parallax effect of the page helps to add excitement to our beliefs and conveys them in a unique and creative way. Sometimes the best way to teach yourself a new technique is to just jump into an idea full-force and not think about how hard it might be to complete. There are always solutions, you just have to find them.

You can take these techniques and come up with something awesome too. Be sure to post it in the comments for everyone to see. The best way to push boundaries is to venture into new territory and let others challenge your assumptions. Take risks and run with your ideas.

Check out the ZURBManifesto »

A New Take on Responsive Tables

May 17, 2012 in by Jonathan with 8 comments

We looked at the current state of responsive tables, and we weren't happy. Today we've released a new playground piece, with a new, awesome take on responsive tables.

If you've ever tried to make large data tables work in a responsive design, you know what a pain they can be. Tables have a magical property that says they can never be so small that parts of a word have to be cut off — they can't overflow. That means that, when your design shrinks down for the width of, say a smartphone, large data tables will ensure your design doesn't actually shrink all the way down. It sucks.

We wanted to try and do better, so we got to work on a responsive table implementation that would meet three criteria:

  • Doesn't break responsive layouts
  • Doesn't unnecessarily hide table data
  • Still allows you to compare rows with a key column

A bit of a tall order but with some crafty CSS/JS, we cooked up something we think is pretty nifty. You can go ahead and check out our new responsive tables, or stick around to hear more about how it works.

How it Works

As we looked at tables we realized that, most of the time, the first column is the unique key for a table. That provides the reference for the other columns, while the column headers provide the legend for what everything means. With that in mind, we wanted our responsive tables to have that first column available at all times.

This is a schematic of how the table changes from a larger screen to a small one. Basically, we take the first column and pull it out of the table element, positioning it over the table in its own element. Then we allow the table itself, minus that first column, to scroll under it horizontally.

What this allows is for the user to see the entire table (albeit not all at once, they have to scroll) while still seeing that first 'key' column. We don't have to flip the table axes, or hide data, or break the layout, we just rely on the user's ability to swipe across to see all the data and compare the rows and columns.

There are a couple caveats here. First, for the small device format we have to restrict cells to a single line (for a consistent height). The separate left-hand column and other column elements don't impact each other, so they can't correctly dictate an arbitrary height. Second, this doesn't work in Android 2.3 and below as it doesn't support scrollable DIVs. Android 3+ should be good to go.

Built for Foundation

We developed these to drop right into Foundation, our responsive, open source front-end framework. They're great if you're working on a responsive prototype, or responsive production code, and need a way to manage large sets of tabular data. While they're built for Foundation, they should work in any responsive front-end.

Try it out, give us feedback

You can check out our responsive tables or you can go right to the code on Github.

If you're interested in other approaches, Chris Coyier did a great round-up a while back on responsive data tables — there are some fascinating approaches in there, but none which met our criteria.

If you have some other ideas to either improve on this approach, or something else we should check out, sound off in the comments. Have fun with this new code, it was fun to work on and hopefully fun for you to use!

Size Matters Not: The Road to Foundation 3.0

May 15, 2012 in by Ryan with 4 comments

If you hadn’t heard, bigger monitors are in, small ones are out … at least for desktops. The 1366x768 has ousted 1024x768 as the supreme screen size. Now we hope you’re not thinking that means we should stop designing for small screens, even if it is for desktops, despite what Jakob Nielsen might be saying. Because when it comes to designing for the web — size shouldn’t matter.

Nielsen makes it a point to carefully say that “small screens are finally so rare for desktop computers that we don’t have to design for them.” Then he goes on to cover his bases, saying we still have to consider small screens anyway. Nielsen seems stuck in a desktop world, a single-device myopia. When it comes to mobile devices, Nielsen seems to begrudgingly consider them and lays out these option:

  • Build a separate mobile-optimized site: Only if you have the time to do so, then auto-direct them to the site and provide the appropriate links to toggle between the full-blown site or the mobile site.
  • Mobile apps might be better: That’s because studies show that users perform better on mobile apps, says Nielsen
  • Design for smaller tablets separately: Full-blown sites look good on 10-inch tablets, such as the iPad. Ideally, says Nielsen, you’d want to design a third option optimized for mid-sized devices, like Amazon’s Kindle Fire.

That last bit of advice seems really foolhardy. We can’t ignore that more and more people are using mobile devices to access the web, be it for tablet or smartphones.

Nielsen does make some good points about larger screens (like optimizing for widescreen monitors around 1,440px wide), something we considered when it came to images for the new ZURB.com homepage. But like 960 grids, we can’t get stuck in one screen size or device.

Four Corners, Not Devices

Don’t get us wrong, we agree with Nielsen that the desktop is far from dead. Tablets and phones are very much consumption devices (for now). It’s very easy to say that mobile will kill the desktop or the laptop as we use our mobile devices more and more everyday. When it comes to writing long pieces or editing/writing code or text, desktops are still where it's at.

For the time being, we’re still going to use a variety of devices for different tasks. It’s not devices, however, that we’re designing for — it’s four corners, no matter the size.

So it’s a waste of time to develop sites specific to each device. What’s needed is a modern grid system, which is why we developed Foundation and why we’re on the road to Foundation 3.0. Once completed, it will be one of the most, if not the most, modern responsive grid system in the world.

The Road to Foundation 3.0

We’ve already released a taste of Foundation 3.0 and another taste is planned for later this week. But what does it take to build a modern grid system that meets the challenge of building a robust site and still look good on hundreds of different devices and browsers?

In other words, what is it that we need in a modern grid system. Let's take a look:

  • Flexibility: There needs to be enough columns that covers the majority of our layout requirements.
  • Nesting: We have to have something that can nest down into a single column, right down to the N levels to give us the flexibility we need.
  • Responsive: Since we’re no longer designing for devices and designing for four-corners, no matter the size of the screen, our grid needs to be responsive, fluid (percentage-based) and configured to scale down to smaller devices. And a fluid design is something even Nielsen sees as a good thing.
  • Modifiable: Modifying things such as gutter size are a pain in the butt. So we want something that’s modifiable.
  • Backwards compatibility: That’s because not everyone in the world uses Chrome or iOS5 Mobile Safari. We’d need support for Android, iOS 4+, Webkit browsers, Firefox and IE8+.

Here’s what such a grid would look under the hood (take a close look, it’s a sneak peek under the Foundation 3.0 hood):


OK, this looks great for desktops, but for smaller devices, we’ve added additional styles wrapped in this media query:


But there’s some overriding we have to do, to basically tell the browser on a small display to: don’t float the columns, don’t give them a min-width, don’t give them margins:


There’s more to building a modern grid system than just these two bits of coding. In fact, Jonathan goes completely under the hood to show us step by step on how to build such a grid system in a recently published .net Magazine article.

When it comes to being a responsive designer, remember what Yoda said, “Size matters not.” What say you?

Why Every ZURBian Carries an iPad

May 14, 2012 in by Jonathan with 10 comments

Last week, we were excited here at ZURB to distribute new iPads to every member of the ZURB team: design, operations, marketing and engineering — even our interns. There's plenty of companies in Silicon Valley that kit their employees out with nice gear, but this wasn't just about everyone having shiny toys (though it doesn't hurt).

Multi-Device is the Future

You've probably noticed that it's not just laptops and desktops people are using these days. Other classes of device, like smartphones or tablets or eReaders (etc, etc) are beginning to dominate how people access the Web, or talk to each other, or capture and share things in their life.

We believe that, given this inevitable shift toward more disparate devices, it's important to put more of our eggs in that basket. That's why we developed Foundation, our responsive framework for developing sites and apps for any device. That's why when we relaunched ZURB.com we did so in a way that worked across devices, and it's why we develop sites and apps for our clients responsively.

We Need Multi-Device Design Literacy

There's plenty of reasons to have iPads in an office. We use them for QA, we can use them to present work to clients (or each other) ... but the biggest reason we kitted out each and every ZURBian with an iPad was to foster an environment of multi-device design literacy.

It's not just our designers who need to understand how Design works in a multi-device world. Our marketing team needs to be immersed in these devices so they can talk about it. Our engineering team needs to know about them so they can build new apps and services to cater to it. Our operations team needs to understand the multi-device world so they can plan for it, and work with it, and find new talent to drive it. We all have iPads because each and every member of our team needs to intuitively understand the multi-device world (we all have smartphones, too) and understand what it means for our business and our industry.

The Practical Effect

Here's an example of how this is already helping our team. The new iPads, with their retina displays, make for a great reading and browsing experience. We also recently relaunched ZURB.com with a visually rich design. However: we did almost nothing to cater to retina displays (it didn't even exist when we started the redesign). No high-resolution imagery, no consideration for the improved readability when it came to font sizes and the like.

We could simply serve up giant images and scale them down for everyone else, but something else the iPad teaches you is that while the resolution might be enormous, often the bandwidth is not. Even on 4G LTE Retina-sized background images are a seriously large file load. We're still working on this problem, but without team-wide exposure to this we might not have even bothered and we have to bother. These devices aren't going away, and they're not going to get less capable.

That's a technical example, but the effect is spreading already. When we evaluate new services to drive operations, we consider whether they work on different devices. We're already planning for TVs with connected AppleTVs in our breakout rooms, because our iPads can present directly on them without messing with cables. And so on.

Consider how immersed you are in a multi-device world. Smartphones, tablets, notebooks, eReaders, glasses (hehe), TVs, cars ... to work on what we all work on we need to understand these things.

Week In Review: ZURB Culture, Customer Service and The Scientific Method

May 14, 2012 in by Forrest

Curious to learn more about the ZURB culture? If you’ve been following our posts from last week, we gave you a nice look into how a new designer adjusts into a new environment as well as our approach to failure. It’s different, and we embrace it!

Culture aside, we had two other posts covering entrepreneurship and customer service topics. Grab that cup of coffee and enjoy our Week-In-Review.

Breaking In A New Designer

One of the most exciting times in a ZURB designer’s career is joining the company, but it doesn’t come without a few bumps in the road. Alina, one of our new designers, shares her experience joining the company and the issues she encountered early on in her time here. We’re excited to share some insight into how ZURB “breaks in” a new designer — and how our approach for doing this differs from most other design companies out there.

Don’t Underestimate the Importance of Customer Service

Customer service is an important part to many businesses, but is it crucial? Forrest examines customer service from ZURB’s angle and says it’s not just important, it’s of core importance for product gut reactions and long-term company strategy. Don’t underestimate the importance of day-to-day customer interactions in helping your business excel in an increasingly-competitive world.

Embracing Failure and Fostering Success

We’re not perfect. At ZURB, we embrace failure as a core component to our creative process. We foster success through failure, but just how do we go about this? Ryan shares our point of view on a topic many people like to put off to the side, and references personal and business examples to give context to the point.

The Scientific Method and Startups

Not all of us were biology majors in college, but many of us actually can apply a useful tool: The Scientific Method. Ryan breaks down the method and discusses each step in great detail from a startup perspective. Testing out your ideas are crucial for success, whether or not you use the Scientific Method to get there.

Breaking In a New Designer

May 07, 2012 in by Alina with 10 comments

I’m one of the newbie designers here at ZURB. It’s an exciting place to be and I’m so grateful to have joined this powerhouse team. But even with all the joy of coming to work everyday, there are still some growing pains every new designer experiences here. That’s because ZURB is a very special place and we do things quite different here. More than anything else, the pains come from getting up to speed on ZURB’s unique approach to design and breaking some of the (bad?) habits we’ve picked up along the way in our careers up til now.

We Want to Prove Ourselves

As a new addition to the team, there’s a lot of pressure to make yourself of value and validate being added to ZURB’s awesome team. (Honestly, the pressure is just in our heads, not brought on by the team.) We desperately want to be “worth it,” which means that mistakes are really hard to get over. Even a small mistake can feel like a huge letdown — a failure.

But failure is a really big deal here at ZURB. In fact, we have a special word for it — opportunity. That’s because every half-baked idea and every inept solution is our chance to find out something new about the product we’re working on. We always throw out a ton of ideas to our customers, knowing fully-well that some of them are too out-there and a few are just plain wrong. But there are three good reasons we still do it:

  1. To get bad ideas out of our system
  2. To make sure no creative stone is unturned
  3. And, occasionally, to gauge the customer’s wild side

We Want Our Work to Speak for Itself

When new designers, such as myself, join ZURB, we use our experience, judgement and best practices to present solutions that we can recommend with confidence. We just want the customer to look at our work and instinctively fall in love with it, without further explanation, of course — after all, it’s all in the layout, right? The trouble comes when the customer starts asking questions and challenging our recommendations.

The truth is that work doesn’t sell itself. A great concept can be easily scrapped by the customer who isn’t going to read your mind about its merits, while a mediocre idea can be a wild success when positioned correctly.

We often work on very complex products, which require sophisticated solutions. And that means our customers expect us to have the answers on all of their hows and whys (and rightly so!). Which is where I found myself recently — stumbling to explain an elaborate interface and defend even the simplest element, all because I didn’t think through the justification ahead of time. Having a clear point of view is valued greatly at ZURB, but learning how to articulate that point of view is as important, if not more.

We Want the Big Ta-Da!

When most agencies get projects, they hole up in their offices for a few weeks to do research, put together strategies and comp up layouts. Next, they assemble an impressive presentation and have “the big reveal” meeting with a customer. There the customer-agency relationship is simple: customer provides a project, agency provides a solution. And it’s really the only process designers know before joining ZURB.

Things are really different here. We don’t do big reveals. Our process is not mysterious. We’re very transparent about how ideas turn into concepts, which turn into solutions. We present one small idea at a time, which our customers can easily grasp and believe in. We then combine several small ideas, and they magically become solutions that customers feel invested in and fully appreciate. It’s one small “aha moment” after another, that in the end amount to a big “wow factor.”

Trying to present a solution right from the start can actually backfire! Recently, I worked on a project where I tried to bite off too much too fast. I presented too many new ideas in one little neat layout, which just left the customer confused — we could actually hear their eyes glaze over on the phone. But had I showed all those pieces individually, the customer would have been open to them and felt like they were part of the creative process.

What’s more interesting is that, after working with ZURB, customers often adopt these methods of creative exploration and iteration within their organizations. We love hearing that marketing directors are picking up Sharpies and shopping around sketches to their team. That’s actually one of our schemes for world domination.

It’s been an exciting and challenging couple months. I can only imagine how much I have yet to learn!

Week In Review: Product Design Conversions, Passion and Seed Funding

April 30, 2012 in by Forrest

This past week, our blog content centered around the theme of challenge. Product designers and entrepreneurs alike face challenges that they cannot anticipate, so addressing problems and challenges quickly will help move projects forward.

Without further ado, here are some of our biggest posts from the past week. We highlight product design tips as well as how to address challenges with problems, waning passion and securing your seed round.

6 Persuasive Product Design Steps

Compelling product design positions a company well for conversions. Eric Schaffer’s video examines six steps to persuasive design — and Ryan expands upon his points to show how product designers can get conversions.

Be a Proactive Problem Solver

It’s immensely important to take a proactive approach in solving your problems. Ryan examines three ways you can do just this — and avoid inhibiting your project progress.

Keep Your Passion High

New opportunities often present various challenges we simply cannot anticipate when we start out. In this post, Forrest highlights the example of a school teacher turned accountant and shares advice for keeping passion high when chasing desires.

Nail Your Seed Funding Pitch

There’s enough pressure building something people want, but what about pursuing your seed round? There are a lot of questions to consider before diving headfirst into the process. Ryan presents these in a digestible, bulleted format. Don’t over think it, now!

Week In Review: ZURB.com Launch, Foundation Icon Fonts Release and Startup Pitfalls

April 23, 2012 in by Forrest

We’re back with our look at the past week in review. Boy, it was an exciting one for us. We launched our new ZURB.com website and released an awesome new font set that you should download today!

In case you missed them, here are the biggest reads from the past week.

Mobile Verify Tests

Jonathan wrote a great post last week on how we used Foundation to mobilize Verify tests. We had a great post on the Verify blog on the new multi-device feature, so we dive a little deeper in this post.

ZURB.com Redesign

Our first major launch from last week — the new ZURB.com redesign. Our team was stoked to see it go live and Anthony filled our readers in with how it came to be. Let us know your thoughts on the new website in the comments!

Foundation Icon Fonts

New Foundation icon fonts highlighted our second major launch. Chris offers a sneak peek at Foundation 3.0, filling us in on the process and benefits from using the fonts. You can download it right now and check it out on the Playground.

It's a Trap!

Companies often fall into traps they don’t intend to fall into. Ryan references Noah Wasserman in his post about how to avoid common startup pitfalls. Through surrounding yourself with the right people, you can persist and make it through any challenge.

Foundation 3.0 Sneak Peek: Icon Fonts

April 19, 2012 in by Chris with 26 comments

As the Foundation we know today starts to take its place on the shelf, we start looking forward and executing on our master plan for the future. Foundation 3.0 is going to be epic! We’re not just going to make it the fastest framework for prototyping quickly and building solid production sites that present well on any device, but it’s also going to help you create better designed sites.

Today, we’re revealing part of this plan — a small glimpse into the long list of additions and modifications Foundation 3.0 will include. We decided to whet your appetite with the first installment of our new Foundation Icon Font Sets!

Custom Icon Fonts FTW!

We’ve gotten a few requests for icons inside of Foundation. A few of us in the office have even mentioned it. We bought a program so we could test out the process for creating a custom font out of vector shapes. This test got us excited about the possibilities for styling such a font. We’d be able to include any number of these icons at any size, color or CSS style we could imagine. This gives us ultimate control over the icon sizes we use for various device sizes without the need to save multiple versions of the same icon. We were sold, it was time to move forward with implementation.

What was the process?

Once we pulled the trigger on this idea, we quickly came up with an initial list of icons that we thought were generally useful to UI and web designers. We iterated quickly and settled on the set you can download today. While it’s hard to re-invent how to illustrate an arrow glyph, we tried to give our glyphs a unique style of their own.

After the icons were designed, it was time to map them to characters on the keyboard and export them into our font sets. Our initial offering is three icon font sets; that’s over 100 icons! You’ll be able to download it today and get started using them.

What’s the benefit?

By having glyphs that exist as a font, you get the advantage of scalability. Now you can have icons ready to go in any size, color and style. You can even use some awesome CSS text styles like shadows and gradients to make them feel less like a glyph. Forget about copy and pasting from Illustrator to Photoshop only to have the pixel edges look fuzzy. Now you’ll get the same crispness that you get out of any font rendered on the web.

Download it today!

We’re showcasing our pre-release of this font set on our playground. Get over there and download it, the Foundation Yeti commands you! If you don’t, forget about extra glyphs in your stalkings this year.

We’d love to hear any suggestions for glyphs to include in the final set. We have over 200 spaces to fill in a character set, let us know!

Check out Foundation Icons on the Playground »

Week In Review: Content, Entrepreneurship and "Freaky Apps"

April 18, 2012 in by Forrest Be the first to comment

We’re starting a new series here at the ZURBlog: the week-in-review post. Hey, we realize that time is money — especially for our readers. So we’ve decided to compile our can’t-miss blog posts from the previous week into a single post that will sum up the topics we covered and discussed while setting the stage for the content to come.

We’re publishing the week in review on Wednesday today but look out for it every Monday from here on out.

This past week, we covered a variety of entrepreneurial topics, how content plays a role in design and had a look at some awesome CSS photo filters (which are yet to come!).

Without further ado, here are the posts you should check out from last week!

We control the content. Ryan wrote a post last week on “The Writerly Design of Content,” which covered the importance of consistency in content styling. The importance of content in design cannot be underestimated.

The true entrepreneurial spirit. Being an entrepreneur is so much more than fame and fortune. In this post, Ryan examined three qualities of the entrepreneurial spirit as seen through the story of a determined child.

Success, defined. Startups of all types define success differently, so how do entrepreneurs define success for themselves and their companies? I examined this question with four influencers. Their answers will get you thinking about what success really means.

As one reader tweeted, you've got Instagram in your web kit. Anthony shared some awesome CSS photo filters with us. No Photoshop or jQuery plugins needed.

Did you miss our ZURBsoapbox with Robert Scoble? Hear more about these “freaky” apps and how they actually push forward entrepreneurship as we know it.

And Stack Overflow co-founder Jeff Atwood will get on his soapbox on May 11, sharing with us the hurdles he had to overcome as he built the entire Stack Exchange Network from the bottom up. Spots are filling up fast so make sure to RSVP today!