superfine

/* enable default HTML5 search-input */
input[type="search"] {
    -webkit-appearance: searchfield;
}

/* enable default HTML5 search-input */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

superfine

grep -r -n 'class="this_is_my_only_firend"' *.*

superfine

$break-small: 320px;
$break-large: 1024px;

 @mixin  respond-to($media) {
   @if  $media == handhelds {
     @media  only screen and (max-width: $break-small) { @content; }
  }
   @else  if $media == medium-screens {
     @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
  }

superfine

What if controlling your media queries was as easy as adding on to a Sass list? What if I told you it now is?

This snippet comes from a modified version of mixins in the Aura Responsive Framework and came from me hijacking the respond-to mixin namespace but still wanting to use it for custom media queries. It's a little ugly and requires Sass 3.2+ (for now, (sudo) gem install sass --pre), but it works a charm.

There are two fairly mundane caveats to this method. First, every media query needs to be named. Second, every media query needs a size and assumes min-width and screen. If you want to change min-width, simply add your operator as another option, but if you want to change screen, you need to also include your operator even if you want it to be min-width.

Also, I haven't built in warnings yet for when you do bad things, so bear that in mind.

Without further adue, tada.

superfine

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

superfine

// Mixin for word-break properties
// http://www.w3.org/css3-text/#word-break
// * legal values for $type : normal, keep-all, break-all
//
// Example:
//    p.wordBreak {@include word-break(break-all);}
//
// Which generates:
//    p.wordBreak {
//      -ms-word-break: break-all;

superfine

/*------------------------------------*\
    $VW FONT SIZE
\*------------------------------------*/

/**
 * 
 * Used to create a vw font-size value based of a px value passed through to the mixin.
 * Works alongside the mq() mixin and the strip-unit() function from our Sass Package
 *
 * This is an experimental Mixin, Do not use in a production environment.

superfine

// Flexbox Mixins
// http://philipwalton.github.io/solved-by-flexbox/
// https://github.com/philipwalton/solved-by-flexbox
//
// Copyright (c) 2013 Brian Franco
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,

superfine

@mixin responsive-sprite($map, $icon){
  $icon-file: sprite-file($map, $icon);
  $icon-width: image-width($icon-file);
  $icon-height: image-height($icon-file);

  $sprite-file: sprite-path($map);
  $sprite-width: image-width($sprite-file);
  $sprite-height: image-height($sprite-file);

  $space-top: floor(nth(sprite-position($map, $icon), 2));

superfine

IE6 Only
==================
_selector {...}

IE6 & IE7
==================
*html or { _property: }

IE7 Only
==================