In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.
For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.
| !!! 5 | |
| /[if lt IE 7] <html lang="en" class="no-js ie6"> | |
| /[if IE 7 ] <html lang="en" class="no-js ie7"> | |
| /[if IE 8 ] <html lang="en" class="no-js ie8"> | |
| /[if IE 9 ] <html lang="en" class="no-js ie9"> | |
| <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--> | |
| %head | |
| %meta{:charset => "utf-8"}/ | |
| / | |
| Always force latest IE rendering engine (even in intranet) & Chrome Frame |
| /* | |
| * insertAdjacentHTML.js | |
| * Cross-browser full HTMLElement.insertAdjacentHTML implementation. | |
| * | |
| * 2011-10-10 | |
| * | |
| * By Eli Grey, http://eligrey.com | |
| * Public Domain. | |
| * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. | |
| */ |
| @mixin scale($props, $sizes, $base: 16) { | |
| $values: (); | |
| $sublists: false; | |
| @each $s in $sizes { | |
| /* unwrap lists for values that have multiple list of values such as text-shadow */ | |
| @if type-of($s) == list { | |
| $sublists: true; | |
| $vv: (); | |
| @each $ss in $s { | |
| $vv: append($vv, if(type-of($ss) == number, #{$ss / $base}em, $ss)); |
This is a tiny content strategy framework focused on goals, messages, and branding. This is not a checklist. Use what you need and scrap the rest. Rewrite it or add to it. These topics should help you get to the bottom of things with clients and other people you work with.
Give me feedback on Twitter (@nicoleslaw) or by email (nicole@nicolefenton.com).
| /* See http://mrdanadams.com/2012/pixel-ems-css-conversion-sass-mixin/ */ | |
| /* Default font size in pixels if not overridden. */ | |
| $baseFontSize: 16; | |
| /* Convert PX units to EMs. | |
| Ex: margin-right: pem(16); | |
| */ | |
| @function pem($pxval, $base: $baseFontSize) { | |
| @return #{$pxval / $base}em; |
| //addEventListener polyfill 1.0 / Eirik Backer / MIT Licence | |
| (function(win, doc){ | |
| if(win.addEventListener)return; //No need to polyfill | |
| function docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v))}} | |
| function addEvent(on, fn, self){ | |
| return (self = this).attachEvent('on' + on, function(e){ | |
| var e = e || win.event; | |
| e.preventDefault = e.preventDefault || function(){e.returnValue = false} | |
| e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true} |
The reflow appens as many times as there are frames per seconds. It recalculate all positions that change in order to diplay them. Basically, when you scroll you execute a function where you move things between two reflows. But there are functions that triggers reflows such as jQuery offset, scroll... So there are two things to take care about when you dynamically change objects in javascript to avoid too many reflows:
| function hasPlaceHolder() { | |
| return 'placeholder' in document.createElement('input'); | |
| } | |
| function html5forms() { | |
| var formPlaceholder = hasPlaceHolder(); | |
| if (formPlaceholder === false) { | |
| $('input[type=text]').each(function() { | |
| if($(this).attr('placeholder')) { | |
| var placeholderText = $(this).attr('placeholder'); |