Some key quotes:
SMACSS has two core goals: 1. Increase the semantic value of a section of HTML and content. 2. Decrease the expectation of a specific HTML structure.
SMACSS is about identifying the patterns in your design and codifying them.
function test(candidate){ | |
return candidate === passing; | |
} | |
var sentence = "The quick brown fox jumps."; | |
var passing = "Jumps fox brown quick the."; | |
function turnaround(sentence){ | |
sentence = sentence.toLowerCase().replace('.','').split(' '); | |
sentence = sentence.reverse().join(' ')+"."; |
<html> | |
<head> | |
<style type="text/css"> | |
.css-logo{font-size:10px;height:2.2em;position:relative;width:8.5em} | |
.letter-block{float:left;height:100%;margin-right:.2em;position:relative;width:1.6em} | |
.letter-block.i{margin-right:.3em;width:.7em} | |
.letter-block.t{width:1.7em} | |
.h{background:#f40;position:absolute;top:0;width:100%} | |
.h.short{top:.9em;width:1.3em;} | |
.s{background:#000;position:absolute} |
<div style="font-size:10px;height:2.2em;position:relative;width:8.5em"> | |
<div style="float:left;height:2.2em;margin-right:.3em;position:relative;width:.7em;"> | |
<div style="background:#3cf;height:100%;width:.7em"></div> | |
</div> | |
<div style="float:left;height:2.2em;margin-right:.2em;position:relative;width:1.6em"> | |
<div style="background:#3cf;height:100%;width:.7em"></div> | |
<div style="background:#f40;height:.7em;position:absolute;top:0;width:1.6em;"><div style="background:#000;height:.7em;position:absolute;width:.7em"></div></div> | |
<div style="background:#f40;height:.7em;position:absolute;top:.9em;width:1.3em;"><div style="background:#000;height:.7em;width:.7em"></div></div> | |
</div> | |
<div style="float:left;height:2.2em;margin-right:.2em;position:relative;width:1.7em"> |
/* via http://stackoverflow.com/questions/16443380/common-css-media-queries-break-points */ | |
@media only screen and (min-width: 768px) { | |
/* tablets and desktop */ | |
} | |
@media only screen and (max-width: 767px) { | |
/* phones */ | |
} |
// date of easter, call function with the 4-digit year as argument | |
//function (a,b,c,d,e,f,g,h,i,j,k,l,m){return b=a%19,c=~~(a/100),d=a%100,e=~~(c/4),f=c%4,g=~~((c+8)/25),h=~~((c-g+1)/3),i=(19*b+c-e-h+15)%30,j=~~(d/4),k=d%4,l=(32+2*f+2*j-i-k)%7,m=~~((b+11*i+22*l)/451),a+"-"+~~((i+l-7*m+114)/31)+"-"+((i+l-7*m+114)%31+1)} | |
function (y,a,b,c,h,l,n){return a=y%19,b=~~(y/100),c=y%100,h=(19*a+b-~~(b/4)-~~((b-~~((b+8)/25)+1)/3)+15)%30,l=(32+2*b%4+2*~~(c/4)-h-c%4)%7,n=h+l-7*~~((a+11*h+22*l)/451)+114,y+'-'+~~(n/31)+'-'+(n%31+1)} | |
// f(2013) -> "2013-3-31" | |
// f(2012) -> "2012-4-8 | |
// f(1775) -> "1775-4-16" |
/** | |
* This mixin is awesome. Handles vendor prefixing in a single line. | |
*/ | |
@mixin vendor-prefix($name, $argument) { | |
-webkit-#{$name}: $argument; | |
-moz-#{$name}: $argument; | |
-ms-#{$name}: $argument; | |
-o-#{$name}: $argument; | |
#{$name}: $argument; |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Slideshow</title> | |
<style type="text/css"> | |
.box{height:100px;display:none;width:100px;} | |
.red{background:red;display:block} | |
.orange{background:orange} | |
.yellow{background:yellow} | |
.green{background:green} |
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0} |