Meetup notes 2011-06-14

Dale Sandy - Getty Images (Madison)

User Interface Engineer

Language agnostic
 - a method for including design elements into your project
 - good process makes it easier to maintain
 
Useful techniques for theming CMSes like WordPress

Mid-sized companies have dedicated designers, separate from developers
 - the "comp" is used to orient both designers and developers on a project
 - often start from top/down, outside/in
 - inconsistencies creep in from page layout to page layout
 - IDs are used to handle differences, CSS begins to bloat
 
We would never describe Javascript or other language code this way
 - Why do it for HTML/CSS? It will become a dominant language
 - Microsoft is betting on HTML5 and using it throughout their products as a presentation layer
 
Shows example of Free Image and 10% off comps
 - similar in structure
 - walks through example of overly specific HTML/CSS
 - IDs not reusable between two different comps
 - selectors are larger than they need to be
 - some classes like .text-important are vague
 - two developers would create the css/html in two completely different ways
 
With this lack of organization it becomes very difficult to update a color across your entire site
 - relying on an IDE feature like find/replace is a "bad smell" of a bigger problem
 - example of Getty changing buttons to green, only 60% updated on first pass. took additional tries to get all
 
Learn HTML and how it is supposed to work
 - overuse of divs is a symptom that you don't know how the tags should be used

Think of each widget on your page as something that could be placed anywhere on the site
 - frees your mind to think more in the abstract
 
UI Pattern Library
 - challenges the relationship between a designer and UI developer
 - less reliance on a comp as a shared point of reference
 
Check axle project on github (written in PHP)
 - https://github.com/blackfalcon/axle.less
 
OO CSS may not be for every organization, but you need to use a more powerful tool than just CSS alone
 - introduces too many opportunities for errors
 - forces too much copy/pasting
 
SASS and .LESS put the Object in OO CSS
 - define object styles (like gradient background) but apply in your template to a semantic class name
 
You can write all CSS against classes, not necessary to use IDs
 - leave IDs for functional code (javascript)
 
Walked through slides showing how the design is applied from reset.css to screen.css
 - each style sheet is responsible for adding one "layer"
 
Short rant on how awesome CSS 3 flexbox is - go read up on it