CSS Master Class
Chris Gonzalez
Expert Interaction Designer
chris.gonzalez@turner.com
Monday, July 29, 13
Who am I?
I am an Interaction Designer.
In my job, I am responsible for concepting,
visual (and graphic) design, high-leve...
Mobile Apps Site Redesign
Monday, July 29, 13
IT Strategy Blog
Monday, July 29, 13
Tweet of the Union
Monday, July 29, 13
MyBodyTheMachine (personal)
Monday, July 29, 13
What we won’t cover
• CSS Animations, Media Queries, and
Responsive Design
• CSS Preprocessors like SASS, SCSS, LESS
• Hel...
What we will cover
• The benefits of clean, semantic markup
• Simplicity!
• Writing clean, semantic CSS
• Basics of selecto...
Part 1
CSS as a descriptive practice
Monday, July 29, 13
What words can we use to describe the structure of
this button?
Example 1 : A (not-so) simple button
Monday, July 29, 13
What words can we use to describe the visual style of
this button?
Example 1 : A (not-so) simple button
Monday, July 29, 13
This is how ext.js describes this button in code! Gross!
Example 1 : A (not-so) simple button
Monday, July 29, 13
And this is only a fraction of the CSS used! Bad! No!
Example 1 : A (not-so) simple button
Monday, July 29, 13
What words can we use to describe the structure of
this dialog?
Example 2 : A verbose dialog
Monday, July 29, 13
What words can we use to describe the visual style of
this dialog?
Example 2 : A verbose dialog
Monday, July 29, 13
Well this is how jQuery UI describes it in code.. WHY!
Example 2 : A verbose dialog
Monday, July 29, 13
And this is just a portion of the CSS required! AHH!
Example 2 : A verbose dialog
Monday, July 29, 13
Rule #1
KEEP IT SIMPLE and SEMANTIC
CSS is only as good as your markup.
Monday, July 29, 13
This is simple, readable, and all we really need.
Example 3 : A simple button
<button class=”home”>Home</button>
http://co...
This is also simple and readable, and all we need.
Example 3 : A simple button
button.home {
border-radius: 8px;
border: 0...
HTML : Use semantic tags!
<header>
<nav>
<section>
<aside>
<article>
<footer>
Using semantic tags will make
your code mach...
HTML : Less is more!
Instead of modifying these 2043 style rules for a new
button, try...
xMonday, July 29, 13
HTML : Less is more!
Modifying 1 or 2 rules. Better? :)
<button class=”home”>Home</button>
Monday, July 29, 13
Rule #2
CSS MASTERY IS
KNOWING THE BASICS,
AND USING THEM WELL.
All the fancy *CSS3* stuff like animations and
transitions ...
CSS is used to visually describe your document.
You can describe things generally, or specifically.
Monday, July 29, 13
CSS Basics: Cascading!
If we say it like a human, we can describe:
ALL buttons:
button { }
The buttons in the navigation:
...
CSS Basics: Cascading!
All three of those style definitions will be applied
in order of specificity (1st) and line number (2...
CSS Selectors: Explain it to me in Star Wars
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Monday, J...
Rule #3
START GENERAL AND WORK
TOWARDS SPECIFIC
Starting with general style rules will help you get
moving quickly and mor...
CSS Selectors: Specificity
Be specific with purpose
#button.button.ui-dialog-button.thisisabutton { } - Bad!
#dialog footer ...
CSS Selectors: Be intentional!
Be intentional with selectors.
element {}
.class {}
#id
element[attribute=”value”]
element:...
Example 4: A dialog with two states
<div class="dialog">
<header>
<h3 class="title">This is a dialog</h3>
<button class="c...
Example 4: A dialog with two states
.dialog{
position:relative;
width:50%;
margin:10% auto;
background:#ffffff;
padding:20px;...
Example 4: A dialog with two states
http://codepen.io/chrisgonzalez/pen/spCGy
Preview!
Monday, July 29, 13
Example 4: A dialog with two states
.dialog{
position:relative;
width:50%;
margin:10% auto;
background:#ffffff;
padding:20px;...
Example 4: A dialog with two states
.dialog{
...... (same as before)
opacity:0;
z-index:-1;
transition:opacity .5s, z-inde...
CSS Detective: Dev Tools are your friend :)
Inspect your HTML
See how the CSS
is applied!
Debug w/ line
numbers!
Monday, J...
CSS Detective: Do a library background check
IS IT SIMPLE and SEMANTIC?
Inspect the HTML, CSS, and JavaScript
IS IT EASY T...
Upcoming SlideShare
Loading in …5
×

CSS Master Class: Part 1

523 views
384 views

Published on

This is the first in a series of CSS classes I'm putting together for my department.

Published in: Design, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
523
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS Master Class: Part 1

  1. 1. CSS Master Class Chris Gonzalez Expert Interaction Designer chris.gonzalez@turner.com Monday, July 29, 13
  2. 2. Who am I? I am an Interaction Designer. In my job, I am responsible for concepting, visual (and graphic) design, high-level system design, rapid prototyping, and front- end development Monday, July 29, 13
  3. 3. Mobile Apps Site Redesign Monday, July 29, 13
  4. 4. IT Strategy Blog Monday, July 29, 13
  5. 5. Tweet of the Union Monday, July 29, 13
  6. 6. MyBodyTheMachine (personal) Monday, July 29, 13
  7. 7. What we won’t cover • CSS Animations, Media Queries, and Responsive Design • CSS Preprocessors like SASS, SCSS, LESS • Helping you solve [some CSS problem] with [some code library] • 100% all knowledge you’ll ever need for CSS • Graphic/Visual Design Monday, July 29, 13
  8. 8. What we will cover • The benefits of clean, semantic markup • Simplicity! • Writing clean, semantic CSS • Basics of selectors, cascading styles, and specificity • Designing intentionally for a dynamic world Monday, July 29, 13
  9. 9. Part 1 CSS as a descriptive practice Monday, July 29, 13
  10. 10. What words can we use to describe the structure of this button? Example 1 : A (not-so) simple button Monday, July 29, 13
  11. 11. What words can we use to describe the visual style of this button? Example 1 : A (not-so) simple button Monday, July 29, 13
  12. 12. This is how ext.js describes this button in code! Gross! Example 1 : A (not-so) simple button Monday, July 29, 13
  13. 13. And this is only a fraction of the CSS used! Bad! No! Example 1 : A (not-so) simple button Monday, July 29, 13
  14. 14. What words can we use to describe the structure of this dialog? Example 2 : A verbose dialog Monday, July 29, 13
  15. 15. What words can we use to describe the visual style of this dialog? Example 2 : A verbose dialog Monday, July 29, 13
  16. 16. Well this is how jQuery UI describes it in code.. WHY! Example 2 : A verbose dialog Monday, July 29, 13
  17. 17. And this is just a portion of the CSS required! AHH! Example 2 : A verbose dialog Monday, July 29, 13
  18. 18. Rule #1 KEEP IT SIMPLE and SEMANTIC CSS is only as good as your markup. Monday, July 29, 13
  19. 19. This is simple, readable, and all we really need. Example 3 : A simple button <button class=”home”>Home</button> http://codepen.io/chrisgonzalez/pen/Jedvw Monday, July 29, 13
  20. 20. This is also simple and readable, and all we need. Example 3 : A simple button button.home { border-radius: 8px; border: 0px; padding: 15px; font-weight: bold; font-size: 1.2em; background: #369; color: #ffffff; } http://codepen.io/chrisgonzalez/pen/Jedvw Monday, July 29, 13
  21. 21. HTML : Use semantic tags! <header> <nav> <section> <aside> <article> <footer> Using semantic tags will make your code machine readable, human readable, and easier to style! HTML5 is not new! These tags are supported back to IE6 Monday, July 29, 13
  22. 22. HTML : Less is more! Instead of modifying these 2043 style rules for a new button, try... xMonday, July 29, 13
  23. 23. HTML : Less is more! Modifying 1 or 2 rules. Better? :) <button class=”home”>Home</button> Monday, July 29, 13
  24. 24. Rule #2 CSS MASTERY IS KNOWING THE BASICS, AND USING THEM WELL. All the fancy *CSS3* stuff like animations and transitions are built to use the basics in new and exciting ways. No basics? No fancy! Monday, July 29, 13
  25. 25. CSS is used to visually describe your document. You can describe things generally, or specifically. Monday, July 29, 13
  26. 26. CSS Basics: Cascading! If we say it like a human, we can describe: ALL buttons: button { } The buttons in the navigation: nav button { } That specific “save” button in that one dialog: div.ThatOneDialog button.save { } Monday, July 29, 13
  27. 27. CSS Basics: Cascading! All three of those style definitions will be applied in order of specificity (1st) and line number (2nd): button { } - most general, applies to ALL buttons nav button { } - kinda specific, inherits styles from above .ThatOneDialog button.save { } - very specific, inherits first button style Monday, July 29, 13
  28. 28. CSS Selectors: Explain it to me in Star Wars http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html Monday, July 29, 13
  29. 29. Rule #3 START GENERAL AND WORK TOWARDS SPECIFIC Starting with general style rules will help you get moving quickly and more easily identify elements that do need specific styles. Monday, July 29, 13
  30. 30. CSS Selectors: Specificity Be specific with purpose #button.button.ui-dialog-button.thisisabutton { } - Bad! #dialog footer button.close { } - OK! This is better :) But do we need all that specificity? Probably not! button.close { } - Very nice, also: reusable Monday, July 29, 13
  31. 31. CSS Selectors: Be intentional! Be intentional with selectors. element {} .class {} #id element[attribute=”value”] element:first-child element:nth-child(2n+1) element:before element:after Monday, July 29, 13
  32. 32. Example 4: A dialog with two states <div class="dialog"> <header> <h3 class="title">This is a dialog</h3> <button class="close">(x)</button> </header> This dialog is pretty awesome. I made it myself and it only took like 10 minutes. Additionally, it's really easy to edit and restyle! </div> http://codepen.io/chrisgonzalez/pen/spCGy Part 1: Markup Monday, July 29, 13
  33. 33. Example 4: A dialog with two states .dialog{ position:relative; width:50%; margin:10% auto; background:#ffffff; padding:20px; border-radius:10px; box-shadow:0px 0px ... ; } .dialog header{ position:relative; margin-bottom:10px; } .dialog header h3 { padding:0; margin:0; } .dialog header .close { position:absolute; top:0; right:0; } http://codepen.io/chrisgonzalez/pen/spCGy Part 2: CSS Monday, July 29, 13
  34. 34. Example 4: A dialog with two states http://codepen.io/chrisgonzalez/pen/spCGy Preview! Monday, July 29, 13
  35. 35. Example 4: A dialog with two states .dialog{ position:relative; width:50%; margin:10% auto; background:#ffffff; padding:20px; border-radius:10px; box-shadow:0px 0px ... ; opacity:0; z-index:-1; } .dialog header{ position:relative; margin-bottom:10px; } .dialog.active { opacity:1; z-index:1; } .dialog header h3 { padding:0; margin:0; } .dialog header .close { position:absolute; top:0; right:0; } http://codepen.io/chrisgonzalez/pen/aLEdB Part 3: Adding default and active statesPart 3: Adding default and active states Monday, July 29, 13
  36. 36. Example 4: A dialog with two states .dialog{ ...... (same as before) opacity:0; z-index:-1; transition:opacity .5s, z-index 0s linear .5s; } .dialog.active { opacity:1; z-index:1; transition:opacity .5s; } http://codepen.io/chrisgonzalez/pen/jaImd Part 3: Adding transitions Monday, July 29, 13
  37. 37. CSS Detective: Dev Tools are your friend :) Inspect your HTML See how the CSS is applied! Debug w/ line numbers! Monday, July 29, 13
  38. 38. CSS Detective: Do a library background check IS IT SIMPLE and SEMANTIC? Inspect the HTML, CSS, and JavaScript IS IT EASY TO UNDERSTAND? Is it well documented? A good library is easy to customize and extend. IS IT THE RIGHT TOOL FOR YOU? Does it use HTML, CSS, JavaScript appropriately? Or does it apply visual styles 100% in JS, clutter your DOM, and provide an incomprehensible set of CSS rules? Monday, July 29, 13

×