crazy
sassy
THE BASICSHeh.
box model positioning pseudo elements vendor prefixes avoid !important .classes responsive design specificity
CSScompiling nesting variables & mixins extends functions DRY
SASSlists sass maps recursion @while @if @for @at-root !global
CSS SASSbox model positioning pseudo elements vendor prefixes avoid !important .classes responsive design OOCSS
compiling nesting variables & mixins extends functions DRY
lists sass maps recursion @while @if @for @at-root !global
GRUNT CODEKIT
TERMINAL GIT/SVN
AUTOPREFIXER
FILE STRUCTURE
ICON FONTS
SVG
BROWSER TESTING
COMPASS
WEB FONTS
VAGRANT MAMP
CSS ANIMATIONS
INTURNAT EXLPUOR
BOURBON
BUS FACTORTotal number of devs who would need to be incapacitated to **** a project.
NORMALLY, BUS FACTOR ONE IS BAD.
EXCEPT FOR TODAY.
MICHAEL ARESTAD@michaelarestad
DRYDo not Repeat Yourself
OOCSSObject Oriented CSS
.base__element—modifier !
.header__nav--primary
CRAZY COOLSane useful code.
CRAZY CRAZYWill crash your phone.
FUNCTIONSOnly do math(s) once.
@function em($value, $context: $root-font-size) { @return ($value / $context * 1em); }
COOL
padding: em(24);
padding: (24 / 16px);
COOL
@function p($number){ @return ($number * 2.5%); }
CRAZY
SASS MAPSScary-looking, but useful.
$buttons:( primary:( background: #2ba1cb, color: #fff, ), secondary:( background: #f7f7f7, color: #555, ) );
COOL
map-get(map-get($buttons, primary), color)
#fff
COOL
LOOPS!Spit out some code!
@each $item in $button-types { .button--#{$item} { $button-color: map-get(map-get($buttons, $item), background); $button-text: map-get(map-get($buttons, $item), color); !
@include button($button-color, $button-text); } }
COOL
@for $i from 1 through $columns { .span#{$i} { width: ($spacing * $i * 1px) + ($gutter * $i) - $gutter; } }
COOL
@for $i from $start through $end { @media all and (min-width: $i * 1px) { .wide { &:after { content: " #{$i} pixels wide!"; } } } }
WTF?!
EPIC MIXIN TIMEWe mixin because we can.
@mixin border-radius($radius: 3px){ -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; }
MEH
$breakpoints:( phone: 320px, phablet: 500px, tablet: 768px, desktop: 960px, ); @mixin breakpoint($size){ @each $breakpoint, $value in $breakpoints { @if $size == $breakpoint { @media (max-width: map-get($breakpoints, $breakpoint)){ @content; } } } }
COOL
@mixin pie($a: 33) { // $a should be from 1 to 100 $p: 360 * $a / 100; // converts to percentage @if $p <= 90 { .slice { transform: rotate(-90deg + $p); ! &:after { transform: rotate(90deg - $p); } } } @elseif $p <= 180 { .slice, .slice:after { // Resets slices. Delete if pie doesn't change.(hover, etc.) transform: rotate(0); } .slice:nth-child(2) { transform: rotate(-90deg + $p); } } @elseif $p <= 270 { .slice,
CRAZY
RECAP
Use functions for math(s) Use Sass maps where they make sense Use loops carefully Use mixins for epic hunks of code, not prefixes
THANK YOU!@michaelarestad
QUESTIONS?@michaelarestad