Hacker News Reader

> Foundation's link takes me to a page where I have a bunch of options, and a bit "build a custom generated version".

Their navigation is fuck all. Bootstraps is easy.

Bootstrap:

- Here's how you get started

- Here's the components and how to use them

- If you want a custom build, go here

Foundation:

- Getting started? "Sites Docs" which is in a menu under their "Docs" menu

- Components? Included in the same menu under "Sites Docs" on the same page as getting started. The components are in the right hand menu.

- Custom build? Located in the "Resources" menu under "Develop"

Not at all intuitive. I still remember being frustrated at how I had to fumble around their site trying to find stuff.

> Bootstrap's takes me to a screen with 3 options, but also - and this is key - CDN links. Right there. I can paste a few lines in my HTML template and start working.

This has been available for Foundation for a few years already:

https://www.foundationcdn.com/

> I don't need to install node/npm/etc.

This is a biggie. I've been doing a lot more static site development and the JS frameworks now to create a decent website can been a huge PIA. There are a ton of them out there now - they're having the same issue JS frameworks are having, people are being fatigued by the amount of choices out there.

Compare that to MVC4 or 5 where I can get a Bootstrap template setup with views and controllers and create multiple templates in a matter of minutes, it's insane.

You went further than I did with foundation.

Tutorials takes me to a bunch of videos (ugh - no text to search?)

http://foundation.zurb.com/learn/tutorials.html

The top 6 videos as I scroll down are all something to do with email/html/css ("unsubscribe" is the first title I see - WTF?)

"what the zurb stack does part 2" is promising, followed immediately by 'what the zurb stack does part 1'. Not confidence inspiring.

I second this. I never got to dive into Foundation just because its docs are not accessible and I can't just put a link into my html and forget about the setup. With Bootstrap I just navigate to the "CSS" page and pick up some example code and be done with it. Even if I think that Foundation might look better I just don't feel that it worths the extra time I need to put in to make it work.

Bootstrap has much better form layout/controls/components that makes it superior to foundation for app development. At least it did when I was looking for something to recommend to the team 4-5 years ago.

4-5 years is ancient in the web space

True, and we did upgrade from v2 to v3 in that time.

Also using angular-ui to spin up some internal tools quickly.

https://angular-ui.github.io/bootstrap/

If it were just me, I'd go with skeleton and style the rest myself, but with a larger team, a custom boostrap theme seemed to work really well.

Yes. But oddly enough Bootstrap seems to have held up well none the less. Perhaps not ideal but if you did an average site in BS3 today you wouldn't be a complete fool.

Again, not ideal. But doable and certainly not fatal.

It also has a lot of inertia. Non-developer managers have heard of it. There are loads of plugins and themes for it. There are lots of tutorials.

You are right about it being the PHP of front end development - great analogy.

It was an early player, and there's inertia, but beyond that... why did it have so many plugins and themes for it early? because it was easy to get started.

and... forgot to mention - the entire thing looks decent out of the box. not great, but it's decent - every element is styled consistently, and looks far better than most people (especially devs) trying to roll their own UI/theme/colors.

I agree with you completely. It's good enough and its competitors don't show enough real world features to overcome that inertia.

Easy to get started...That's why it's called Bootstrap :)

Plenty of people whine about its bloat, but that's, as you've noted, not the point.

CDN hosting is not the reason why Bootstrap is more frequently used. You can easily do a web search for "cdn foundation".

Promoting CDN hosting directly on the page that 'getting started' links to is what I was getting at.

For experimenting and throwing an example together. So you have something in mind, maybe a wireframe or something one of your designers has made, or a customers existing site.

You go to bootstrap, hook into the CDN and start throwing some tags down. Boom. Bootstrap have you, you've invested time, effort and emotion into it. 90% of coders move on to the next profit making exercise. I know I did.... Sure, there are better CSS frameworks out there. But bootstrap is better than the crufty stuff we used to use, so it's win win win for me.

What evidence do you have that this is the main reason and not simply the fact that Bootstrap's wide popularity predates Foundation? .)

They both came out within a month of each other or so (bootstrap had a slight edge, I think). Having the Twitter name behind it gave it some PR, of course, but as I mentioned in another comment, having decent looking and consistent style out of the box from day one was yet another factor cementing their popularity.

Zurb answers "Why Doesn't Foundation Have as Much Styling as Bootstrap?" with "We purposely left our styles sparse. We didn't want to end up in a world where all the sites looked like Foundation." So... on purpose, I don't have a consistent and full 'out of the box' experience. I am required to do more work than I want to make it look decent (that's how I'm reading it, and my limited experience with zurb at that time).

True, it's a different philosophy. Having the added styling in the box like Bootstrap works for people who are good with the visual look of it out of the box. With Foundation, it's supposed to look like a wireframe to allow for your visual identity be easily laid on top of, a truly custom design.

Example: Bootstrap Nav Bar Link `.navbar-default .navbar-nav>.active>a` Foundation TopBar Link `.menu > li.active > a`

Foundation usually uses less selectors to override, lower specificity.

Yup. It's all in the name.

Bootstrap - Get something presentable, quickly.

Foundation - We'll help you start but anything above the foundation is up to you.

It's not hard to imagine why one had more mainstream appeal than the other.

So basically, Bootstrap is Rails/Django and Foundation is Sinatra/Flask.

And I don't use Sinatra because I always end up waste time to add to it most of what Rails gives me out of the box.

In CSS space, if the customer has a designer, I use whatever the designer decides to do. It's his task to fill the gap from Foundation to Bootstrap or (more often) customize Bootstrap and make it look nice. If the designer is me (laughing) then I use plain Bootatrap and that's the end of it.

Also, ASP.NET MVC uses Bootstrap by default. That's big win too.

I'm still using Bootstrap on my own small website for nearly this reason, and I still haven't really found a reason to install the framework to customize my build of it. My traffic is simply too small, and my site unimportant enough. The default options are just fine, and with minial effort look great on all the mobile devices I have at my desk to test with.

I don't use the CDN links though; something just doesn't sit right with me with that option. I'm glad it's there, and I'm sure it helps newer programmers or those that want to just toss it in a template to see how it works, but I'm not comfortable relying on a third-party server to house such a critical part of my site. I always self host those files in production.

> I truly hope they keep the CDN hosted stuff for Bootstrap 4.

Don't worry, even the alpha site has it on the front page: http://v4-alpha.getbootstrap.com/

Or maybe it's because Foundation hasn't been around as long, hasn't become a household name, and isn't as mature. Last time I tried to use Foundation I found some serious issues with their responsive layout features that even manifested in their own website.

It's been around pretty much the same amount of time. BS was Aug 2011, Foundation was Sep 2011. BS probably got more mindshare early on because of the Twitter name/association, and that probably cemented some mindshare, but it was simply easier and more complete for more basic use cases out of the box.

There are also a ton of Bootstrap layout design / code generator tools. I've yet to see similar for Foundation.

Why is anyone still doing a mock-up in PSD when you can "live prototype" with a Bootstrap generation tool?

Because some people doing design can't code, they know color theory and design. Photoshop is already known, bootstrap would need learning.

Basic markup isn't THAT hard. I mean an architect knows how to swing a hammer, yes?

That said, I know what you mean, and that's the point of something like Bootstrap Studio. You don't markup, it does. So now the "web designer" (perhaps in conjunction with some who actually understands basic frontend) is building a live "pixel perfect" mock-up.

Photoshop is a proxy. A Photoshop pixel isn't a web pixel. It's like saying, "I'm going to give you a rubber doll. I want you to build an exact replica that's human." Really?

People who still say "pixel perfect" just sound silly. "Web designer" with no sense for the difference between a hammer and a shovel aren't real web designers. Especially when far better tools are available, if you're willing to move forward.

I hope they take your criticism constructively though, because I agree. I'm a longtime Bootstrap user but wouldn't be opposed to trying out Foundation...but I honestly don't know where to start.

Like Bootstrap, Foundation has a nice big "Getting Started" link to click on. OK:

http://foundation.zurb.com/develop/getting-started.html

Neither Foundation's or Bootstrap's "Getting Started" page is particularly interesting to me. But Bootstrap also has a "CSS" nav button that my eye naturally gravitates to, right next to "Getting Started". I click on that, and I see right away what opinions and conventions Bootstrap has, starting from the HTML5 doctype. The sidebar on the right makes it easy to get to specific topics of design, such as "Tables" and "Grid system".

Where is the corresponding overview page for Foundation? They also have a "CSS" link but it's not in the nav bar, it's nearly below the fold on Getting Started. And clicking that brings me to this Download page. Is that intentional? There's already a prominent "Download" link in the nav bar. I expect CSS to take me to some kind of page that demonstrates the CSS conventions. Clicking on "Sass" takes me to an anchor on the "Installation" page for the "command-line tool"...what does that have to do with how Sass is used?

I guess the next best link is Kitchen Sink, which takes me here: http://foundation.zurb.com/sites/docs/kitchen-sink.html

And I get an alphabetical list of elements, the first one being "Abide", which...I have no idea what the name has to do with the element, whatever the element does. The Kitchen Sink page has two sidebars, and I'm not sure which one I'm supposed to focus on.

Maybe I'm an edge-case user, in that I don't really care to read tutorials to figure out how to use a front-end CSS framework. But that's what was appealing to me about Bootstrap from the very beginning. The design looked nice, the writeup of Bootstrap's most prominent elements and conventions had me sold right away. I didn't even know what a CSS framework was before Bootstrap, and had up to that point been satisfied with hand-coding CSS for every site. So whoever designed and edited the initial landing page for Bootstrap was doing something right, to so quickly make me realize my ignorance :)

Edit: Like the parent commenter, I regret my dickish tone of criticism and realize I need to take a nap. Not knowing much else about Foundation other than high praise from devs I respect, I would love for it to be as ubiquitous as a solution. Just pointing out that whatever technical flaws Bootstrap has, its introduction and overview docs are highly accessible and appealing.

> And I get an alphabetical list of elements, the first one being "Abide", which...I have no idea what the name has to do with the element, whatever the element does.

Obviously you’re not a golfer

FWIW, I don't think you had a dickish tone at all. I mentioned a couple of related criticisms in another comment - had I known the one above would have had so much activity I might have added it at the time.

"Tutorials" takes me to ... 20 videos? The first 6 of which have to do with email HTML/CSS, and "unsubscribe" is the first topic I see? Whether it's good or not, most projects I'm on I simply don't have time to dick around with so much ceremony up front in the hopes that this might save me time or give me a much better experience days/months in the future.

Again, Bootstrap is the "good enough" project. Even with more than a year of no real substantive activity, it's still more adopted and used and defaulted to than most other projects. It's the PHP of css/grid systems. It's the wordpress of css/grid/layout frameworks. There are many other platforms that are technically 'better', but none that are 'good enough' for a large number of use cases ('good enough' being, of course, in the eye of the beholder).

But no, you were not dickish. Your criticisms were pretty much just normal observations about why you can't get in to foundation.

Actually using foundation is easy as well, For a new project I would

just copy a template from http://foundation.zurb.com/templates.html

delete the stuff that i don't want & copy/adapt stuffs from kitchen sink http://foundation.zurb.com/sites/docs/kitchen-sink.html

"Sign Up & Download"

If you were looking for the fastest way to drive people away, you've found it.

If you use angular 1.x a lot of 3rd party directives depend on bootstrap which is annoying if you're forced to not use it, current project would be 10x easier using bootstrap rather than materialize CSS especially since we have to over write materialize to make it look like bootstrap

On the other hand, the Foundation CLI is an example of a well done command line project. Pretty slick, holds your hands along the way.

But I have to agree, bootstrap does what its name says :)

The need to just copy and paste code that links to CDNs is why so many people don't take frontend development seriously.

The fact that it's somehow considered an insult to link to a CDN, rather than installing a gigabyte of tool chains that take years to learn, in order to achieve the exact same result... would be the reason nobody takes front end developers seriously.

npm, bower, grunt, webpack and whatever is trendy right now, is the reason why some front development isn't take seriously.

Having the CDN link, or download with the js and css files is in my view a sign that you know what you're doing. Requiring me to use two package managers and a build tool that I didn't pick is uprofessionel.

> two package managers and a build tool that I didn't pick is uprofessionel.

I don't see the difference from Ubuntu forcing you to use APT or C++ applications forcing you to use Make.

Frankly, using Bootstrap from source is really easy, and tends to be my default path... I copy the bootstrap.less/scss as well as variables.scss to my project, update all the refs to the node_modules path(s), with the local variables... this way I can update said variables. I also create a local utils that includes the modules one... I'll add the local global styles to the lookup in webpack, and I'm off.

It's really nice, and allows me to comment out the bits I don't want/need and customize the few things I want changed (noto/consolas for fonts) and reuse the variables/fonts where needed.

Foundation, iirc originally required ruby, when I already was using node/npm for a lot of things... the better sass support via npm came later.

I don't think it's because of the CDN. It's probably because it just works better.

I think it's also because early on it had Twitter as a prefix. Back when people still have envy for Twitter. That didn't hurt at all.

Ironic that Bootstrap might be the best thing to come out of Twitter.