Tip:
Highlight text to annotate it
X
Hi, I'm Ophelie at Learnable.
And today we're talking to Alex Walker and Brad Barrow.
Alex, I'll let you introduce yourself.
I'm Alex, and I'm working on the front end at Learnable and
at SitePoint for a number of years.
And Brad, what about you?
Yeah, the same also--
Front End and I work at Flippa.
Great.
Today we're talking about Foundation and Bootstrap.
Alex, can you take us a little bit across a little bit of the
history and the differences there between the two.
Ah, let me see, OK.
Bootstrap is a project that came out of Twitter.
It's fundamentally a grid-based CSS system for
laying out pages.
As you can imagine, with the popularity of Twitter and the
focus that anything that they do gets when it gets put on to
GitHub, it gained popularity quite quickly.
And it also came along at a time when a lot of frameworks
like 960 grid system, and BluePrint and a few of the
other big players in that market were starting to become
a little bit on the nose in the way that they were built.
So it gained a lot of popularity quite quickly.
ZURB came along at about the same time with a new framework
called Foundation, which they built in-house
and then open sourced.
It's on the MIT licensing system, which means you can do
whatever you like with it.
And it's the central part of a lot of the
products that they build.
They built prototyping tools and user testing tools.
And Foundation is at the core of that system.
So yeah, I think probably that covers the main
part of them both.
And Brad, which came first, Foundation or Bootstrap?
Yes, so there's a bit of debate around that subject.
So Bootstrap obviously came out of the Twitter project.
They had a number of little mini apps which were full of
different frameworks, different CSS styles and
approaches.
And during a hackathon week, Twitter's developers
actually built Bootstrap.
ZURB, on the other hand, has a style guide that they use
in-house, and that style guide just got bigger and bigger and
bigger until they decided to actually take some time and
polish it into what has become Foundation today.
There's a bit of contention around the fact that perhaps
because there are a couple of ZURB developers working at
Twitter at the time that they developed Bootstrap, that
perhaps some of ZURB's ideas were kind
of involved in Bootstrap.
So whilst Bootstrap was actually released first as a
framework, some people say that ZURB was actually the
forerunner here.
And who should be using which one?
What are the main differences?
I think it comes down to personal preference
a lot of the time.
Both the frameworks, they're built for a similar purpose.
One, Bootstrap is written in LESS and Foundation is written
in SASS which are both precompiled CSS languages.
So if you're more familiar with one of those, then that
might sway your decision.
Although in my opinion, I think that Bootstrap is more
suited to rapid prototyping.
It has a large component library so you can very easy
just whip up a demo site or a support product site, using
their pre-built components.
Foundation, on the other hand, focuses on being able to
create your own framework, so it's kind of more of a
foundation for your CSS framework of your application
or your site, rather than a foundation
for the site itself.
So if you're looking to build a large complex app, and you
need to organize your CSS, then Foundation is probably
the one for you.
If you want something quick, Bootstrap.
I feel like Bootstrap is a little bit like
WordPress in some ways.
There's a massive community, and there are tools and themes
by the absolute truck load.
And almost one of the problems with Bootstrap can sometimes
be just finding the thing that you need.
There's probably something that you need that's already
built in Bootstrap--
a theme or a tool that already uses their front-end GUI-type
tools that allow you to build Bootstrap
directly onto a browser.
But you'll spend a long time googling and trying things and
downloading them.
By comparison, ZURB had kept the Foundation community and
the docs and everything around that pretty sharp and focused
and kind of tried to keep things fairly stripped down
compared to the universe that's kind of
evolved around Bootstrap.
I think it's worth saying that in Bootstrap's latest release,
Bootstrap 3, they've actually separated their theme, as they
call it now, from their CSS.
So before Bootstrap had quite an opinionated look and feel,
but now they've tried to step away from that so you can
actually just use their core grids and components and leave
the Bootstrap look and feel off to the side.
But, as Alex said, it's kind of get away from that massive
community that's already built itself up.
Learnable and SitePoint both recently switched to
Foundation.
Learnable about used to be on Bootstrap.
So what's the story there, and why did we choose Foundation?
That comes down a lot to a timing issue with us.
We were looking from around April this year to
redevelop the site.
And the mobile version was going to be a massive focus.
We really needed to lift our game in that department.
And at the time, there was a release candidate for
Bootstrap but the current version of bootstrap was
certainly--
it was responsive, but there's a pattern for our responsive
development called "mobile first".
And that's a method that's generally believed to be the
way to go now with responsive design, which is to make the
native side of any page designed to render perfectly
on the phone.
And then, as you expand the device and the screen that
you're on, you start using mini queries to build up the
design and expand it for a larger device, rather than the
other way around, which is the way that most responsive
designs were done originally, and it's the way that
Bootstrap was handling responsive design at the time.
So at that stage, I think that it was almost a no brainer to
choose Foundation.
It had been Mobile First and it's really probably had
maybe, I think, five or six serious
advantages over Bootstrap.
I think it was August this year, Bootstrap stepped up to
its version three.
And most of those advantage that Foundation had have now
been normalized and brought back to the field.
So it's no longer quite as clear cut.
I think if we were starting from scratch now, I think I'd
still probably go with Foundation, because I feel
like the underlying structures and tools underneath the
surface of Foundation are a little bit more open and
easier to get your head around.
It's got really good documentation.
And just having that clean lack of the rigmarole that's
around Bootstrap is actually kind of an
advantage after a while.
But the other thing is also that even when Bootstrap was
released in August, we're a SASS we've
sort of favored SASS.
And it comes out as a LESS product originally.
And then there are ports that are written over the SASS And
they'll generally trail a little bit behind, and every
time there's a change made, there's a pipeline that things
have to go along to get down to that SASS, version, whereas
Foundation is SASS from the start, so anything's that's
done in Foundation becomes a SASS thing immediately.
So that was important to us from day one.
Brad, what about at Flippa?
What do you guys use?
So, Flippa, as it stands, is not actually on a framework,
but what we're doing is we're slowly migrating to Bootstrap.
We're actually bringing it in progressively rather than just
in on big go moving to Bootstrap.
Why did we choose Bootstrap?
Mainly because we already implemented quite a few of its
components.
We use Angular.JS on our front end.
And we use a third-party library called Angular UI
which relies on Bootstrap styling.
So we thought we could move to Foundation, but that means we
would then have to style all of those components again to
manage Foundation, But we could just use Bootstrap and,
as we said earlier, the differences as far as the
structural language goes, they're quite similar.
I do agree with Alex that SASS is preferable.
So we are actually using one of those ports, so to speak.
It's a Ruby
gem, which keeps the Bootstrap SAAS conversion up to date.
So it's working for us so far.
And yeah, I think we're pretty happy with our decision.
At a personal level, I would probably choose Foundation.
But you have to make decisions for what you're working on.
So Alex and Brad. you've outlined the pros and cons of
both Foundation and Bootstrap.
And so far, it really sounds like it depends on what kind
of developer you are and what languages you're most
comfortable with.
If we're looking ahead to the next year, which one makes the
most sense?
Say, you're advising a new developer on which framework
they should opt for.
Which one would you say, Brad?
So my default response would have been Foundation.
That being said, Bootstrap 3 has come a long way in
catching up to the standard that Foundation has set up.
I still think I'd probably go with Foundation.
I just prefer their documentation.
As Alex has said, there's less distraction
with all those themes.
Communities are Bootstrap. It's just leaner and meaner.
It's easy to get started with.
That's my take on it.
Yeah, I'd certainly be leaning towards Foundation.
We're at a moment in time where there's almost feature
parity between the two.
And there are a few little differences, things like block
greetings Foundation some people particularly like, in
there's are some different set of features that might suit a
particular style.
Say, you were doing a gallery.
block great might be something that's
particularly useful to you.
But in general, I feel like even though Bootstrap has
pulled alongside in terms of its feature development, it
took almost a year for Bootstrap to come back to that
feature parity.
And I think this week we're expecting
Foundation 5 to be released.
So I get the impression that the ZURB guys are really keen
to just be setting the agenda what a really good CSS
framework is all about.
So as these new styles and new things become apparent, I
think that you got to see them in Foundation generally before
they get through Bootstrap.
And I think that's a pretty important things.
So I'd be definitely staying with Foundation for the
foreseeable future.
So it sounds like the choice is between lean and mean
Foundation and community back to Bootstrap?
Yeah, although there's still a significant community behind
Foundation.
Yeah.
I think it's just more focused And the Zurb guys--
and even the way they talk at conferences that kind of
stuff, they keep a very strong, consistent message all
the way through.
And I think that's easy to your time effectively when
you're following their stuff.
Yeah, I think there's good reasons, both But
Foundation for me.
Mmm.
Yeah, I agree..
So thank you, Brad and Alex, for taking the time to talk
and thank you for watching.
If you have any opinions on this, which one do you prefer
Foundation or Bootstrap?
Or if you have any questions, Alex and Brad will both be
responding in the comments.