• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS Master Class: Part 1
 

CSS Master Class: Part 1

on

  • 246 views

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

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

Statistics

Views

Total Views
246
Views on SlideShare
246
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS Master Class: Part 1 CSS Master Class: Part 1 Presentation Transcript

    • 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-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 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://codepen.io/chrisgonzalez/pen/Jedvw Monday, 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/Jedvw Monday, 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 #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
    • 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.html Monday, 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 {} #id element[attribute=”value”] element:first-child element:nth-child(2n+1) element:before element: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/ line numbers! 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