Normalize.css vs BootStrap

This is correct.

Normalize.css is a what's known as a browser "reset" that helps fix some inconsistent default styling across many popular browsers, so that your CSS styling will start out on level ground. There are many CSS resets, but Normalize.css is by far the most popular.

Bootstrap is a front-end framework that includes lots of CSS and JavaScript components, a grid system, typography, and many other robust features to help you get started coding a website more quickly. It also already includes Normalize.css in addition to its other code. You can see this in the overview for Bootstrap.

Got it! Thanks Mike and Nick for the clear explanations. Mike Baxter mentioned something about grids. What are some instances where it is absolutely necessary to use grids?

Hmmm... I'm venturing on to a thin ice of knowledge here as I don't think I know the breadth of front-end development enough to give a 100% correct answer to that question, but I'll give you my best conjecture from what I know:

It's only absolutely necessary to use grids when you've opted to do so. Let's say you use something like Bootstrap, which operates on a grid system. (And this is where I don't know enough of Bootstrap to say for sure.) Since Bootstrap relies on a grid system, your adoption of Bootstrap makes it almost necessary to use grids. You can always override it with your own CSS, but that gets dicey and kind of defeats the purpose of adopting Bootstrap. Another case in which you might find it necessary to use grids is if you work with a designer who works on a grid system. (Because the typical 12-column grid generally makes for some well-arranged design). In this case, it would be necessary for you to meet the design specs.

Other than that, I can't think of much else—it's just a nice rule-of-thumb sort of thing. I've heard some people say that the 12-column grid only works for basic layouts, and for advanced work you need to generate your own custom spacings and so on; custom in such a way that they don't fit nicely to a grid.

Bottom line is, Does it look nice? Is it functional? Does it work on most major browsers? Does it look the way you intend it to across all supported devices and browsers? That's the advantage of Bootstrap, jQuery, and to a lesser degree Normalize.css—they're made by a collaboration of people who concern themselves with good design and best practices for browser compatibility. But you can always hand-code something, and maybe even hand-code it better if you really know what you're doing or need to tailor code to a specific task. Nothing in the world is magical; it's just someone's good idea that they arrived at by trial and error. (Like how discovering the mass of the electron was the result of a horrible fumble in a lab.) 12 just happens to be nice because it divides into thirds, halves, and quarters really nicely, so it's convenient to make a grid out of it. Anyway, I'm not an expert, but that's my assessment from what I've seen of the industry.

Hmmm... I'm venturing on to a thin ice of knowledge here as I don't think I know the breadth of front-end development enough to give a 100% correct answer to that question, but I'll give you my best conjecture from what I know:

It's only absolutely necessary to use grids when you've opted to do so. Let's say you use something like Bootstrap, which operates on a grid system. (And this is where I don't know enough of Bootstrap to say for sure.) Since Bootstrap relies on a grid system, your adoption of Bootstrap makes it almost necessary to use grids. You can always override it with your own CSS, but that gets dicey and kind of defeats the purpose of adopting Bootstrap. Another case in which you might find it necessary to use grids is if you work with a designer who works on a grid system. (Because the typical 12-column grid generally makes for some well-arranged design). In this case, it would be necessary for you to meet the design specs.

Other than that, I can't think of much else—it's just a nice rule-of-thumb sort of thing. I've heard some people say that the 12-column grid only works for basic layouts, and for advanced work you need to generate your own custom spacings and so on; custom in such a way that they don't fit nicely to a grid.

Bottom line is, Does it look nice? Is it functional? Does it work on most major browsers? Does it look the way you intend it to across all supported devices and browsers? That's the advantage of Bootstrap, jQuery, and to a lesser degree Normalize.css—they're made by a collaboration of people who concern themselves with good design and best practices for browser compatibility. But you can always hand-code something, and maybe even hand-code it better if you really know what you're doing or need to tailor code to a specific task. Nothing in the world is magical; it's just someone's good idea that they arrived at by trial and error. (Like how discovering the mass of the electron was the result of a horrible fumble in a lab.) 12 just happens to be nice because it divides into thirds, halves, and quarters really nicely, so it's convenient to make a grid out of it. Anyway, I'm not an expert, but that's my assessment from what I've seen of the industry.

That was very helpful. Thanks Mike!

My pleasure! (I think the forums are malfunctioning, I didn't mean to post twice, and it seems like you double posted as well.)