Make Your Code Delicious

twitter.com/sturobson #codelicious

twitter.com/sturobson Making Your Code Delicious From the Front, Bologna, September 2014. flickr.com/photos/spaceluge/3016452151/ #codelicious

twitter.com/sturobson Stuart Robson front-end developer @SassNews @LDN_Sass @RWDCalc @SitePointdotcom flickr.com/photos/rob-young/2809158854 #codelicious

twitter.com/sturobson flickr.com/photos/jdhancock/3731688801/ #codelicious

twitter.com/sturobson commons.wikimedia.org/wiki/File:What_are_you_doing_here%3F_%287046417743%29.jpg #codelicious

twitter.com/sturobson ๏ Helps you care about your work. ๏ Makes you aware of what you’re doing. ๏ Gives understanding as to what you’re doing. ๏ Helps others comprehend what you’ve done. flickr.com/photos/ginnerobot/2523448766 #codelicious

twitter.com/sturobson Boilerplates Frameworks Systems Libraries Starter Kits flickr.com/photos/tschiae/8417927326/ #codelicious

twitter.com/sturobson framework: An essential supporting structure of a building, vehicle, or object flickr.com/photos/tschiae/8417927326/ #codelicious

twitter.com/sturobson When I say ‘framework’… I mean… flickr.com/photos/tschiae/8417927326/ #codelicious

twitter.com/sturobson JavaScript CSS HTML #codelicious

twitter.com/sturobson Code that makes websites #codelicious

twitter.com/sturobson flickr.com/photos/criminalintent/2250896821 #codelicious

twitter.com/sturobson html5boilerplate.com/ #codelicious

twitter.com/sturobson www.getskeleton.com/ #codelicious

twitter.com/sturobson getbootstrap.com/ #codelicious

twitter.com/sturobson foundation.zurb.com/ #codelicious

twitter.com/sturobson github.com/inuitcss/ #codelicious

twitter.com/sturobson malarkey.github.io/Rock-Hammer/ #codelicious

twitter.com/sturobson sass.fffunction.co/ #codelicious

twitter.com/sturobson html5blank.com/ #codelicious

twitter.com/sturobson html5bones.com #codelicious

twitter.com/sturobson html5tpl.com/ #codelicious

twitter.com/sturobson developers.google.com/web/starter-kit/ #codelicious

twitter.com/sturobson Framework Explosion #codelicious

twitter.com/sturobson Framework Explosion #codelicious

twitter.com/sturobson A funny thing that happens… CSS flickr.com/photos/evablue/5665974688 HTML JavaScript #codelicious

twitter.com/sturobson codepen.io/chriscoyier/blog/a-weird-thing-that-happens #codelicious

twitter.com/sturobson codepen.io/chriscoyier/blog/a-weird-thing-that-happens #codelicious

twitter.com/sturobson codepen.io/chriscoyier/blog/a-weird-thing-that-happens #codelicious

twitter.com/sturobson The Mola Ram of Web Development #codelicious

twitter.com/sturobson ALL OF THIS HAS HAPPENED BEFORE. #codelicious

twitter.com/sturobson flickr.com/photos/jdhancock/4100030094 #codelicious

twitter.com/sturobson ! The Lessons of CSS Frameworks Eric Meyer An Event Apart, San Fransisco, 2008 flickr.com/photos/foltzwerk/2778957157/ #codelicious

twitter.com/sturobson http://960.gs/ #codelicious

twitter.com/sturobson blueprintcss.org #codelicious

twitter.com/sturobson http://yuilibrary.com/ #codelicious

twitter.com/sturobson What are in these ‘frameworks’ flickr.com/photos/joeyparsons/3240169886 #codelicious

twitter.com/sturobson • A CSS reset. • A layout system or predefined grid. • Font sizes, weights, styles, families, colours. • Print styles. • Naming conventions. • An HTML page of various complexity. • jQuery & blank JS files flickr.com/photos/gviciano/3124302755 #codelicious

twitter.com/sturobson “…which one is right for you?” “…none of the above.” Jeremy Keith adactio.com/journal/1498/ flickr.com/photos/hellogeri/6154034099 #codelicious

twitter.com/sturobson stuffandnonsense.co.uk/blog/about/instant #codelicious

twitter.com/sturobson But instant cake mixes do have their place, right? #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson flickr.com/photos/oatsy40/7631270960/ #codelicious

twitter.com/sturobson flickr.com/photos/rosenfeldmedia/3978305312 #codelicious

twitter.com/sturobson Internal … Tools alistapart.com/article/building-twitter-bootstrap #codelicious

twitter.com/sturobson 2014.fromthefront.it/ #codelicious

twitter.com/sturobson flickr.com/photos/johnnytakespictures/8725666649/ #codelicious

twitter.com/sturobson etsy.com/uk/listing/78633231/ #codelicious

twitter.com/sturobson • Speedy set up time. • The work’s already been done. • Maintained by someone else. • Good support on issues. #codelicious

twitter.com/sturobson flickr.com/photos/petsadviser-pix/8126557438 #codelicious

twitter.com/sturobson • Maintained by someone else. • Subjective decisions have been made. • It might just shrivel up and die. • Bloat. #codelicious

twitter.com/sturobson BLOAT flickr.com/photos/matsuyuki/360442606/ #codelicious

twitter.com/sturobson minified CSS Gumby Framework 43kb Bootstrap 110kb Foundation 140kb #codelicious

twitter.com/sturobson ISSUES flickr.com/photos/evergreenkamal/428855445 #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson html5boilerplate.com/ #codelicious

twitter.com/sturobson twitter.com/jbrewer/statuses/168206967867838464 #codelicious

twitter.com/sturobson github.com/h5bp/html5-boilerplate/issues/610 #codelicious

twitter.com/sturobson 2014.fromthefront.it/ #codelicious

twitter.com/sturobson “Sometimes you need to … make your own framework, not because nothing else out there is good … but because it’s good to learn” Stephen Hay responsivedesign.is/articles/rwd-podcast-episode-17-stephen-hay flickr.com/photos/robertnyman/6596212095/ #codelicious

twitter.com/sturobson ROLL YOUR OWN flickr.com/photos/garryknight/4876201968 #codelicious

twitter.com/sturobson DON’T RE-INVENT THE WHEEL flickr.com/photos/garryknight/4876201968 #codelicious

twitter.com/sturobson It’s happening exactly like before… #codelicious

twitter.com/sturobson What would I put in a ‘frameworks’? flickr.com/photos/pftqg/8605591528 #codelicious

twitter.com/sturobson • A CSS reset & some helpers. • A layout system or predefined grid. • Font sizes, weights, styles, families, colours. • Generic print styles. • Naming conventions. • An HTML blank template page. • jQuery & blank JS files flickr.com/photos/rubyran2626/432078863 #codelicious

twitter.com/sturobson (beg), borrow, (steal) code flickr.com/photos/janitors/13467502635 #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson Edit what you need #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson Add reusable code you create flickr.com/photos/bengarney/3286964986 #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson Remove the code you don’t need… Forgetting to include it. flickr.com/photos/d00d/55456750/ #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson twitter.com/teleject/status/455753399011536896 #codelicious

twitter.com/sturobson twitter.com/rem/status/452891874836361216 #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson larahogan.com/donuts/ #codelicious

twitter.com/sturobson html5tpl.com/ #codelicious

twitter.com/sturobson alwaystwisted.com/cakes #codelicious

twitter.com/sturobson alwaystwisted.com/cakes #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson html5tpl.com/ #codelicious

twitter.com/sturobson Documentation flickr.com/photos/timetrax/376152628/ #codelicious

twitter.com/sturobson I always say, keep a diary and someday it’ll keep you. – Mae West flickr.com/photos/nesster/2818819626 #codelicious

twitter.com/sturobson github.com/necolas/idiomatic-css #codelicious

twitter.com/sturobson pointnorth.io/ #codelicious

twitter.com/sturobson cssguidelin.es/ #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson bem.info #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson smacss.com #codelicious

twitter.com/sturobson Base Layout Modules State Theme smacss.com #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson alwaystwisted.com/post.php?s=2013-12-29-how-i-write-my-sass #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson Choices flickr.com/photos/pasukaru76/4948494811/ #codelicious

twitter.com/sturobson Sweat the details flickr.com/photos/kullez/5598159209 #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson Iterate flickr.com/photos/raneko/4203965136/ #codelicious

twitter.com/sturobson #codelicious

twitter.com/sturobson ๏ Helps you care about your work. ๏ Makes you aware of what you’re doing. ๏ Gives understanding as to what you’re doing. ๏ Helps others comprehend what you’ve done. flickr.com/photos/ginnerobot/2523448766 #codelicious

twitter.com/sturobson #CODELICIOUS flickr.com/photos/ginnerobot/2523448766 #codelicious

twitter.com/sturobson ALL OF THIS HAS HAPPENED BEFORE. AND ALL OF THIS WILL HAPPEN AGAIN. #codelicious

Thank You twitter.com/sturobson Stuart Robson t: @sturobson w: alwaystwisted.com Ethan, 5 #codelicious

twitter.com/sturobson flickr.com/photos/rob-young/2810749797 #codelicious