Becoming a “master” of CSS is more than just memorizing selectors. It’s about mastering your workflow. Create efficient, maintainable, smart (sexy) CSS . An organized directory structure for all projects. Begin with meaningful markup. Keep your selectors declarations organized. Elements flow naturally on the page, in the order that they appear in the source. Moves the element by coordinates relative to where it lives within “normal flow”. emoves the element from normal flow and positions by coordinates to the nearest parent element that hasrelative positioning. By default, the element will position to the viewport if no parent exists that has relative positioning.
Mastering CSS Layouts D E L V E : U I C S S M A S T E R C L A S S W E D N E S D A Y , A U G U S T 5, 2009 by J I N A B O L T O N I N T E R A C T I O N D E S I G N E R C R U S H + L O V E L Y JINA BOLTON MASTERING CSS LAYOUTS Buongiorno! JINA BOLTON MASTERING CSS LAYOUTS Mastering CSS Layouts Once & for All? JINA BOLTON MASTERING CSS LAYOUTS Becoming a “master” of CSS is more than just memorizing selectors. JINA BOLTON MASTERING CSS LAYOUTS It’s about mastering your workflow. JINA BOLTON MASTERING CSS LAYOUTS Create efficient, maintainable, & smart (sexy) CSS. JINA BOLTON MASTERING CSS LAYOUTS A Consistent Workflow JINA BOLTON MASTERING CSS LAYOUTS Create a development starter toolkit. JINA BOLTON MASTERING CSS LAYOUTS An organized directory structure for all projects. JINA BOLTON MASTERING CSS LAYOUTS images/ content/ layout/ javascripts/ stylesheets/ [...]... profile .css #profile { width: 600px; /* redefined: IE-6 .css */ } IE-6 .css #profile { width: 620px; /* override: profile .css */ } M A S T E R I N G C S S L AYO U T S J I N A B O LT O N Balance readability & optimization M A S T E R I N G C S S L AYO U T S J I N A B O LT O N Debugging M A S T E R I N G C S S L AYO U T S J I N A B O LT O N Validate your code W3C HTML Validator http://validator.w3.org/ CSS. ..img/ js/ css/ i/ M A S T E R I N G C S S L AYO U T S J I N A B O LT O N Barebones H T M L template M A S T E R I N G C S S L AYO U T S J I N A B O LT O N A Simple, Usable, & Clean C S S Framework M A S T E R I N G C S S L AYO U T S J I N A B O LT O N @import 'reset .css' ; @import 'foundation .css' ; M A S T E R I N G C S S L AYO U T S J I N A B O LT O... CSS Author Jina Bolton Version v1.0 | 2008-09-25 */ M A S T E R I N G C S S L AYO U T S J I N A B O LT O N /* Background 222 Text fff Links c99 Visited Links 966 Hovered Links fcc Headers 9cc Sub-headers 699 */ M A S T E R I N G C S S L AYO U T S J I N A B O LT O N /* =RESET */ /* =TYPOGRAPHY */ /* =STRUCTURE */ See: http://stopdesign.com/log/2005/05/03 /css- tip-flags.html... C S S L AYO U T S J I N A B O LT O N Debugging M A S T E R I N G C S S L AYO U T S J I N A B O LT O N Validate your code W3C HTML Validator http://validator.w3.org/ CSS Validator http://jigsaw.w3.org /css- validator/ M A S T E R I N G C S S L AYO U T S J I N A B O LT O N Use C S S 3 to display problem areas *[style] { border: 2px dashed red !important; } M A S T E R I N G C S S L AYO U T S J I N A B