Back to Blog

Transcript: Jonathan Smiley and Matt Kelly from Zurb on Foundation 5


This is a transcript for The Dirt episode, “Jonathan Smiley and Matt Kelly from Zurb on Foundation 5

Mark Grambau: You are so allergic to show tunes, I know it’s not just

Steve Hickey: I just don’t like them, I just don’t like them.

Mark: I understand from a classification of music.

Tim Wright: They’re so cherry though, that’s the problem.

Mark: But even if there is one that’s sad, I mean its music with words
telling a story, it’s a ballad, just with a play around it.

Tim: Hello and welcome to the dirt, the only show that thinks bootstrap is a
steaming pile of crap I’m your host Tim Wright and today I’m here with Steve

Steve: How are you doing?

Tim: Mark Grambau.

Mark: That was subtle.

Tim: Thank you. And two very special guest, Jonathan Smiley and Matt Kelly
from Zurb, how are you guys doing?

Jonathan Smiley: Doing well, how are you guys?

Matt Kelly: Doing well.

Tim: We’re fantastic.

Steve: Tim is enjoying himself.

Tim: Welcome to the show…

Jonathan: Thanks for having us.

Tim: I think Steve just pee a little with that intro.

Steve: It’s a pretty good one.

Tim: So you guys just released version five of Foundation right?

Jonathan: We did yeah, we released it a couple of weeks ago now.

Tim: So how is that going, how is it being received so far?

Jonathan: So far it seems really good actually. It was, I think I could
probably say it was one of our smoother launches for these sorts of things.
This is Foundation 5, so we’ve done this at least three other times because
Foundation one was never actually really launched. But it definitely went
better than the ones in the past at least as far as getting things out on
time and nothing exploding.

Tim: Fewer Black Friday-esque trampling?

Matt: Yeah.

Jonathan: Yes, fewer of those for sure. But the reception so far has been
really great actually. We had a particular angle I guess for Foundation 5
and I that seems to be resonating with people so we’re pretty stoked about
that. Traffic is way up, downloads are way up, I mean it’s doing pretty
well, thanks.

Tim: So is this a large divergence from Foundation four? Or is just kind of
the natural progression of where you wanted to take it?

Matt: Technically we didn’t change a ton of features that are not like the
progression we had from three to four. Where we went to a mobile first
[inaudible 00:02:08] and really taking a [inaudible 00:02:08] approach and
everything. With Foundation 5, it was about speed, introducing interchange
for content so that you can not only have images swap out for different
site devices to increase performance with soft button entire pieces and
content to load different templates.

There’s also a big positioning change in really kind of hitting home that
difference between Foundation and Bootstrap. Which is Foundation is the
professional choice for people that are building sites. As opposed to
Bootstrap which is the choice for people who are trying to get something
out of the box that kind of has a site that looks like Bootstrap.

So with Foundation, now we have support, you can get professional support
for Foundation. We have training, we talked about the training more… and
we have Foundation services where you can have professional service that
you can buy from Zurb for Foundation.

So, which people seem to get, they seen it before but now we kind of really
hit it home that this is the professional choice for people who want to use
this. Versus Bootstrap which something you download and play with.

Tim: Yeah that’s nice, it sounds like you guys are offering the framework
for people to hack through it but you’re not leaving them by themselves
like maybe bootstrap would. Where it’s just, here this a just pile of code,
use it. You’re actually offering some sort of a training.

Matt: Exactly yeah. And to articulate to people that, hey this is actually
a company that’s behind this, we use this framework every day. We eat our
own dog food so to speak or our own caviar, whichever adage you want to go
with. We use it every day for all of our work, we built the business around
it, we have a team of people that are paid to work on Foundation. So it’s
going to be here for a long time.

Tim: So you’re actually using Foundation on client work?

Jonathan: Oh yeah, we’ve actually used Foundation for probably all of our
client’s, for at least the last year and a half I would say.

Matt: Yeah, long before Foundation was even open source, we were using it
for everything.

Tim: So what are the new features in Foundation 5?

Jonathan: So the thesis for Foundation 5 was about speed. We wanted, we
feel like frameworks have at least progressed far enough in response to
designs progressed far enough that the biggest improvement we could make to
it at this point was about optimization. So what we did with Foundation 5
was we focused on making everything about it faster. So we wanted to make
it faster to learn, that’s why we redid all the documentation, it’s much
more verbose and full of examples and full of all the variables and
everything you might possibly want to find.

It’s why we focused so much on things like the training, that kind of
stuff, bringing people up to speed more quickly. We introduced a forum,
actually that you get to from the Foundation website which is just for the
community to talk about what they’re doing in Foundation, issues that
they’re running into, solutions that they can come to. But then the
framework itself, we made a number of changes. Some of them were as small
as like we redid the visual style of the framework, the default visual
style of the framework.

It’s still really, really, really easy to restyle and modify, we wanted to
keep that as a facet of the framework. We never want to be prescriptive
about that. But it’s simpler, it’s a little bit more modern, it looks a
little bit nicer of the box than it did before I think. We added in a
medium grid, which was actually a much requested feature.

In the past we had basically when you were doing the grid for layout, we
had a small grid, small device grid and then we had sort of everything
else, tablets up through larger desktops, TVs, that kind of thing.

Now there’s an intermediary step which previously people would had to add
in themselves, but now you can do small, medium and large grid sizes when
you’re laying stuff out using the grid, which people seem to be pretty
happy about.

And I think the biggest thing or at least the sort of headlining change for
Foundation five was, Matt already mentioned it briefly, but it was
interchange. So we had a plug-in called interchange in Foundation 4, we
added it in 4.3 which allowed you to selectively load the right image based
on the kind of device you’re on.

It does it all client side, but we thought at least it was a reasonably
clever little solution for responsive images; which are still a problem for
responsive design, at least being able to load the right stuff at the right
time without doing a whole lot of backend mucking around and device
profiling, that kind of stuff.

So we added interchange in 4.3 to do that with images, in Foundation 5
we’ve changed interchange, that’s awkward to say. So that not only can it
load different images based on the kind of device you’re on. It can
actually be used to load entirely different HTML parcels in entirely
different sections of content for the page, depending on the kind of device
that you’re on.

The example we tend to trough out just because it drives the point home. Is
like, let’s say you have a contact page with a map on it. On a mobile
device you probably just want a static image of a map because interactive
maps are kind of hard to deal with on the web. They’re very long to load,
they’re very complicated. You probably just want a static image. But on a
larger device, you may actually wanted to load the full interactive like
Google Map.

So you can do that now with interchange by actually loading in two
different HTML snippets, based on whether it’s a small screen or a large
screen, one just has an image in it and one has a fully embedded Google
Map. So that’s one example of what you can use interchange for in five, but
we think the capabilities of what you can do with that now as far as
optimizing a responsive site well, would be really, really interesting to
see. We haven’t even had a chance to use it a huge amount yet.

We’ve used it plenty to test it, make sure it works, but it’s still kind of
a new thing to be able to do. I think it’s pretty much the only JavaScript
plug-in that will actually allow you to do that right now.

Tim: Yeah I think, I was actually looking through it last week or earlier
this week and it looks really cool. Does it also react on resize?

Matt: It does.

Tim: It does, okay.

Steve: So it’s not just on initial load?

Jonathan: It’s not just on initial load and actually the funny thing is we
even talked about this. We could have set it up to just be on initial load
because in practical terms, that’s the only time it’s really going to

Tim: I would have been all over that, just FYI.

Jonathan: But because we know that everybody who does responsive stuff
grabs the edge of the browser and goes wee… In and out. You’re like, now
we better make it work on resize, so it does work on resize.

Tim: Much appreciated.

Steve: I really appreciate the visual simplification you were talking about
earlier, because one of the problems I’ve had with other frameworks in the
past is that you always end up with something that looks like said

Mark: That’s perspective.

Steve: Yeah and it’s something that I’ve been curious about myself. Because
for the past year or so I keep just kicking around this idea in my head of
building something like this but never getting to it as most side projects
do on my end.

Jonathan: Right.

Steve: And I always think,” Why do I want to build something like this and
tell people what’s something going to look like?” And it looks like you’ve
put a good deal of focus into making sure it’s easy to override that this
time around.

Jonathan: Yeah and I think it comes down to sort of what the lineage of
some of these frameworks is. Because I mean there’s plenty of frameworks
now we could talk about, but if we talk about specifically Foundation and
Bootstrap. They came from very different purposes I guess, they actually
came from the same place which is kind of funny. Because Mark Audi used to
work here at Zurb, he worked with Matt and I actually.

But Bootstrap was originally designed to be a style guide for Twitter, it
was designed to be an internal style guide for them to quickly put together
internal tools, internal interfaces, that kind of stuff. Which is why for a
such long time, it looked just like Twitter.

Tim: Yeah.

Jonathan: But it actually began its life as Twitter blueprint, which was
literally a style guide. Whereas Foundation, the purpose we had with
Foundation was to abstract out the code snippets that we use so often. It
was too abstract those out so that we can use them for every one of our
clients. And our clients every time it has to look completely different. We
don’t ever have two client projects that look the same and that are going
to benefit from having the same sort of style guide in place.

So with Foundation, we always needed it to be very, very easy to restyle
and very agnostic about what it looked like because we have to make it look
like something different every time. Bootstrap was originally supposed to
look the same every time, so it was very prescriptive about how it
displayed things. And they’ve diverged from that a little bit, the
Bootstrap three stuff is certainly simpler and it’s easier to restyle than
it used to be. It’s still pretty prescriptive about some stuff.

Foundation we keep trying to make it easier and easier and easier to
restyle. We even stripped out a lot of styles from Foundation 4 to put it
into Foundation 5. Foundation 5 is quite a bit simpler, stylistically. But
it’s also, we tweaked a little bit, things like white space and font sizing
and stuff like that, so it does look a little bit nicer I think out of the
box. But it’s easier to restyle than it has been in the past.

Tim: So if someone’s using Foundation, you recommend them that they use it
as a like an underline technology, and layer styles on top of it? Or go
straight into Foundation and edit the styles themselves?

Matt: Yeah, absolutely. So we use it both as a prototyping tool and as
something that actually goes to production as the underlining style. So
like for example, every year we do this 24 hour sprint for a nonprofit
called Zurb Wired. We pick a nonprofit and within 24 hours, we totally redo
their website, materials and a bunch of other stuff.

So one of the challenges with that is, how do you actually prototype and
code up a new site and create a visual style for that? So we do this every
year and it’s crazy that it actually works, but we’ll have like one team
that’s sketching stuff out like crazy. Once they have the sketches, we’ll
start doing like a prototype in Foundation, which is just the barebones of
what the elements are going to look like without a visual style. Once that
static prototype is done, we start working in parallel, the developers can
start hooking it up to the CMS or whatever the back end is.

And the visual design team can start creating a visual design in the style
sheet so it lets you create kind of this prototype that is responsive. So
even if you don’t have a visual style on it, you can take your window, you
can size it up and down, look at it on a phone, look on a tablet and see
how this is actually going to work on different devices. And you can create
your visual style and once the visual style is done, you just drop the
visual style on top of that prototype basically right?

Jonathan: Yeah.

Matt: So it lets us hook it up to the backend, we’re doing the visual style
and it all kind of comes together in the end. But that same code that was
our prototype, that was like our clickable wireframe, is the code that goes
to production because Foundation is tested on all different devices, it
becomes that Foundational framework that you’ve build your visual design on
top of it.

Steve: So you think using Foundation will in your experiences, dealing with
client work, has using Foundation drastically cut down the project timeline
at all?

Jonathan: Oh yeah.

Matt: Oh yeah absolutely. It’s cut down the time to deliver things, I mean
that was the reason why we built it in the first place. Is that we kept
having to code these components over and over again right? And some of our
guys were really sharp, the guys and gals were really sharp at writing this
code and some of them were still kind of learning it. So it’s cut down our
delivery time, it’s cut down the time it takes us to get somebody up to
speed on code.

So all of our designers at Zurb, they also write [inaudible 00:13:00] as a
rule. Anything you do in Photoshop, you have to code that out. So that
means that everyone who comes in has to learn front end code and it’s much
quicker to teach somebody just the components that are in Foundation. And
not have to go like way down into understanding a lot of nitty gritty stuff
that you have to know, to actually make the components work.

They can just build it on top of Foundation and focus on like adding value
and not having to build these structural pieces every single time.

Jonathan: Even if we had never released Foundation at all, it would have
been worth it for us anyways…

Matt: Yeah, absolutely.

Jonathan: Just because of all the efficiently and time it saves for us. I
mean when we first started working Foundation, which was quite awhile ago
now. I mean we were still having to, very occasionally we were still having
to QA for like IE 6, like things like that. And it was just I mean, you do
just about anything you can to avoid having to do that over and over again.
So just the time it saved us in QA, because we could QA Foundation once and
just know that it’s stuff was going to work, that has saved us thousands of
hours over the last couple of years I would imagine.

Steve: I’m curious as a, I might be misreading this, my background is less
a developer more as a designer, but I was looking through the documentation
a little bit and it looks like one of the updates in five was also… more
mature I guess updating engine; for updating to future versions of
Foundation more easily. With something like that, is it also helping you
with not just new client projects, but maintaining code on ongoing or older
client projects? That you might still have a relationship with, someone you
worked for year or two ago and you’re still on contract to work with them
to maintain their code over time.

Jonathan: It probably will help us with this that, honestly Foundation 5
hasn’t even been out all that long.

Steve: So that’s very much a newer part, but I would see that as a good
advantage. Where you’re building your code base once, but you want to make
sure that as, we were talking before the show about Flexbox. Let’s say
Flexbox starts to really firm up and the language is done even across
browsers and you really want to implement that into Foundation. You could
put that into 5.2 whatever and use the easy updating… get it at least
into their code base so you can rework it and take advantage of new
features instead of having to rebuild or re-implement or something.

Jonathan: Yeah we’ll have more flexibility for that going forward I think.
You’re right, we did implement a lot more, our engineering team worked a
lot more on the delivery mechanisms for Foundation and how all you can
actually get it and keep it up to date this time around. I know we’re using
like Bower and some other newer stuff to be able to really easily do the
updates. And the Flexbox one is actually an interesting one because we’ve
been banding around building the grid Foundation out of Flexbox for
actually a long time now.

There was a branch of like 4.0 or 4.1 that was rewritten for Flexbox just
so we can play with it and see it how it works. It’s so easy to use…

Tim: I love it.

Jonathan: … it just doesn’t work everywhere yet.

Tim: It’s amazing, I actually found a really good mix in for it this
morning that we’re using…

Jonathan: Oh really?

Tim: …we’re launching a new homepage design soon and started using it on
that. But I might have probably tweeted it out but I’ll put it in the show
notes too, it’s really good. Covers all…

Jonathan: Nice.

Tim: …we were actually just talking about Flexbox before you guys called
in and everyone loves it.

Mark: I’m lusting after it because as I said, I’m still learning
development as I go. I’m a designer first and I look at Flexbox and I
think, all of the bulls*it that I’ve been trying to wade through in
understanding to make something. Float left and right and up and down and
clear to make all these crazy layouts. I’m like, this is how it should be
made and I’m chomping at the bit for this to be really useable on a broader

Tim: It’s so hard to teach floats to people too. They either get it or they
don’t get it and if they’re not getting it, you just sit there spinning
your wheels for hours trying to figure out how to get them over that last
rise before they figure it out. It’s just painful.

Jonathan: I remember I had like an epiphany when I went to rewrite the
Foundation grid in Flexbox. And I realized that it takes about a quarter of
as much code to represent the whole thing in Flexbox than it does without
it. And just like it’s preposterously easy.

Mark: Yeah and I got to tell you man. Because I think Steve in terms of the
learning floats and understanding it thing. My relationship with floats and
some of the CSS layout stuff that has been manhandled into doing what we
use it for now. It’s very Sisyphean…

Tim: Sisyphean?

Mark: Yeah. Like Sisyphus.

Tim: What?

Mark: Okay so ancient myth of Sisyphus, tortured for eternity, pushing up
this big boulder up a mountain, up a hill. And every time he gets it ever
just so close to the top, it slips and tumbles back down to the bottom.

Tim: Who do you think our audience is?

Mark: Very high brow fascinating…

Jonathan: Hey man, I appreciated Sisyphean, that’s a good word.

Mark: Thank you very much, so that’s my relationship with it. It’s like I
feel like every time I’m getting a grasp on it, I’m almost there and then I
lose it and then it makes me challenge my understanding of it. I’m like, I
totally don’t get this and I’m down to square one again rebuilding and
trying to re understand it.

Tim: So to just jump back into Foundation…

Mark: Away from Sisyphus?

Tim: Yeah, away from Sisyphean conversation.

Mark: You just don’t like words with more syllables, you have difficulties

Tim: Just use like half the size, forget it.

Mark: Typical developer.

Tim: Yeah so, you mentioned that you were… coding the same modules over
and over and over again and that kind of made its way into Foundation. Was
like how you decided which modules made it in and which ones didn’t? Or was
it just like, this is a framework so it should have tabs and it should have

Matt: I say it was about, what would you say, about 50-50.

Jonathan: Yeah.

Matt: 50-50, 50 is like these are things we really need, these are things
that we have to have in the framework. These are things that, and these are
things we have to in the framework that people demand. So like for example
orbit, we don’t ship orbit in a lot of client projects. We do use it, but
it is one of our most requested features and we know that tons and tons of
people use it and love it. Since we open sourced it. We did have to focus,
I don’t know maybe half on, just what you have to have, what people are

But may not necessarily be the best interaction pattern for everything.

Jonathan: Right.

Steve: When Foundation was first open source, was that a conscious choice
that you were going to put this out there as a product that you were hoping
people would use? Or it was just a, we build this for internal use; we
might as well put it up?

Mark: I’m curious when that start, because you guys indicated that it was
something for your internal projects and when did that switch happen to
realize that it would have value in the outside world?

Jonathan: Sure, so Foundation had its genesis in something called the Zurb
coded style guide. Which was actually like a, it was 16 column at the time
grid. It was not responsive, it like buttons and a couple of other things
but it was a like a boilerplate that we would start a lot of client
projects from. But it still wasn’t particularly abstract and it wasn’t very
full feature. So we decided we would take that, abstract it out, add in the
other remaining components that we knew we used for clients a lot.

And that became Foundation 1 which was still not responsive and no one saw
outside of Zurb or our clients. We used it with clients but we didn’t
release it open source. When we decided to, I think it was really just we
were using it a lot and we kind of figured one day we were like, “Boy this
is really handy, I bet other people would think this is handy too.” To be
totally honest, I don’t think we ever anticipated it being as big as it

And so we, we kind of figured, let’s clean it up, let’s get it packaged up
and ready to go out and we can release it to people. And in the midst of
doing that we kind of came to the conclusion that actually it should be all
responsive. Because we’re pretty bullish on doing things responsively, so
let’s do it that way. So we changed everything and rewrote pretty much all
of it to be responsive and that was Foundation two.

And that’s the one we actually released. That’s the first one we released.

Mark: I think what you guys did there, that’s a common altruism, but also
utility, this, “Hey I’m using this, someone else will find it useful too.”
I think it’s a common thread in the open source community. It’s why we want
to put stuff out there. But what’s fascinating to me is you guys have
landed, and I’m not familiar enough so maybe this is not super new. But
you’ve landed on a business model around it too. Because you want to be
able to put out something there for free, to let everyone use.

But in this case, you’re also, you got the basic documentation available
but I look at your site and I see $300 training sessions. To really learn
how to master this, so I think that’s a nice example of balancing… should
I say, optimistic developer altruism and… well my sentence fell apart.
Anyway balancing the altruism with real business needs.

Steve: I need to make money.

Mark: Need to make money, which I think a lot of things are lacking.

Jonathan: Right. It’s kind of like a content marketing model, right? We
give away content for free and it creates awareness of what we’re doing,
but everybody benefits. So it’s not like a freemium model where there’s
like a Foundation basic, but if you want the one that actually works, you
got to pay us money. No seriously, it’s open source, MIT licensed, do
whatever you want with it but there’s a saying at Google, the Google
developers they say like arguing code, right?

So we say that we’re really good at responsive web design, so we argue
code. We’re like we’ll show you, we will take a framework, we will open
source it, like look at our code, use it. And then it proves we actually
kind of know some of this stuff and we’re really good at it. So we get a
lot of leads on our studio’s business just by positioning ourselves at
people that really know their s**t. By producing a framework that works
really well.

Steve: Yeah it’s a really nice example of being able to build the business
outside of the product but still directly integrated with it. It’s nice.

Tim: So you guys are an agency similar to us, how do you deal with having
to support the product? I know there’s the workshops and everything but do
you have a team specifically assigned to Foundation? Or do people carve out
X amount of hours per week…

Mark: Yeah, beyond just the technical but even just the cultural difference
of being, external product development based versus client centric.

Jonathan: Right, so we’re totally team based here at Zurb, there’s a design
team, there’s an engineering team, an operations team and a connections
team. And within those teams, you work across a number of projects. So we
don’t just take one person and say, “You only work on the studio’s
business, or you only work on products, you only work on that.” Everybody
is part of like a functioning team. So you kind of sit roughly with your
own compatriots and whatever your discipline is. And you work across
multiple projects, so for Foundations specifically, it really changes.

The engineering team invests a decent amount of their time in Foundation
since they’re more geared towards operational tasks. Keeping things
running, we have a shifting support schedule for who answers emails and who
watches that stuff. Engineering is in charge of keeping the servers up and
when it’s time to do a big release or a big projects, designers will get
roped in as well right?

So maybe like a John will come in and help write some of the components for
the grid, or somebody else will sign up to do the documentation. If
somebody who’s kind of like leading the charge and they have to get other
people on board with like a project. And when it gets closer to launch time
like for Foundation 5, pretty much everybody was here, the night before or
the night… Two nights before the launch, the night before the launch,
cranking through stuff.

Doing QA, too busy tasks, it creates a I guess, a messier more complicated
structure. But then it’s more fun because you can work across a lot of
different things and it’s more efficient.

Tim: Cool, I have one pretty specific question about Foundation 5. I notice
that one of the changes was you went from camel case to underscores in
JavaScript variables.

Jonathan: So I asked, so Mark is one of our other engineers here and he was
actually leading the charge on Foundation 5. I was asking about this
yesterday, we got a lot of tweets and questions and other such things about
that particular change. It was actually, apparently in most of the plug-in
in most of the JavaScript, we were actually already using underscores. We
were already using snake case, but we weren’t consistent.

So we went back through and found the ones where we weren’t doing that and
we changed those to be snake case instead of camel case. And I think, Matt
I think knows more than I do, but I think that’s a rails convention isn’t

Matt: It’s a rail, yeah, I don’t know why they did that. You pick one or
other, it wasn’t consistent and they picked underscores.

Tim: Okay. Yeah I know when, I’ve always seen it as a kind of personal
preference. When I was coding more, when I was coding PHP and JavaScript at
the same time, I would pick one or the other. I would like use…

Jonathan: Right.

Tim: …underscores in JavaScript and use camel case in PHP just so when I
look at the code, I can tell what I’m looking at quickly. But yeah, I’ve
always seen it as personal preference. I’m not surprised you got a lot of
questions about it. Because it was such a, without knowing that you’re just
syncing up all the other stuff. It is peculiar.

Jonathan: We got to slip some stuff into these releases that people can get
up in arms about…

Mark: One of the series of angry blog posts, people with pitchforks
stomping outside.

Jonathan: Exactly.

Steve: You can just drop all the semicolons and see what happens.

Jonathan: Now that would actually cause us problems in older browsers

Steve: Yeah.

Jonathan: That’s a programming style of thing right?

Tim: S**t would get real.

Steve: Detect for IE 6 and just crash it.

Jonathan: Yeah, pretty much.

Steve: Something like that. There is a, somebody has a snippet of code they
published that specifically does that, that they want people to use.

Tim: That crashes IE 6?

Steve: Yes.

Mark: Well there’s, maybe not so quite as destructive as crashing, but I
remember a while when people were putting out things with browser
detecting, “Oh I see you’re using IE6, why don’t you try one of these other
nice browsers?”

Steve: Yeah that was in the issue of boilerplate for awhile actually.

Jonathan: Yeah.

Tim: So one of the bigger problems that I have with Bootstrap particularly,
is the way that people are using it. There are a lot of really
intelligently put together tools around it, but more often than not, when
you see a Bootstrap coded site, you know it’s Bootstrap because it just
looks like it’s poorly assembled. And you see a pileup of JavaScript plug-
in at the bottom of the page that are just burning unnecessary HTTP
requests. I’m wondering if you guys have experienced any of that with
Foundation and how you settle yourselves down when you see something like

Jonathan: We don’t see it as much, I mean if you look at, there’s a lot of
articles out there. People like to post articles of should I use Foundation
or should I use Bootstrap? And I would say that at least 80 percent of them
end with the conclusion of, if you are a developer and you don’t give a
da** about the frontend, use Bootstrap because it would be easier for you
and it will look pretty nice out of the box and who cares. And if you are a
designer or frontend person, use Foundation because it will be easier to
override and make it kind of your own.

And we see that with most, I would say most articles or most comparisons
and that’s probably pretty accurate.

Matt: Yeah I can’t think of a single instance or we see a site built with
Foundation and like cry and be like, “What are you doing to our beautiful

Jonathan Smiley: Yeah. And maybe we just don’t see them all, we probably
don’t. I’m sure there are plenty of sites out there that are just like,
“I’m going to throw this together in Foundation and not care about the
frontend.” But we certainly don’t see it as much.

Matt: Yeah and I think a part of it is that people who are looking for an
out of the box solution and really aren’t going to put a lot of work into
their site are going to use something like Bootstrap. They’re just going to
look at it out of the box right? If you’re using Foundation, you’ve
probably done a little more research, you actually want to style it up and
make it look good. I mean we get tons of submissions for our responsive
gallery and they all generally look good. There’s something going on there

Tim: So basically what you’re saying is if somebody is using Bootstrap,
they’re just uneducated, I hear you, I see where you’re going with it.

Steve: Maybe a better way to say that too is that the discerning designer
chooses Foundation.

Tim: Maybe.

Mark: Man it would really stink for gallery if like the absolute best
implementation of Foundation there, someone who just took it, ran with it
and made this beautiful elegant site, was for some like really horrible
hate group or something. Or some horrible offensive thing, it’s like we
really want to feature it, but no we can never show this to the world.

Jonathan: It’s a responsive site for Namibia, look at this thing. I will
share one story, so we did these, so way, way back in time. Even pre-
Foundation, back in the style guide, we had these buttons. They were called
our super awesome buttons and this is still why there’s like a thousand
buttons in Foundation today is we have this obsession with buttons.

So we had these buttons that we made called super awesome buttons and we
published them and they were wildly popular. But we messed something up and
we forgot to change one of the links for one of the like background images.
This is like pre, it wasn’t an image-less button to have liked a single
really small image. And in the download code, it links to the image on our
server and we distributed these buttons and they got sent to like

Everybody implemented them, so I’m going through our server logs one day
and I see all of these requests to like pornography sites. Like hundreds a
seconds and I’m like what the heck, what is going on here? And I traced it
down and it was because the buttons had become widely successful with porno
sites, especially. And the porno sites were too lazy to look at the code
and once people figured it out, they downloaded the button, they put it on
their server and they changed the link right?

But these guys, would typically just left it there so we were getting all
these sites like hot linking. But it didn’t let us actually see metrics on
like who was using our buttons right? And it was pretty amazing.

Steve: That’s a really fascinating insight to an otherwise, perhaps corner
of the Internet for many designers and developers. That’s pretty exciting,
good times.

Mark: I think most designers and developers have charted those corners of
the internet.

Steve: Professionally charted, professionally charted. That’s pretty

Jonathan: Our buttons convert 40 percent better for pornography.

Steve: That’s right.

Tim: Just put that right up as the tagline on the Foundation page.

Steve: So what’s next for Foundation? It’s been out for two weeks now?

Jonathan: Yeah it’s been out for two weeks.

Mark: This is the day after the election saying, so who do we want to see
for the next presidential pick, the next four years later. What’s next

Jonathan: I’d be lying if I said we hadn’t been talking about Foundation 6
for a little while already actually.

Tim: Sure.

Jonathan: So we have been, we don’t know exactly what it is just yet. I
think if I was going to give anything away about whatever the next version
of Foundation will entail; it’s going to have probably a stronger focus on
components that you need to build web apps. More so than marketing sites or
just sort of like consumer style informational kind of sites.

Steve: Okay.

Jonathan: We have a lot of components for stuff like that, we don’t have
nearly as many for building like responsive web applications, which we want
to put some focus on that. We’re actually doing a fair bit of work right
now exploring what our options are with Angular. If I can give that away.

Matt: We’ve used it so yeah we actually had a conversation, I think it was
on the phone with him now or yesterday. We’re talking with the Angular team
about them doing a port. We’ve been working on an Angular port for
Foundation. We wouldn’t move everything over to Angular, but we would have
a supportive angular port of Foundation. As well as the basic JavaScript
so, Angular is super hot right now.

We’ve been really happy with the framework, so we’re working with those
guys to make sure that we do angular the same that we did sat. We worked
with the sat team to make sure that our sat implementation rocked the house
and it was totally legit and hot. We’re going to same thing with Angular
team. We’re not going to do it, it’s going to be like something that’s not
really good.

Steve: Do you think that might present any problems by tying yourself to a
very specific technology?

Matt: Well we have to support both frameworks right? We have to keep just
like J query and have to have an Angular. They have to be at parallel
ports, we didn’t support both of them. Yeah we couldn’t just say this is
only Angular right? Because the nature of Angular, it would just be
everything would be in Angular. So we would keep jQuery as the one that
comes out of the box, but if you were using angular, there would be a port
that either we would have hosted.

Or you would go to the Angular team and you would get like the Angular port
of Foundation from them.

Steve: Is there any point where you start to worry about bloat? About
making it sort of unmanageable or un-maintainable if you’re adding lots of
lots to it? Or is that not really a hurdle you’ve come across yet?

Jonathan: We really worry about it but it hasn’t been a huge problem just
yet I mean…

Matt Kelly: But that’s been what we’ve talked about. That’s been the
biggest point of the discussion about the Angular port is that it’s going
to be that some people will have to support in parallel to jQuery. Are, you
have to weigh all the risks versus reward right?

Steve: Yeah.

Matt: We’re going to put in, Angular seems so hot right now. We have a lot
of our clients are building stuff on top of it. We get the feeling that if
we don’t have it, it’s going to become an issue. If you don’t have an
Angular support, so many people are using it and you can’t use [inaudible
00:33:26], Foundation becomes less valuable for those people.

Jonathan: We’re also not shy about, at least in large releases, we’re not
shy about frankly just removing things if we no longer think that they’re
useful or if they are going to distract from other stuff we’d like to be
supporting or would like to do a different way. Probably the best example
of that has been our continued course of shedding backwards compatibility
for IE as we go through the different versions of Foundation.

Steve: We all feel pretty strongly about IE despite what the analytics
sometimes tells us.

Jonathan: Right and I mean, most people are okay with the course that we
took with IE support. There is a very vocal minority who are very cranky
about our continued lack of support for anything before IE 9 but like
Foundation 2 supported IE 7. Foundation 3 still supports IE 8 and we will
still offer a download for Foundation 3 just for people who need IE 8

Steve: Is it degrading into IE 8 now? Or just certain components broken?

Jonathan: Well Foundation 4 and 5 just straight up don’t work in IE 8.

Steve: Okay.

Jonathan: I don’t think they completely explode so much as just…

Steve: It’s just the layout simplifies?

Jonathan: The layout simplifies quite a bit, they don’t really, they could
degrade if you did the heavy lifting to make that work. It’s mostly just,
Foundation four and five were both written mobile first, media queries are
required for a lot of that stuff to work. So you will get like a degraded
mobile experience.

Steve: Degraded experience…

Jonathan: On something like IE 8 or IE 7.

Matt: Right I mean logistically we don’t test IE 8 with Foundation four or
five. So like you’re talking about bloat, one of the big bloat things is
whenever we add a new feature, we have to test it across all of the
browsers that we support. To make sure that it actually works, so to keep
that bloat down, if we say we don’t support IE 8, then we don’t test the
framework across IE 8.

So theoretically, parts of it could work. Either you can have it gracefully
degrade in IE 8, we haven’t tested the components so you don’t know what
you’re going to get into. You don’t get that same guarantee that if we did
this with a supported browser, that means we test the crap out of it. It’s
kind of use it at your own risk.

Jonathan: Right and it’s a tough decision but there’s only so many of us
and there are only so many hours in the day kind of thing so we can’t
support everything. And we looked at analytics worldwide, we looked at US
analytics, we looked at major industry analytics, that kind of thing. And
we sort of made the decision of IE 8 is either dead or almost dead for most
anybody who’s going to care.

Tim: Did jQuery also drop IE 8 support in version two?

Steve: Yeah.

Jonathan: I believe so.

Steve: That’s why they’re maintaining 2.0 and 1.9.10.

Tim: Did that play into the decision at all?

Jonathan: Not for us, I mean with Foundation 5, we did switch back to
jQuery 2 in, well we switched back to jQuery but we used jQuery 2. In
Foundation 4 we were used Zepto actually.

Matt: And speaking of shedding things, we shredded Zepto…

Jonathan: Yeah we shed Zepto as of Foundation 5 and went back to jQuery.
Because we still supported jQuery in Foundation 4, we supported both.

Matt: With four we tested across both APIs, they should be the same but we
still tested jQuery and Zepto. And then now in five we don’t support, we
didn’t test it with Zepto, we just dropped it. jQuery is back in there as
the default.

Tim: Yeah Zepto was interesting, it kind of flare up for awhile and then it
just kind of trickle off.

Matt: Yeah and with jQuery 2, we’ve been dropping support for IE 8, they
got the file size way down for jQuery, so that’s now another nice option.
The advantage that it was lightweight but now you have a jQuery two option,
you can just drop that in.

Tim: Yeah I think a lot of that weight was from sizzle. The selector engine
because I think Query selector is supported now. Or in IE 8, so I think
they shed a lot of that weight.

Steve: Yeah they lean on query selector to do a lot of the work that sizzle
had been doing which was pretty advantageous for them.

Tim: So is there anything else you guys want our massive listening audience
to know about Foundation five?

Jonathan: I don’t know, it’s pretty rad; you should go play with it and do

Mark: That’s a new marketing slogan, play with it, do stuff.

Jonathan: It’s pretty rad, play with it, do stuff.

Tim: Totally rad.

Jonathan: I don’t know I mean, we’ve gotten pretty good reception to it so
far, but we love feedback, what we really, really love are like poll
requests to fix things. That’s a good favorite.

Tim: Thank you for saying that.

Jonathan: Yeah anything other people want to fix that we don’t have to fix
is great.

Tim: We’re actually pretty excited to use it. I do like which is rare
because I hate frameworks.

Jonathan: Oh cool, okay.

Mark: A storing endorsement from Tim Wright.

Tim: Yeah well it is tough to… But yeah I really do actually like it a
lot better than the other sort of frameworks that I’ve seen. In the past
and I think I will be using it in the future.

Jonathan Smiley: Well thank you and anybody, you guys or anybody whose
listening, if you do come across stuff that either you build that’s really
cool, then send it to us because we have a responsive gallery at Zurb
[inaudible 00:38:32]. Where we feature nice looking sites whether they’re
made with Foundation or not actually. It’s any kind of responsive site…

Tim: Oh cool.

Jonathan: …but we’ll tag ones that are made with Foundation with a nice
little made with Foundation thing because we’re whores for our own stuff.
And yeah other than that, the only thing I would mention or what Matt would
mention I guess is that Foundation actually also has a kind of weird
sibling now…

Matt: Oh yeah.

Jonathan: … called ink. Which is a, it’s basically Foundation for
responsive emails.

Tim: Oh that’s right yeah, I was actually talking to somebody earlier today
who is going to use it,

Jonathan: Oh cool. So if you have to make emails and you want to make
responsive emails that are going to be really awesome on all kinds of
devices, then ink is basically Foundation for emails. That’s the easiest
metaphor I can think of.

Tim: Is that I-N-C- or I-N-K?

Jonathan: I-N-K, it’s like the stuff you would write with.

Matt: So Matt got us a mythical sea squid…

Jonathan: Yeah the mascot is inky, inky the squid. So if you go , you’ll see a nice big squid that’s floating there and
holding devices and stuff.

Tim: I’m all about device squids, so I’m in.

Mark: Everybody likes squids so…

Tim: That’s how I prioritize most of my life, does it have a squid now?

Jonathan: Well hey, we got you covered then.

Tim: All right, that’s great.

Jonathan: You’re good to go.

Tim: So people can download Foundation at And how can
they contact you guys if they want to harass you?

Jonathan: So many ways.

Matt: So many ways, we got a forum that we launched with Foundation 5, we
are all over. That’s probably the best place to start with.

Jonathan: So that’s just Foundation.zurb@com/forum. You can get on there
and actually our team is on there quite a bit answering stuff or directing
people to questions, that sort of thing. So that’s a good avenue, you can
also tweet at us if you ever want to just ping us on Twitter. It’s
@Foundationzurb, you can find us on there. And I mean other than that,
there’s I don’t know, hunt around, you’d find us.

Tim: Google, all right, we’ll put a link to Google on the show notes.

Mark: There you go. Let me put that for you.

Tim: Yeah so I guess we won’t keep you guys too much later, we definitely
want to thank you for coming on the show and taking the time. This was
awesome, this was kick a** for us and anytime you’re welcome back on the
show. If you want to give us an update on Foundation or when Foundation 6
drops, we’d be happy to have you back on.

Jonathan: Absolutely, thanks for having us, we love doing these kinds of

Tim: Cool. Yeah so, we have some, we’re planning some events here at Fresh
Tilled Soil, coming up soon in February we’re having a dev conference. UX
for Dev, should be cool, you can get us on Twitter @thedirtshow and please
review us on ITunes or your podcasting app of choice. I hate saying that, I
think that’s all we have for today. Thank you for listening and we will try
and do better next time.

If it starts to go too long and you need to wrap it up, just like start
telling some story about a kangaroo and that will be our signal.

Mark: There you go, that’s a good safe word.

Tim: Safe word.

Mark: Or safe story, if you say kangaroo we’re going to keep going, it has
to be in the form of a story.

Tim: I like to pause for a moment to thank our sponsor, ,
if you have a photo of yourself licking the Rocky statue please send it in.

Author Tim Wright

More posts from this author

Sign up to receive updates from our blog

What we do Expertise

From concept to design, we'll partner with your team to deliver amazing product and website experiences.

Recent Projects Work

See the results of our most recent digital product and website engagements.