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

1. CSS Master Class
Chris Gonzalez
Expert Interaction Designer
chris.gonzalez@turner.com
Monday, July 29, 13

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. Mobile Apps Site Redesign
Monday, July 29, 13

4. IT Strategy Blog
Monday, July 29, 13

5. Tweet of the Union
Monday, July 29, 13

6. MyBodyTheMachine (personal)
Monday, July 29, 13

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. 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. Part 1
CSS as a descriptive practice
Monday, July 29, 13

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. 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. This is how ext.js describes this button in code! Gross!
Example 1 : A (not-so) simple button
Monday, July 29, 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. What words can we use to describe the structure of
this dialog?
Example 2 : A verbose dialog
Monday, July 29, 13

15. What words can we use to describe the visual style of
this dialog?
Example 2 : A verbose dialog
Monday, July 29, 13

16. Well this is how jQuery UI describes it in code.. WHY!
Example 2 : A verbose dialog
Monday, July 29, 13

17. And this is just a portion of the CSS required! AHH!
Example 2 : A verbose dialog
Monday, July 29, 13

18. Rule #1
KEEP IT SIMPLE and SEMANTIC
CSS is only as good as your markup.
Monday, July 29, 13

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. 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. 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. HTML : Less is more!
Instead of modifying these 2043 style rules for a new
button, try...
xMonday, July 29, 13

23. HTML : Less is more!
Modifying 1 or 2 rules. Better? :)
<button class=”home”>Home</button>
Monday, July 29, 13

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. CSS is used to visually describe your document.
You can describe things generally, or specifically.
Monday, July 29, 13

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. 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. CSS Selectors: Explain it to me in Star Wars
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Monday, July 29, 13

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. 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. 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. 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. 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. Example 4: A dialog with two states
http://codepen.io/chrisgonzalez/pen/spCGy
Preview!
Monday, July 29, 13

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. 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. 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. 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