├── README.md ├── assets.scss ├── boilerplate-bottom.scss ├── boilerplate-top.scss ├── css3-basic.scss ├── css3-transitions.scss ├── fonts.scss ├── forms.scss └── mixins.scss /README.md: -------------------------------------------------------------------------------- 1 | A collection of Sass mixins for your enjoyment by the devs at These Days. 2 | 3 | # Setup Git and GitHub 4 | * Install Git on your computer, sign up for an account on GitHub, and connect Git on your computer with the GitHub server. Step-by-step instructions are found here on GitHub: [Mac](http://help.github.com/mac-set-up-git/) [Windows](http://help.github.com/win-set-up-git/) 5 | 6 | # Fork the project 7 | * Step-by-step instructions are here: http://help.github.com/fork-a-repo/ 8 | * The simplest way is to just press the Fork button, then run ```git clone git@github.com:username/Sass-mixins.git```. But if you would like to commit changes to the shared repository, you should follow the rest of the instructions on the linked page above. 9 | 10 | -------------------------------------------------------------------------------- /assets.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Mixin for placeholder styling 3 | */ 4 | @mixin placeHolder($color) { 5 | &::-webkit-input-placeholder { color:$color; } 6 | &:-moz-placeholder { color:$color; } 7 | } 8 | 9 | /* 10 | * Mixin for basic CSS triangles 11 | */ 12 | @mixin triangle($direction:up, $color:#000, $size:100px) { 13 | @if($direction == up) { 14 | border-color: transparent transparent $color; 15 | border-style: solid; 16 | border-width: 0 $size $size; 17 | height: 0; 18 | width: 0; 19 | } 20 | @if($direction == down) { 21 | border-color: $color transparent transparent transparent; 22 | border-style: solid; 23 | border-width: $size; 24 | height:0; 25 | width:0; 26 | } 27 | @if($direction == left) { 28 | border-color: transparent $color transparent transparent; 29 | border-style: solid; 30 | border-width: $size $size $size 0; 31 | height: 0; 32 | width: 0; 33 | } 34 | @if($direction == right) { 35 | border-color: transparent transparent transparent $color; 36 | border-style: solid; 37 | border-width: $size 0 $size $size; 38 | height:0; 39 | width:0; 40 | } 41 | } 42 | 43 | /* 44 | * Mixin for selection markup 45 | */ 46 | @mixin selection($background, $color, $element:false) { 47 | @if($element) { 48 | &::-moz-selection{ background:$background; color:$color; text-shadow:none; } 49 | &::selection { background:$background; color:$color; text-shadow:none; } 50 | } @else { 51 | ::-moz-selection{ background:$background; color:$color; text-shadow:none; } 52 | ::selection { background:$background; color:$color; text-shadow:none; } 53 | } 54 | } -------------------------------------------------------------------------------- /boilerplate-bottom.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Non-semantic helper classes: please define your styles before this section. 3 | */ 4 | 5 | /* For image replacement */ 6 | .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } 7 | 8 | /* Hide for both screenreaders and browsers: 9 | css-discuss.incutio.com/wiki/Screenreader_Visibility */ 10 | .hidden { display: none; visibility: hidden; } 11 | 12 | /* Hide only visually, but have it available for screenreaders: by Jon Neal. 13 | www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ 14 | .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } 15 | /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */ 16 | .visuallyhidden.focusable:active, 17 | .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } 18 | 19 | /* Hide visually and from screenreaders, but maintain layout */ 20 | .invisible { visibility: hidden; } 21 | 22 | /* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements in most situations. 23 | nicolasgallagher.com/micro-clearfix-hack/ */ 24 | .clearfix:before, .clearfix:after { content: ""; display: table; } 25 | .clearfix:after { clear: both; } 26 | .clearfix { zoom: 1; } 27 | 28 | 29 | 30 | /** 31 | * Placeholder media queries for responsive design. Modify as design requires. 32 | * These follow after, and will override, the primary ('mobile first') styles 33 | * The closing /mediaquery comment is required by respond.js min/max-width Media Query polyfill 34 | */ 35 | 36 | @media only screen and (min-width: 480px) { 37 | /* Style adjustments for viewports 480px and over go here */ 38 | 39 | }/*/mediaquery*/ 40 | 41 | @media only screen and (min-width: 768px) { 42 | /* Style adjustments for viewports 768px and over go here */ 43 | 44 | }/*/mediaquery*/ 45 | 46 | 47 | 48 | /** 49 | * Print styles. 50 | * 51 | * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ 52 | */ 53 | @media print { 54 | * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; 55 | -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ 56 | a, a:visited { color: #444 !important; text-decoration: underline; } 57 | a[href]:after { content: " (" attr(href) ")"; } 58 | abbr[title]:after { content: " (" attr(title) ")"; } 59 | .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ 60 | pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } 61 | thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ 62 | tr, img { page-break-inside: avoid; } 63 | img { max-width: 100% !important; } 64 | @page { margin: 0.5cm; } 65 | p, h2, h3 { orphans: 3; widows: 3; } 66 | h2, h3{ page-break-after: avoid; } 67 | } 68 | 69 | -------------------------------------------------------------------------------- /boilerplate-top.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * HTML5 ✰ Boilerplate 3 | * 4 | * contains a reset, font normalization and some base styles. 5 | * 6 | * Credit is left where credit is due. 7 | * Much inspiration was taken from these projects: 8 | * - yui.yahooapis.com/2.8.1/build/base/base.css 9 | * - camendesign.com/design/ 10 | * - praegnanz.de/weblog/htmlcssjs-kickstart 11 | */ 12 | 13 | 14 | /** 15 | * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) 16 | * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark 17 | * html5doctor.com/html-5-reset-stylesheet/ 18 | */ 19 | 20 | html, body, div, span, object, iframe, 21 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 22 | abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, 23 | small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, 24 | fieldset, form, label, legend, 25 | table, caption, tbody, tfoot, thead, tr, th, td, 26 | article, aside, canvas, details, figcaption, figure, 27 | footer, header, hgroup, menu, nav, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | vertical-align: baseline; 34 | } 35 | 36 | article, aside, details, figcaption, figure, 37 | footer, header, hgroup, menu, nav, section { 38 | display: block; 39 | } 40 | 41 | blockquote, q { quotes: none; } 42 | 43 | blockquote:before, blockquote:after, 44 | q:before, q:after { content: ""; content: none; } 45 | 46 | ins { background-color: #ff9; color: #000; text-decoration: none; } 47 | 48 | mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } 49 | 50 | del { text-decoration: line-through; } 51 | 52 | abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } 53 | 54 | table { border-collapse: collapse; border-spacing: 0; } 55 | 56 | hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } 57 | 58 | 59 | /** 60 | * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/ 61 | */ 62 | 63 | body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */ 64 | 65 | /* Normalize monospace sizing: 66 | en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ 67 | pre, code, kbd, samp { font-family: monospace, sans-serif; } 68 | 69 | 70 | /** 71 | * Minimal base styles. 72 | */ 73 | 74 | /* 1) Always force a scrollbar in non-IE 75 | 2) Remove iOS text size adjust without disabling user zoom: www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ 76 | html { overflow-y: scroll; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } 77 | 78 | /* j.mp/webkit-tap-highlight-color */ 79 | a:link { -webkit-tap-highlight-color: #FF5E99; } 80 | 81 | /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ 82 | a:hover, a:active { outline: none; } 83 | 84 | a, a:active, a:visited { color: #607890; } 85 | a:hover { color: #036; } 86 | 87 | ul, ol { margin-left: 2em; } 88 | ol { list-style-type: decimal; } 89 | 90 | /* Remove margins for navigation lists */ 91 | nav ul, nav li { margin: 0; list-style:none; list-style-image: none; } 92 | 93 | small { font-size: 85%; } 94 | strong, th { font-weight: bold; } 95 | 96 | td { vertical-align: top; } 97 | 98 | /* Set sub, sup without affecting line-height: gist.github.com/413930 */ 99 | sub, sup { font-size: 75%; line-height: 0; position: relative; } 100 | sup { top: -0.5em; } 101 | sub { bottom: -0.25em; } 102 | 103 | pre { 104 | /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ 105 | white-space: pre; white-space: pre-wrap; word-wrap: break-word; 106 | padding: 15px; 107 | } 108 | 109 | .ie6 legend, .ie7 legend { margin-left: -7px; } 110 | 111 | /* 1) Make inputs and buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ 112 | 2) WebKit browsers add a 2px margin outside the chrome of form elements. 113 | Firefox adds a 1px margin above and below textareas 114 | 3) Set font-size to match 's, and font-family to sans-serif 115 | 4) Align to baseline */ 116 | button, input, select, textarea { width: auto; overflow: visible; margin: 0; font-size: 100%; font-family: sans-serif; vertical-align: baseline; } 117 | 118 | /* 1) Remove default scrollbar in IE: www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ 119 | 2) Align to text-top */ 120 | textarea { overflow: auto; vertical-align:text-top; } 121 | 122 | /* Hand cursor on clickable input elements */ 123 | label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } 124 | 125 | /* Remove extra padding and inner border in Firefox */ 126 | input::-moz-focus-inner, 127 | button::-moz-focus-inner { border: 0; padding: 0; } 128 | 129 | /* Colors for form validity */ 130 | input:valid, textarea:valid { } 131 | input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; } 132 | .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } 133 | 134 | /* Bicubic resizing for non-native sized IMG: 135 | code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ 136 | .ie7 img { -ms-interpolation-mode: bicubic; } 137 | 138 | 139 | /** 140 | * You might tweak these.. 141 | */ 142 | 143 | body, select, input, textarea { 144 | /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ 145 | color: #444; 146 | /* Set your base font here, to apply evenly */ 147 | /* font-family: Georgia, serif; */ 148 | } 149 | 150 | /* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */ 151 | h1, h2, h3, h4, h5, h6 { font-weight: bold; } 152 | 153 | /* These selection declarations have to be separate 154 | No text-shadow: twitter.com/miketaylr/status/12228805301 155 | Also: hot pink! */ 156 | ::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } 157 | ::selection { background:#FF5E99; color:#fff; text-shadow: none; } 158 | 159 | 160 | -------------------------------------------------------------------------------- /css3-basic.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Mixin for clearfix 3 | * @include clearfix; 4 | */ 5 | @mixin clearfix { 6 | &:before, &:after { content: ""; display: table; } 7 | &:after { clear: both; } 8 | *zoom: 1; 9 | } 10 | 11 | /* 12 | * Apply a CSS3 box-shadow 13 | * @include boxShadow(5px, 5px, 10px, #000); 14 | */ 15 | @mixin boxShadow($x: 5px, $y: 5px, $blur: 10px, $spread: 10px, $color: #000) { 16 | -webkit-box-shadow: $x $y $blur $spread $color; 17 | box-shadow: $x $y $blur $spread $color; 18 | } 19 | 20 | /* 21 | * Apply an inset CSS3 box-shadow 22 | * @include insetBoxShadow(5px, 5px, 10px, #000); 23 | */ 24 | @mixin insetBoxShadow($x: 5px, $y: 5px, $blur: 10px, $spread: 10px, $color: #000) { 25 | -webkit-box-shadow: inset $x $y $blur $spread $color; 26 | box-shadow: inset $x $y $blur $spread $color; 27 | } 28 | 29 | /* 30 | * Apply a CSS3 border radius 31 | * @include borderRadius(4px); 32 | */ 33 | @mixin borderRadius($radius: 4px) { 34 | -webkit-border-radius: $radius; 35 | border-radius: $radius; 36 | -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 37 | } 38 | 39 | /* 40 | * Apply a CSS3 border radius to the top corners only 41 | * @include borderTopRadius(4px); 42 | */ 43 | @mixin borderRightRadius($radius: 4px) { 44 | -webkit-border-top-right-radius: $radius; 45 | -webkit-border-bottom-right-radius: $radius; 46 | border-top-right-radius: $radius; 47 | border-bottom-right-radius: $radius; 48 | } 49 | 50 | /* 51 | * Apply a CSS3 border radius to the right corners only 52 | * @include borderRightRadius(4px); 53 | */ 54 | @mixin borderLeftRadius($radius: 4px) { 55 | -webkit-border-top-left-radius: $radius; 56 | -webkit-border-bottom-left-radius: $radius; 57 | border-top-left-radius: $radius; 58 | border-bottom-left-radius: $radius; 59 | } 60 | 61 | /* 62 | * Apply a CSS3 border radius to the bottom corners only 63 | * @include borderBottomRadius(4px); 64 | */ 65 | @mixin borderBottomRadius($radius: 4px) { 66 | -webkit-border-bottom-right-radius: $radius; 67 | -webkit-border-bottom-left-radius: $radius; 68 | -moz-border-radius-bottomright: $radius; 69 | -moz-border-radius-bottomleft: $radius; 70 | border-bottom-right-radius: $radius; 71 | border-bottom-left-radius: $radius; 72 | } 73 | 74 | /* 75 | * Apply a CSS3 border radius to the left corners only 76 | * @include borderLeftRadius(4px); 77 | */ 78 | @mixin borderLeftRadius($radius: 4px) { 79 | -webkit-border-top-left-radius: $radius; 80 | -webkit-border-bottom-left-radius: $radius; 81 | -moz-border-radius-topleft: $radius; 82 | -moz-border-radius-bottomleft: $radius; 83 | border-top-left-radius: $radius; 84 | border-bottom-left-radius: $radius; 85 | } 86 | 87 | 88 | /* 89 | * Apply a CSS3 linear gradient 90 | * 91 | * $from - The original colour stop of the gradient, eg #FF0000 or #FF0000 20% 92 | * $to - The final colour stop of the gradient 93 | * $fallback - A fallback background-color; if none is provided, the $from colour is used 94 | * $start - The starting point of the gradient 95 | * 96 | * @include linearGradient(red, green); 97 | * @include linearGradient(red, green, transparent); 98 | * @include linearGradient(red 50%, green 100%); 99 | */ 100 | @mixin linearGradient($from, $to, $solid: false, $start: top) { 101 | @if ($solid) { 102 | background-color: $solid; 103 | } @else { 104 | background-color: $from; 105 | } 106 | background-image: -webkit-linear-gradient($start, $from, $to); 107 | background-image: -moz-linear-gradient($start, $from, $to); 108 | background-image: -ms-linear-gradient($start, $from, $to); 109 | background-image: -o-linear-gradient($start, $from, $to); 110 | background-image: linear-gradient($start, $from, $to); 111 | } 112 | 113 | /* 114 | * Apply a CSS3 box-rotate 115 | * @include boxRotate(10deg); 116 | */ 117 | @mixin boxRotate($deg) { 118 | -webkit-transform: rotate($deg); 119 | -moz-transform: rotate($deg); 120 | -ms-transform: rotate($deg); 121 | -o-transform: rotate($deg); 122 | transform: rotate($deg); 123 | filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand'); 124 | zoom: 1; 125 | } 126 | 127 | /* 128 | * Box sizing 129 | * content-box | border-box | padding-box 130 | * @include boxSizing(border-box); 131 | */ 132 | @mixin boxSizing($sizing) { 133 | -webkit-box-sizing: $sizing; 134 | -moz-box-sizing: $sizing; 135 | box-sizing: $sizing; 136 | } 137 | 138 | /* 139 | * Apply a CSS3 transform-origin 140 | * @include setTransformOrigin(origin); 141 | */ 142 | @mixin setTransformOrigin($origin) { 143 | -webkit-transform-origin:$origin; 144 | -moz-transform-origin:$origin; 145 | -ms-transform-origin:$origin; 146 | -o-transform-origin:$origin; 147 | transform-origin:$origin; 148 | } -------------------------------------------------------------------------------- /css3-transitions.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Apply a CSS3 transition 3 | * 4 | * $property The property you want to animate, eg opacity 5 | * $duration The duration of the animation, eg 1s 6 | * $ms Include -ms-transition; default is false because IE does not support transitionEnd callback 7 | * 8 | * @include transition(opacity, 0.5s); 9 | */ 10 | 11 | @mixin transition($property, $duration, $ms: false) { 12 | -webkit-transition: $property $duration ease-in-out; 13 | -moz-transition: $property $duration ease-in-out; 14 | -o-transition: $property $duration ease-in-out; 15 | @if ($ms) { 16 | -ms-transition: $property $duration ease-in-out; 17 | } 18 | transition: $property $duration ease-in-out; 19 | } 20 | 21 | @mixin transitionLong($property, $duration, $easing:ease-in-out, $delay:false) { 22 | @include transitionProperty($property); 23 | @include transitionDuration($duration); 24 | 25 | @if($delay) { 26 | @include transitionDelay($delay); 27 | } 28 | 29 | @if($easing) { 30 | @include transitionTimingFunction($easing); 31 | } 32 | } 33 | 34 | /* 35 | * Apply a CSS3 transition-delay 36 | * @include transitionDelay(2s); 37 | */ 38 | @mixin transitionDelay($delay) { 39 | -webkit-transition-delay: $delay; 40 | -moz-transition-delay: $delay; 41 | -o-transition-delay: $delay; 42 | -ms-transition-delay: $delay; 43 | transition-delay: $delay; 44 | } 45 | 46 | /* 47 | * Apply a CSS3 transition-duration 48 | * @include transitionDuration(1s); 49 | */ 50 | @mixin transitionDuration($duration) { 51 | -webkit-transition-duration: $duration; 52 | -moz-transition-duration: $duration; 53 | -o-transition-duration: $duration; 54 | -ms-transition-duration: $duration; 55 | transition-duration: $duration; 56 | } 57 | 58 | /* 59 | * Apply a CSS3 transition-property 60 | * @include transitionProperty(opacity); 61 | * @include transitionProperty((height, width)); Multiple properties can be passed in surrounded by brackets 62 | */ 63 | @mixin transitionProperty($property) { 64 | -webkit-transition-property: $property; 65 | -moz-transition-property: $property; 66 | -o-transition-property: $property; 67 | -ms-transition-property: $property; 68 | transition-property: $property; 69 | } 70 | 71 | /* 72 | * Apply a CSS3 transition-timing-function 73 | * @include transitionTimingFunction(easing); 74 | */ 75 | @mixin transitionTimingFunction($easing) { 76 | -webkit-transition-timing-function: $easing; 77 | -moz-transition-timing-function: $easing; 78 | -o-transition-timing-function: $easing; 79 | -ms-transition-timing-function: $easing; 80 | transition-timing-function: $easing; 81 | } -------------------------------------------------------------------------------- /fonts.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @font-face mixin 3 | * @include font-face('family', '../fonts/', 'myfontname'); 4 | */ 5 | 6 | @mixin font-face($font-family, $font-url, $font-name) { 7 | @font-face { 8 | font: { 9 | family: $font-family; 10 | style: normal; 11 | weight: normal; 12 | } 13 | src: url($font-url + '/' + $font-name + '.eot') format('eot'), 14 | url($font-url + '/' + $font-name + '.woff') format('woff'), 15 | url($font-url + '/' + $font-name + '.ttf') format('truetype'), 16 | url($font-url + '/' + $font-name + '.svg#' + $font-name) format('svg'); 17 | } 18 | } -------------------------------------------------------------------------------- /forms.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Used to normalise select dropdowns 3 | * Styles from formalize.me 4 | * @include normaliseSelect(); 5 | */ 6 | @mixin normaliseSelect() { 7 | -webkit-appearance: none; 8 | -moz-border-radius: 0; 9 | -webkit-border-radius: 0; 10 | border-radius: 0; 11 | -webkit-box-sizing: border-box; 12 | -moz-box-sizing: border-box; 13 | box-sizing: border-box; 14 | -moz-background-clip: padding; 15 | -webkit-background-clip: padding; 16 | background-clip: padding-box; 17 | /* IE7 */ 18 | *padding-top: 2px; 19 | *padding-bottom: 1px; 20 | *height: auto; 21 | } 22 | 23 | -------------------------------------------------------------------------------- /mixins.scss: -------------------------------------------------------------------------------- 1 | /* Basic building blocks */ 2 | @import "css3-basic.scss"; 3 | @import "css3-transitions.scss"; 4 | 5 | /* Specific reusable styles */ 6 | @import "forms.scss"; 7 | 8 | --------------------------------------------------------------------------------