Sunday, November 02, 2014

...CSS

Contents

  1. Font Stacks
  2. Media Query
  3. Animation Mixin
  4. Accessible hiding
  5. Overflow Ellipsis
  6. Word Wrapping
  7. Clear any parent styling to a div
  8. A SASS Mixin for Media Queries and IE
  9. Vendor Prefixing 
  10. Float Clearing
  11. Offscreen Text


Font Stacks

Posted at CSS-Tricks

On this site I have four font stacks:
  1. Brand
  2. Headers
  3. Body
  4. Code
If you're properly careful with fonts, you probably aren't setting font-family too many different times in your stylesheet. If you're setting the same stack a dozen times, there is something wrong going on. But, you might have to more than once. For instance, you might have a default body font set literally on the <body>, but that won't cascade into form elements, so if you want to use the same font there you'll need to set that again on those elements. Now that you're setting it in two places, a @mixin is already useful.

I like using @mixins for this rather than a string variable set to the font families themselves, because the @mixin allows you to set other properties too if you wish. For instance, you might be using a @font-face font where you're only loading one particular weight and thus you want to set that weight whenever you set that font-family.

Here's the @mixins at the moment for this site:

@mixin font-stack-brand {
  font-family: 'Gotham Rounded A', 'Gotham Rounded B', "proxima-nova-soft", sans-serif;
}
@mixin font-stack-headers {
  font-family: 'Whitney Cond A', 'Whitney Cond B', "ronnia-condensed", sans-serif;
  font-weight: 700;
  font-style: normal;
}
@mixin font-stack-body {
  font-family: 'Whitney SSm A', 'Whitney SSm B', "ff-meta-web-pro", sans-serif;
}
@mixin font-stack-code {
  font-family: Menlo, "inconsolata", Monaco, "Courier New", Courier, monospace;
}


Media Query

Posted at CSS-Tricks

You can create mixins that output the content that you pass after it in curly braces. This allows for a couple of neat possibilites. For instance, you can "name" a media query and then use it wherever you want. Meaning updating that media query only has to happen in one place. For instance:

@mixin breakpoint($point) {
  @if $point == mama-bear {
    @media (max-width: 1250px) { @content; }
  }
  @if $point == baby-bear {
    @media (max-width: 800px) { @content; }
  }
  @if $point == reverso-baby-bear {
    @media (min-width: 800px) { @content; }
  }
  @if $point == reverso-mama-bear {
    @media (min-width: 1250px) { @content; }
  }
}

And a simple usage example:

.page-wrap {
  width: 80%;
  @include breakpoint(baby-bear) {
    width: 100%;
  }
}

.footer {
  a {
    display: inline-block;
    @include breakpoint(baby-bear) {
      display: block;
    }
  }
}


View Demo



Animation Mixin

Posted at CSS-Tricks

Compass doesn't have a @mixin for keyframe animations yet, but this is very easy to add on your own. It uses the same @content idea that the media query mixin uses above.

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content
  }
  @-moz-keyframes #{$name} {
    @content
  }
  @-ms-keyframes #{$name} {
    @content
  }
  @-o-keyframes #{$name} {
    @content
  }
  @keyframes #{$name} {
    @content
  }
}

And one to set the animation...

@mixin animation($value) {
  -webkit-animation: $value;
  -moz-animation: $value;
  -ms-animation: $value;
  -o-animation: $value;
  animation: $value;
}

Using it then becomes easy:

@include keyframes(move) {
  0%   { left: 0; }
  100% { left: 100px; }
}

.box { @include animation(move 0.5s ease infinite alternate); }


View Demo



Accessible hiding

Posted at CSS-Tricks

// Accessible hiding
@mixin screen-reader-text() {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.screen-reader-text {
  @include screen-reader-text;
}


Overflow Ellipsis

Posted at CSS-Tricks

// Overflow Ellipsis
@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ellipsis { @include ellipsis; }


Word Wrapping

Posted at CSS-Tricks

// Word Wrapping
@mixin word-wrap() {
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
.word-wrap { @include mixin word-wrap; }


Clear any parent styling to a div

By Travis

@mixin clear($style) {
    @if $style == 'clear-all' {
        padding:0;
        background-image:none;
        background-color:transparent;
        margin:0;
        height:auto;
        width:auto;
        float:none;
        border:none;
    }
}


A SASS Mixin for Media Queries and IE 

Posted at Always Twisted

The SCSS setup

// Setting up a quick respond-to mixin
@mixin respond-to($name) {
  @if $name == tablet {
    @media only screen and (min-width: 768px) { @content; }
  }
}

// So this is the mixin that I'm currently using

@mixin this-is-what-i-want($name. $ie-class) {
  ie-class-here { @content; }
  media-query-here } @content; }
}

The SCSS file

// This is how I include the mixin within my SCSS file

.foo {
  margin: 0 auto;
  padding: 0 10px;§
  
  @include this-is-what-i-want(tablet, lt-ie9) {
    min-width: 940px;
    max-width: 1220px;
    padding: 0 20px;
  }
}

My 'wished for' CSS output

.foo { margin: 0 auto; padding: 0 10px;§ }

.lt-ie9 .foo {
    min-width: 940px; max-width: 1220px;
    padding: 0 20px;
}

@media only screen and (min-width: 768px) {
    .foo {
        min-width: 940px; max-width: 1220px;
        padding: 0 20px;
     }
}

To The Internets

So I started crawling the gists on gitub to see if anyone had created a little code snippet just for this reason. I didn't. There was nothing. So I quickly asked some really, clever and amazing people on the twitters and I got this bit of code from the fantastic @snugug.

mixin respond-wrapper-fallback($name, $wrapper-class) {
  .#{$wrapper-class} & {
    @content;
  }
  @include respond-to($name) {
      @content;
    }
  }

This now turns my 'wished for' CSS output into a reality and now means I can create a fallback for Internet Explorer from 'whatever' CSS Media Query block I need.


Vendor Prefixing

@mixin vendorize($property, $value) {
    -webkit-#{$property}: $value;
    -moz-#{$property}: $value;
    -ms-#{$property}: $value;
    -o-#{$property}: $value;
    #{$property}: $value;
}

By David Walsh


Float Clearing

@mixin clear() {
    &:before, &:after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }
    &:after {
        clear: both;
    }
}

By David Walsh


Offscreen Text

@mixin linkTextOffscreen() {
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    font-size: 0;
    text-align: start;
}

By David Walsh