Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Zurb Launches Foundation 4

zurb.com

Post reply on HN
Print view View original

41–50 of 80 posts

Re: Zurb Launches Foundation 4

#41

Post by account_taken »

mcrittenden wrote: post #13
markdown wrote: post #12

Earlier quoted context omitted.

Foundation is more flexible. Bootstrap is very opinionated. Bootstrap is awesome for people who aren't comfortable with CSS and just want to put up something quick and don't mind if it looks like every other site out there. Foundation lets you write better markup. Also, If I remember correctly... Bootstrap has caught up now, but in earlier versions, their grid wasn't nestable, which made it almost useless for suffici…

Do you have any specifics on why you consider Bootstrap more opinionated? I've used both on a few different sites and haven't really noticed this.

Bootstrap styles are deeply baked in. Changing the variables file isn't enough if you want a non-bootstrappy looking site. Foundation's styles are easier to override and to get the look you want.

Bootstrap's eco system is huge. If I had to use one, it would be Bootstrap. Since I can choose either, I use Bootstrap most of the time and Foundation when I need more control.

Re: Zurb Launches Foundation 4

#42

Post by FilterJoe »

I couldn't find any examples on the site of using "the magic of Scss, you can now remove almost all of the presentational classes from your markup." Could someone provide an example, or provide a pointer to an example of html markup which removes all presentational classes?

I did look at their templates site:

http://foundation.zurb.com/templates.php

and I still see presentational markup.

EDIT: I'd also like to see a sample SCSS mixin which attaches the style to the HTML. Something as simple as styling a few "Hello world" phrases arranged in a grid would be great.

Re: Zurb Launches Foundation 4

#43

Post by mattyfo »

mcrittenden wrote: post #27
arcosdev wrote: post #20

Earlier quoted context omitted.

The whole javascript-hipster-semicolon debacle would be high on my list

That doesn't really affect the developer using it though. GP's argument that Foundation is more flexible and Bootstrap is more opinionated seems unrelated to the semicolon debate.

I disagree, I found the Bootstrap JS code hard to read and follow because of the lack of semicolons. For a framework that is supposed to help people 'bootstrap' it would seem to me that making their code understandable and accessible is something important.

Re: Zurb Launches Foundation 4

#44

Post by davej »

FilterJoe wrote: post #42

I couldn't find any examples on the site of using "the magic of Scss, you can now remove almost all of the presentational classes from your markup." Could someone provide an example, or provide a pointer to an example of html markup which removes all presentational classes? I did look at their templates site: http://foundation.zurb.com/templates.php and I still see presentational markup. EDIT: I'd also like to see a…

There's examples on almost every page of the docs. For example, here's the docs for buttons: http://foundation.zurb.com/docs/components/buttons.html

Just scroll down to the "Build with Mixins" section.

Re: Zurb Launches Foundation 4

#45

Post by sprobertson »

FilterJoe wrote: post #42

I couldn't find any examples on the site of using "the magic of Scss, you can now remove almost all of the presentational classes from your markup." Could someone provide an example, or provide a pointer to an example of html markup which removes all presentational classes? I did look at their templates site: http://foundation.zurb.com/templates.php and I still see presentational markup. EDIT: I'd also like to see a…

Here's what I think they mean: without Scss/Sass extension, to get your main div to be 4 columns wide you have to do something along the lines of ` ...`. With the ability to extend other classes, you could instead be more semantic and define your div as ` ...` and in your Scss file say `#main { @extend columns; @extend four; }`.

I'd personally stick with the presentation classes for most cases though. The templates likely do it this way so you can just throw the Foundation CSS on and it's ready to go.

EDIT: Thinking more about it, I think a huge advantage is that if you had an already-structured HTML file, you could write up a few @extend rules and apply a grid without having to add classes to everything. (You could use this technique to quickly throw up a grid for something like http://csszengarden.com/)

Re: Zurb Launches Foundation 4

#46

Post by harlanlewis »

FilterJoe wrote: post #42

I couldn't find any examples on the site of using "the magic of Scss, you can now remove almost all of the presentational classes from your markup." Could someone provide an example, or provide a pointer to an example of html markup which removes all presentational classes? I did look at their templates site: http://foundation.zurb.com/templates.php and I still see presentational markup. EDIT: I'd also like to see a…

Agreed, the templates are not exhibiting how to avoid presentational classes. This may be a case where small-scope examples are poorly suited to real-world implementation, but I'll take a quick stab at moving to more descriptive (dare I say semantic) class names.

------

EXAMPLE: http://foundation.zurb.com/page-templates4/blog.html

Line 45:

CSS: .row .large-9 { position: relative; width: 75%; } .row .columns { position: relative; padding-left: 0.9375em; padding-right: 0.9375em; float: left; }

------

With 'the magic of Scss', you could replace multiple presentational classes with a single class that refers to the element's content or purpose, and then use @extend for the above-defined grid classes.

So our new HTML would look like:

And the Scss:

.article-content { @extend .large-9; @extend .columns; }

------

Edit: formatting, also: there are plenty of debates to be had about writing classes this way. The subject merits its own lengthy discussion and (I think) the answer changes depending on what you're trying to do, so I ain't touchin it.

Re: Zurb Launches Foundation 4

#47

Post by nathos »

sprobertson wrote: post #45
FilterJoe wrote: post #42

I couldn't find any examples on the site of using "the magic of Scss, you can now remove almost all of the presentational classes from your markup." Could someone provide an example, or provide a pointer to an example of html markup which removes all presentational classes? I did look at their templates site: http://foundation.zurb.com/templates.php and I still see presentational markup. EDIT: I'd also like to see a…

Here's what I think they mean: without Scss/Sass extension, to get your main div to be 4 columns wide you have to do something along the lines of ` ...`. With the ability to extend other classes, you could instead be more semantic and define your div as ` ...` and in your Scss file say `#main { @extend columns; @extend four; }`. I'd personally stick with the presentation classes for most cases though. The templates l…

Not mixins, but @extend: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#ex...

It's selector inheritance -- rewriting selectors instead of repeating properties & values.

Re: Zurb Launches Foundation 4

#48

Post by joeblau »

Wow this looks amazing. The off-canvas layouts for mobile look great. I think I'm going to migrate my Github page from Bootstrap to this.

Does anyone know if Foundation has any CDN's?

Re: Zurb Launches Foundation 4

#49

Post by antrix »

wilfra wrote: post #2

What's the advantage of using Foundation over Bootstrap?

When I refreshed my resume [1] last year, I went with Bootstrap first. But I found it really difficult to modify the defaults that Bootstrap provided. The deal-breaker for me was that the responsive grid worked only when the container width was set to the default value. Changing the default width broke the responsive grid. In the end, I tried out Foundation and it was a breeze to customize it to my needs.

My take is that Bootstrap provides a lot of stuff out of the box (including a rich third-party ecosystem) but Foundation is better suited as a customizable, well, foundation for your site.

[1] http://antrix.net/resume/

Re: Zurb Launches Foundation 4

#50

Post by sprobertson »

nathos wrote: post #47
sprobertson wrote: post #45

Earlier quoted context omitted.

Here's what I think they mean: without Scss/Sass extension, to get your main div to be 4 columns wide you have to do something along the lines of ` ...`. With the ability to extend other classes, you could instead be more semantic and define your div as ` ...` and in your Scss file say `#main { @extend columns; @extend four; }`. I'd personally stick with the presentation classes for most cases though. The templates l…

Not mixins, but @extend: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#ex... It's selector inheritance -- rewriting selectors instead of repeating properties & values.

Ah you're right, mixins seem to be more useful for specific nuggets of style. Updating my comment.
Post reply on HN