| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Styled Select</title> | |
| </head> | |
| <style> | |
| * { |
| // | |
| // How I would approach a fluid grid: | |
| // | |
| // [1] Let the name reflect the % width, | |
| // eliminating "1 of 12" guesswork. | |
| // | |
| // [2] Also, put 10px of padding to either | |
| // side, to stack and make a 20px gutter. | |
| // | |
| // [3] Make the box-sizing = border-box, so that |
| /** | |
| * PE to use SVG as CSS background image with fallback for IE8/7/6 | |
| * | |
| * Using SVG as CSS background image to display | |
| * resolution-independent logos or icons is pretty | |
| * awesome but does completely fail on IE8/7/6 | |
| * | |
| * The trick: | |
| * All three IE versions don't support rgba color values. | |
| * By defining a rgba background color together with the |
| @include keyframes(appear-and-roundify) { | |
| 0% { opacity: 0; @include border-radius(2px); } | |
| 100% { opacity: 1; @include border-radius(10px); } | |
| } |
| // MEASUREMENTS | |
| // Grid types to work on -- column, scale | |
| $grid-type: column !default | |
| $scale-grid-direction: rtl !default | |
| $scale-grid-style: incremental !default | |
| $base-size: 16px !default | |
| $line-height: 1.3em !default |
| //////////////////////////// | |
| // SURVIVAL KIT - BREAKPOINT | |
| // breakpoint($breakpoint, $media: 'screen') | |
| //////////////////////////// | |
| $breakpoint-default-feature: min-width !default | |
| // create $breakpoint variables like so | |
| // assume $breakpoint-default-feature if only a number | |
| $breakpoint1: 500px |
| <!DOCTYPE html> | |
| <!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]--> | |
| <!--[if IE 7 ]> <html lang="en" class="ie ie7"> <![endif]--> | |
| <!--[if IE 8 ]> <html lang="en" class="ie ie8"> <![endif]--> | |
| <!--[if IE 9 ]> <html lang="en" class="ie ie9"> <![endif]--> | |
| <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| @function rgbaa($args...) { | |
| // rgbaa(#FFF, .5) | |
| @if length($args) == 2 { | |
| $hex: nth($args, 1); | |
| $alpha: nth($args, 2); | |
| @if $oldIE == 1 { | |
| @return rgb(red($hex), green($hex), blue($hex)); | |
| } @else { | |
| @return rgba(red($hex), green($hex), blue($hex), $alpha); |
| // --- | |
| // Sass (v3.2.9) | |
| // --- | |
| @mixin respond-to($queries...) { | |
| $length: length($queries); | |
| @for $i from 1 through $length{ | |
| @if $i % 2 == 1 { | |
| @media screen and (min-width: nth($queries, $i)) { |
See the official Susy site for 1.0 documentation.
