mishanga / cssdevconf-resources

Links and Resources from CSS Dev Conference 2014 in New Orleans, LA

CSS Dev Conf Resources

Slides

• Create Your Own Starter Files by @emilylewis
• Design the Code, Not Pixel-Perfect Comps by @katiekovalcin
• Goodbye Floats! Hello, CSS Flex & Grid Layouts! by @webq2
• Adaptive Images in RWD by @teleject
• Become a Sublime Text Power User by @wesbos
• Modern Layouts: Getting Out of our Ruts by @jensimmons
  • The Layouts Ahead — demo code
• A Vision for Style Guides in 2015 by @hagenburger
• Building Responsive Sites Without Bottlenecks by @andresgalloyup
• Building RWD with Sass by @taupecat
• CSS, Accessibility, and You by @feather
• Embracing Performance Optimization by @jonbellah
• OOCSS in the Real World by @jamiestrachan
• Animating SVGs with CSS by @tessaharmon
• Hyper-Optimized Workflow with Grunt, LESS, Autoprefixer, UNCSS, and more by @jlengstorf
• Raising a Banner for Front-End Architecture by @micahgodbolt
• Animation Story Telling with HTML5 and CSS3 by @rachelnabors
• Responsive Typography by @jpamental
• Let's Get Testable by @aliciability
• Basic Transitions & Animations Deep Dive by @estellewv
• Refactoring CSS: Programming Principles for Designers by @johnwlong
• CSS Architecture by @snookca
• Web Components and Modular CSS by @andrewrota
• Layout Design Patterns by @pixel_whip
• Yo CSS! by @snugug

Tools

• Sublime Packages:
  • Emmet
  • JS-Hint Gutter
  • GhostText
  • Origami
  • AutoFileName
  • JavascriptNext ES6
  • Gutter Color
  • Git Gutter
  • Takana — Live SCSS/CSS editing
• Sublime Text Book
• OSX Keyboard Shortcuts
• CSS Shapes Editor Chrome extension
• Mousepose - show keyboard commands during presentations
• CSSCSS redundancy analyzer
• UnCSS — Find unused CSS

CSS Testing Tools

• PhantomCSS
• Wraith
• Diffux
• CSSTe.st
• Moustache — Templating

Styleguides

• Rizzo: Lonely Planet Styleguide
• LivingStyleGuide Gem
• Hologram
• Pattern Lab
• Pattern Primer

CSS/pre-processors

• SCSS Blend Modes
• CSS Color Chart
• Decouple JS classes from CSS ones using a prefix
• Easings cheat sheet

Animation tools

• Cubic beziers

Notes from attendees

• Rachel Beser
• Chris Coyier
  • Testing by @aliciability
  • Animating SVGs by @tessaharmon
  • Performance by @johnbellah
  • Responsive Sass by @taupecat
  • Sublime text tips by @wesbos
  • Design the code by @katiekovalcin
  • Learn to fly by @rmurphey
• Jess Elderedge
  • Opening keynote w/ @rmurphey
  • Closing keynote w/ @chriscoyier
  • Keynote w/ @simplebits
  • Style guides by @hagenburger
• Albert Treat @aristretto
• Andrew Rota

Misc

• Refactoring Exercise
• Sparkbox Apprenticeship Program
• [Used and Abused – CSS Inheritance and Our Misuse of the Cascade] (http://www.phase2technology.com/blog/used-and-abused-css-inheritance-and-our-misuse-of-the-cascade/)
• The single responsibility principle applied to CSS
• Uniform.js — Styles for forms
• Hammer.js — Adding touch gestures
• CSS Panic — Gator game made entirely of CSS
• W3 Flexbox specs
• A Complete Guide to Flexbox
• Flexbox cheatsheet
• HSL Color picker