J. Hogue

I'm not sure about what the script is doing for you that it is not supposed to do, subfighter3. The script was written to specifically add rel=external to anchors, so, it is not an error that it adds them to <a> elements. Are you saying that it no longer works? Make sure that if you use a different classname for your container element, that you change the jQuery. I use .text in the $('.text a') jQuery each() but you may use something else.

dlow, thanks for that tip! You answered a question I had before I asked it. I recently noticed that in Chrome these actions were not being triggered, but didn't look into it yet. Now I know why... Thanks!

If someone can tell me how to escape @else in code blocks, I can go in there and fix them so we don't get <a href="/else">@else</a> instead. Thanks.

There are open source "fancy" projects out there, now, I noticed. <a href="http://timepiece.inostudio.de">Timepiece.inostudio.de</a> is one with a few fancier clock faces. Not suitable for small sizes, but they are pretty cool still if someone is looking for something to use for a larger display size.

Have you tested this at all with older Android (2.3)? I know with that system, the HTML entity #9776; had poor support and would not render, while the named entity ≡ had wider support. It's worth checking if that browser supports rendering this unicode entity.

Nice work, and good to see you guys jump on the Compass bandwagon. Fun stuff.

In one of my Pro Tips I show a function that includes "unitless". Essentially, this is a check that you can make in case an author adds "px" to the values of the mixin. If they do, you can check for that, and not add the "px" if it is already present.

I like this, personally, as I like to see units as much as possible in my SCSS. It reinforces how things are working, while unitless values (integers) seem scary... as in, "What did '24' in this context mean again? Pixels? Ems? Percents?" I like to avoid that confusion whenever possible.

I use something similar, and set my $base-font-size in my _base.scss with all my other config variables. I set the $basesize in the function to be equal to that variable by default, which avoids having to declare it everytime I use the function. The nice thing is, you can pass a new value there when the context needs to change – say, for when you want to control the font-size of nested elements.

My functions go like this:

/* Turn numbers with units into unitless numbers: https://github.com/nex3/sass/issues/533 */
@function clear-units($value){
    @if type-of($value) == "number" {
        @if (unitless($value)) {
            @return $value;
        } @else if unit($value) == "em"{
            @return $value / 1em;
        } @else if unit($value) == "px" {
            @return $value / 1px;
        } @else if unit($value) == "pt" {
            @return $value / 1pt;
        }
    } @else {
        @warn "Not a number value: #{$value}";
        @return $value;
    }
}

/* Easy little function to do the math of pixel to EM conversion for us. Needs a base-font-size set in _base.scss */
@function px2em( $pixel, $base-size:$base-font-size ) {
    /* Remove units for easier math. We are converting to EMs anyway */
    $pixel: clear-units($pixel); 
    $base-size: clear-units($base-size); 
    @return #{$pixel / $base-size}em;
}

I'm not sure why those @else declarations got wrapped in an anchor when the code snippet rendered...

It should also be noted that this little function is great for any pixel-to-em conversion, so there is no reason why you can't do this: @media (max-width: px2em( 480px )) { }

@naholyr Pictos has a great overview here: http://pictos.cc/articles/using-icon-fonts/

Basically, the trick is that pseudo elements (:before and :after) will not be read by JAWS and other screenreaders and do not add additional unsemantic content to the markup. If icon fonts are used as a progressive enhancement, they will add to the experience and not add content that doesn't belong there.

That said, we still need to keep accessibility in mind. Markup like <a href="#"><span class="icon"></span></a> is not good practice, as there is no content there when the icon does not load. Always think of your base, no frills user, and if you must, use tricks like text-indent: -999em; to remove content from the display of an element but maintain it for screenreaders.

Yes, I should have mentioned all of the different places that I got inspiration from. Jeremy's breakthrough idea of labeling the body with a pseudo element was one of them.

Interesting that you mention images. Most, not all, browsers will not download images contained in media queries until the media query conditions are met. For background images, this is nice to know. But you are correct, for other images in markup, the browser will still download them even though their display may be set to none in the CSS.

Nice idea, and minimally-designed (which is nice). Mobile browsers will not treat this like a form element, so the behavior may not be optimal for those devices. Just something to keep in mind.

Chosen.js does similar designy things with native form elements, but you can control its implementation – display the fancy UI only for non-touch enabled browsers, for instance.

Nice... I can see this being very useful in responsive website, where the way items in a footer, for example, break funny at different widths. Sometimes, you want to force a line-break, but dont want to use javascript to inject a <br> (or similar) into the DOM or include a <br> that you end up hiding with display: none most of the time.

IE7 will mess up your UL > LI menus when you use inline-block. Make sure to pass IE7 display: inline, and it will treat LIs the same way that other browsers treat inline-block. This is the best way to center LIs in a UL and have them still line up next to each other (look like they are using float: left).

@dpashkevich A SASS tool like Compass helps in this avenue, as it has many, many common ones built in, plus other useful mixins like responsive grid libraries (We recommend Susy). Worth checking out if you are not familiar.

Thanks for the succinct explanation of the differences.

If I want to use a set of rules and @extend them, but don't want the base class to show up anywhere, I use the "%" operator.

%module { } means that the class ".module" won't show up in the output anywhere.