[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.

[harlanlewis]

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: <div class="large-9 columns">

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:

<div class="article-content">

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.

[pault]

The quick answer is (feel free to disagree!), this is a great way to style a blog or microsite, but quickly gets out of hand. Using presentational classes bloats your markup but the size of your CSS assets will remain relatively constant, while using semantic class names requires writing new CSS for each new piece of content. The return you get on sacrificing some legibility in your markup increases with the size of your site. Large applications (or multiple applications that share the same CSS codebase) can also quickly run into the 4095 selector limit in (older versions of?) internet explorer. Using presentational classes has the added benefit of not requiring back end developers to write CSS (nobody likes writing CSS). It's mostly a matter of taste, but I can tell you from personal experience that CSS bloat in a large web application is easy to avoid and a nightmare to fix.

[maerek]

Paul - any tips for avoiding stylesheet bloat? A project I'm currently working on has a rapidly expanding style sheet, and I'd like to invest in some ways to cut down on the cruft.

[sprobertson]

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 `<div class="four columns"> ...`. With the ability to extend other classes, you could instead be more semantic and define your div as `<div id="main"> ...` 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/)

[nathos]

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.

[sprobertson]

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

[niclupien]

I'm a big fan of presentation-free markup and IMHO, SASS offers a good way to achieve it with mixins. Look at this article, it pretty much covers that topic. http://chriseppstein.github.com/blog/2009/09/20/why-styleshe...

The idea is to get something like this :

  @mixin three-column {
    .container { @include container;  }
    .header,
    .footer    { @include column(24); }
    .sidebar   { @include column(6);  }
    article    { @include column(10); }
    .rightbar  { @include column(8);  }
  }

  body#article,
  body#snippet,
  body#blog-post { @include three-column; }

I describe the whole thing with examples here: https://github.com/niclupien/compass-examples/wiki/Example-0...

[davej]

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.

[niclupien]

Love it! In my mind THIS is the best new feature of foundation 4 (I mean the new doc ;)