CSS Master Class: Part 1

CSS Master Class

Chris GonzalezExpert Interaction Designerchris.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-level system design, rapid prototyping, and front-end development

Monday, July 29, 13

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

• 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

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

Part 1CSS 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://codepen.io/chrisgonzalez/pen/JedvwMonday, July 29, 13

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/JedvwMonday, July 29, 13

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

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 #2CSS 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

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:

nav button { }

That specific “save” button in that one dialog:

div.ThatOneDialog button.save { }

Monday, July 29, 13

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

CSS Selectors: Explain it to me in Star Wars

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.htmlMonday, July 29, 13

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

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

CSS Selectors: Be intentional!

Be intentional with selectors.

element {} .class {}#idelement[attribute=”value”]element:first-childelement:nth-child(2n+1)element:beforeelement:after

Monday, July 29, 13

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

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

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

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

CSS Detective: Dev Tools are your friend :)

Inspect your HTML

See how the CSS is applied!

Debug w/ linenumbers!

Monday, July 29, 13

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