UX Night: Bootstrap and Foundation

andi galpern:

welcome everyone - we are recording so there will be a link later

UX Night happens on the first or third wednesday every month - organised by CascadeSF

here is a story about 2 nerds… @mdo+@smiley: that's us!

Mr Jonathan Smiley @smiley moved from Birmingham, AL to SF to work at ZURB in Sept 2008

He met @mdo and a friendship was born, but mark left in 2010 to work at twitter on Bootstrap

August 2011 Boostrap was launched by @mdo + @fat, November 2011 Foundation launched by @smiley

Jonathan Smiley:

A framework is patterns and best practices and shortcuts to get you to do things quickly

Mark Otto:

they're patterns and templates we do all the grunt work so you don't have to

andi galpern:

Paul Boag said the purpose of a framework was a pattern library to ensure design consistency

Mark Otto:

there's one called TukTuk, they claim to be not bootstrap

there's one called Ratchet - Jacob and COnner made that too

we did a lot of work for clients of different sizes, so we made style guides, 1st in photoshop, then html+css

the inspiration for zurb style guide was a gnereal template for all the client code

andi galpern:

so a framework is a style guide?

Jonathan Smiley:

Foundation came about from style guides for each client, starting with a barebones grid

after a while we saw every client needed similar things

the advantage of giving clinets style guides is that it empowers them to build things themselves without you

we decided to abstract the Zurb style guide , so it was fully general. Foundation 5.2 is out today

andi galpern:

if you want to get in a better mood, go to the bootstrap blog which has a 90s dance party for each release

if I wanted to design my own framework what would I do?

Jonathan Smiley:

don't design your own. it's a cool coding exercise but it's a lot of work. existing ones are sophisticted

figure out the things you use repeatedly, that there are lots of, and do them in the best way possible

when you design something you need to be opinionated, and people will fuck you up about it

andi galpern:

if you're doing a style guide and list of patterns - what then?

Mark Otto:

both Bootstrap and Foundation will let you decide which bit to strip out for style guide

you make some grids, buttons, forms and table styles and off you go, but testing it on lots of devices is hard

you can fork bootstrap and foundation as they are both MIT licencsed

Jonathan Smiley:

there are a lot of companies that now release their styleguides - mailchimp has one

andi galpern:

what happened with LESS? Is that still part of bootstrap?

Mark Otto:

When I started out I used LESS because I didn't know what a gem was so couldn't use SASS

LESS is basically on par since SASS. there is a SASS port for bootstrap now

I work in github where everythign is SASS, but the rest of the day is LESS for bootstrap

Jonathan Smiley:

we rebuilt foundation ins SASS for Foundation 3, and ZURB has always been a rails shop so gems weren't a problem

we've always used SASS, I've never used LESS so they seem pretty similar

Mark Otto:

LESS and SASS have their own opinions; eventually this should go into CSS itself

Jonathan Smiley:

that would be preferable to move all this into CSS - lets pretend CSS working group could get it done

pros and cons - pros there's a lot you don't have to do, as someone has done it

it'll take care of grid and responsiveness and javascript - you don't need to know a lot of javascript if you use one

you don't have to QA as much in a framework; you can rely on stuff working in any browser

the reason we made foundation was they we would spend hours on QA, and the framework learned

this was 5 years ago, so we had to use IE6 and IE7 so it was a world of pain

Mark Otto:

the other thing about grameworks is that end up really well documented - what you can do, and importantly what you can't do

the cons: it's easy to get stuck in what other people are doing, the same thing over and over

it's easy to not get to the point where you do something new on top

you may find that the team on the framework doesn't want to do what you want

Jonathan Smiley:

you get a lot of stuff for free, but you only get what the framework wants to give you

Mark Otto:

there are also a lot of extensions and plugins for the frameworks too

andi galpern:

is there a way to develop these so that it is easy to upgrade to the next version without breaking templates

Jonathan Smiley:

things change from version to version, especially with a major version number

we make decisions that are supposed to work for a while

in Foundation 4 we removed Tabs and made them into sections that were tab/accordions

in foundation 5 we reinstituted tabs and accordions, and broke all your sections, so sorry about that

Mark Otto:

bootstrap is used for a lot of internal sites but it is now being used in production too

the web moves fast and slow at the same time. we have to break some things now and then

we're not having to work on IE6 any more; foundation doesn't support IE8, and we'll drop that next

Jonathan Smiley:

we run into this all the time - "we just built our website on foundation 4, how do we upgrade?" Don't

You cna do the big new cool thing, and in all likelihood screw your product and company

Mark Otto:

you cab upgrade point releases easily, but don't do major versions

The big jumps we're going to break things so that we can stay sane. Save it for your next thing

Jonathan Smiley:

we have things at zurb still on foundation 0.8 - you don't need to migrate everything

Mark Otto:

we don't do usability studies directly on bootstrap. we get feedback on twitter and hacker news. HN we can leave

we have 13,000 issues on github that have been fixed, so we get feedback

we have a private repo for our next version, and we migrate issues from 3 to 4 when we see it

Jonathan Smiley:

anybody who works on these frameworks is an egomaniacal control freak bastard. We're opinionated

we can tell people who have good reasoning

Mark Otto:

if you see the same thing reported several times, that's a clue. The crowd mentality works

the hard part of open source is that you show everyone what you're thinking

i find that I piss people off easily, so can I apologise to the entire internet now in advance

Jonathan Smiley:

there are times when someone has a great idea, but it would fit Pure better than bootstrap

Mark Otto:

Jacob did a great talk on what is open source and why do I feel so guilty

I get 60 notifications a day on github just from bootstrap so I have had to build up a team to handle it

with 5 million sites out there we feel responsible for a lot of other people

Jonathan Smiley:

5 years ago if you'd said 'are you going to make a thing that 100s of thousands of people use" we'd have said No Way

Mark Otto:

if I have misread your issue and closed it without talking to you, let me know

andi galpern:

we all want to make the next big thing, but we can get stuck updating

Mark Otto:

whatever you work on, you can't fix everyone's issues it's hard

5 people on bootstrap full time

Jonathan Smiley:

there are about 5 engineers and 4 designers on foundation each day

Mark Otto:

github has an environment where you can work at any time

andi galpern:

if you haven't seen @mdo's coding style guide you should it's on his github

what is the difference in naming convention? @mdo: it was my choice @smiley: and mine

Jonathan Smiley:

with foundation we wanted people to come up to speed quickly, so it is very human readable

Mark Otto:

there are examples of people building for both bootstrap and foundation

Jonathan Smiley:

we do have a lot of similar things between bootstrap and foundation, as there are only so many kinds of things

both our frameworks and others are reasonably opinionated, find one that fits you

we always wanted foundation to be as easy to modify as possible - it used to be ugly out of the box

Mark Otto:

the biggest one is SASS vs LESS, though Bootstrap 3.1 has a SASS port.

in bootstrap we wrote our own CSS linter for LESS which makes it a very legible, and not too nested

make sure design talks to engineering. We're all smart, intelligent good-looking people trying to do cool things on the net

Jonathan Smiley:

if something doesn't work, what are you going to do? Zurb can support foundation

this is assuming your deign team does anything with code and cares - they should!

neither of us would have dreamed of this. Its flattering. Not humbling because we have enormous egos