7 ms·
For everyone saying "Foundation" when people ask what else... let me explain why Bootstrap is used so much more frequently than all other options combined. htt
by mgkimsal 10y ago
For everyone saying "Foundation" when people ask what else... let me explain why Bootstrap is used so much more frequently than all other options combined.
http://foundation.zurb.com http://foundation.zurb.com
vs
http://getbootstrap.com http://getbootstrap.com
Each has a link to 'download'.
Foundation's link takes me to a page where I have a bunch of options, and a bit "build a custom generated version".
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.
I don't need to download/generate code.
I don't need to install node/npm/etc.
I don't need to install and learn sass stuff.
I don't need to make a lot of decisions or do a lot of extra unrelated stuff to get started.
Bootstrap is the PHP of the css/grid/framework world (for better and for worse).
I truly hope they keep the CDN hosted stuff for Bootstrap 4.
EDIT: didn't mean to pick on foundation specifically - this "take control of every aspect of all your layout/grid/css" that most other frameworks require works to their disadvantage when it comes to popularity and uptake.
- blowski 10y agoIt 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.
- mgkimsal 10y agoIt 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.
- blowski 10y agoI agree with you completely. It's good enough and its competitors don't show enough real world features to overcome that inertia.
- chiefalchemist 10y agoEasy 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.
- xixixao 10y agoWhat evidence do you have that this is the main reason and not simply the fact that Bootstrap's wide popularity predates Foundation? .)
- mgkimsal 10y agoThey 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).
- rafibomb 10y agoTrue, 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.
- chiefalchemist 10y agoYup. 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.
- freehunter 10y agoSo basically, Bootstrap is Rails/Django and Foundation is Sinatra/Flask.
- buckbova 10y agoBootstrap 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.
- jfktrey 10y ago4-5 years is ancient in the web space
- buckbova 10y agoTrue, 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/ 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.
- chiefalchemist 10y agoYes. 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.
- ivrrimum 10y agoI am using foundation for all of my projects recently. In my opinion it is way superior. Mobile look edge-cases are a lot easyer to get done without extra custom css, notifications are buetifull, etc.
- atarian 10y agoCDN hosting is not the reason why Bootstrap is more frequently used. You can easily do a web search for "cdn foundation".
- mgkimsal 10y agoPromoting CDN hosting directly on the page that 'getting started' links to is what I was getting at.
- monk_e_boy 10y agoFor 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.
- at-fates-hands 10y ago> 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/ 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.
- mgkimsal 10y agoYou 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 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.
- tiglionabbit 10y agoOr 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.
- mgkimsal 10y agoIt'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.
- chiefalchemist 10y agoThere 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?
- Moru 10y agoBecause some people doing design can't code, they know color theory and design. Photoshop is already known, bootstrap would need learning.
- chiefalchemist 10y agoBasic 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.
- realstuff 10y agoThis is all nonsense reasoning.
- danso 10y agoI 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 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 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.
- 10y ago
- edem 10y agoI 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.
- jasonlingx 10y ago> 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/ http://v4-alpha.getbootstrap.com/
- jasonlingx 10y agoI don't think it's because of the CDN. It's probably because it just works better.
- chiefalchemist 10y agoI 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.
- shams93 10y agoIf 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
- tylersmith 10y agoThe need to just copy and paste code that links to CDNs is why so many people don't take frontend development seriously.
- mangeletti 10y agoThe 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.
- mrweasel 10y agonpm, 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.
- TomMarius 10y ago> 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.
- tracker1 10y agoFrankly, 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.
- zeta0134 10y agoI'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.
- coolg54321 10y agoActually using foundation is easy as well, For a new project I would just copy a template from http://foundation.zurb.com/templates.html 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 http://foundation.zurb.com/sites/docs/kitchen-sink.html
- bachmeier 10y ago"Sign Up & Download" If you were looking for the fastest way to drive people away, you've found it.
- kowdermeister 10y agoOn 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 :)