Tweet
Tweet

Slide 1

Slide 1 text

Using CSS3 in WordPress Suzette Franck 2013 WordCamp Seattle Saturday, June 8, 2013 Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple

Slide 2

Slide 2 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Suzette Franck with a “ck” ★(mt) Media Temple WordPress Evangelist ★18+ Years Hand Coding & Web Development ★Regular Speaker: WordCamps & Meetups ★Reg. Contributor on WPwatercooler.com ★Blogs frequently at: suzettefranck.com ★Twitter: @mt_Suzette ★Slides: speakerdeck.com/suzettefranck

Slide 3

Slide 3 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Suzette Franck with a “ck” ★Using WordPress Since 2008 ★Exclusively Since 2010 ★5-year-old Chihuahua Mix “Puppy”

Slide 4

Slide 4 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What We Will Cover

Slide 5

Slide 5 text

• What is CSS? • Looking at CSS • CSS Selectors • Using CSS3 in WordPress • What’s New in CSS3 • CSS3 Tricks Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple “Using CSS3 in WordPress” by Suzette Franck

Slide 6

Slide 6 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What Is CSS?

Slide 7

Slide 7 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What Is CSS? Cascading Style Sheets

Slide 8

Slide 8 text

• Coding language that defines the styles of a webpage • Used in conjunction with HTML • Controls layout and appearance of page elements • Keeps styles separate from HTML markup • Ability to share common styles across different pages • Provide portability of code • Completed in 1996, but most browsers didn’t support until 2007 • If you are a web designer that wants to get into coding, CSS is for you! Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What Are Cascading Style Sheets (CSS)?

Slide 9

Slide 9 text

• The World Wide Web Consortium (W3C) • International Standards Organization • Made up of 351 members & organizations • Defines recommendations for the Web • http://www.w3.org/ Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Who Makes This Stuff Up?

Slide 10

Slide 10 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Timeline CSS 1.0 1996 1998 CSS 2.0 CSS 2.1* 2004-2011 CSS 3.0 1999-Current (modularized) CSS 2 or CSS

Slide 11

Slide 11 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Timeline CSS 1.0 1996 1998 CSS 2.0 CSS 2.1* 2004-2011 CSS 3.0 1999-Current (modularized) CSS 2 or CSS *Most browsers did not fully adopt CSS standards until 2007!

Slide 12

Slide 12 text

• http://validator.w3.org/unicorn/ • Unicorn: tests against current W3 Recommendations • Use as a guideline • Newer features will throw errors Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Validation

Slide 13

Slide 13 text

• http://validator.w3.org/unicorn/ • Unicorn: tests against current W3 Recommendations • Use as a guideline • Newer features will throw errors Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Validation

Slide 14

Slide 14 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Looking at CSS Examination of what has been done previously is the key to learning efficiently

Slide 15

Slide 15 text

• Any Plain Old Text Editor • Sublime Text 2 or Coda 2 for Mac • Notepad++ for PC • Latest Version of FireFox • Firebug Extension for FireFox • Colorzilla Extension for FireFox • Good Google Skills • Time and Curiosity Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Tools +

Slide 16

Slide 16 text

• FireFox with FireBug and Colorzilla Extensions • http://www.htmlgoodies.com/beyond/css/firebug-an-overview.html Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Examining CSS

Slide 17

Slide 17 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Coding Best Practices • Indent and use spaces • Separate declarations on a individual lines • Use shorthand versions when possible • Comment liberally • Principles of writing consistent, idiomatic CSS by Nicolas Gallagher • https://github.com/necolas/idiomatic-css

Slide 18

Slide 18 text

• Zeros out browser defaults: margin, border, padding, font-sizes, line-heights • Clears floats, sets display properties, etc. • Consistency of defaults across browsers • Good themes use them • Beginning of stylesheet • Normalize: http://git.io/normalize • Reset: http://meyerweb.com/eric/tools/css/reset/ Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Resets/Normalizing

Slide 19

Slide 19 text

• Build cross-browser sites with tried and true standards • Add additional features that degrade gracefully • Consider your audience • Definitely consider Mobile Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Progressive Enhancement

Slide 20

Slide 20 text

• Test on different platforms with different browsers • Variety of browser extensions to change user agent and screen width Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Browser Testing

Slide 21

Slide 21 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Selectors To apply CSS, select the text to change

Slide 22

Slide 22 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Terminology of CSS Rules

Slide 23

Slide 23 text

• More specific and closest in proximity takes precedence • IDs take precedence over classes • !important; trumps all • If multiple rules apply, the last one loaded wins • More info at: http://css-tricks.com/specifics-on-css-specificity/ Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Specificity “Yahtzee or Poker for Styles”

Slide 24

Slide 24 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Element Selector Selects any and all HTML elements with matching tag

Slide 25

Slide 25 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Class Selector Selects any HTML element containing the matching class

Slide 26

Slide 26 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ID Selector • Selects the HTML element containing matching ID • Each ID used only once per page, last one wins • IDs are indexed by the browser • Faster to render than classes • Takes precedence over classes • Most specific way to designate an HTML element

Slide 27

Slide 27 text

• Ignored by browsers • Documents code • Use liberally! Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Comments

Slide 28

Slide 28 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Pseudo Classes :hover :visited :first-child :last-child :first-letter :first-line

Slide 29

Slide 29 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS Selectors That Rock http://web-design-weekly.com/2012/05/31/css-selectors-that-rock/

Slide 30

Slide 30 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Twenty Thirteen Stylesheet Tip: WordPress 20xx default themes are great to study from!

Slide 31

Slide 31 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Using CSS3 in WordPress The Right Way

Slide 32

Slide 32 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Where Does CSS NOT Go? • Manually linked in between tags in the header.php of your WordPress theme like so: • http://goo.gl/D0Pv4

Slide 33

Slide 33 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Where Does CSS NOT Go? • Manually linked in between tags in the header.php of your WordPress theme like so: • http://goo.gl/D0Pv4

Slide 34

Slide 34 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Where Does CSS NOT Go? • Manually linked in between tags in the header.php of your WordPress theme like so: • http://goo.gl/D0Pv4

Slide 35

Slide 35 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Where Does CSS NOT Go? • Manually linked in between tags in the header.php of your WordPress theme like so: • http://goo.gl/D0Pv4 WRONG

Slide 36

Slide 36 text

1. Inline in WordPress Page/Post editor (only for emergencies) 2.If available...in theme’s or plugin’s “Custom CSS” section 3.In child theme’s style.css Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Where Does CSS in WordPress Go?

Slide 37

Slide 37 text

• Click on Text view in WordPress Editor • add code to HTML element:

text

• Use sparingly! Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Inline CSS in Text Editor

Slide 38

Slide 38 text

• Many themes have an option to add Custom CSS (WooThemes) • Jetpack Plugin custom CSS module, adds Appearance > Edit CSS Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Custom CSS

Slide 39

Slide 39 text

• Preserve future upgradability of parent theme • Preserves your custom modifications • Allows you to keep parent themes updated with latest version • Takes on code of parent theme Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Why Child Themes?

Slide 40

Slide 40 text

• Using SFTP...create a folder under wp-content/themes/ • Create plain text file style.css and copy required header to theme’s root folder • More Info: http://codex.wordpress.org/Child_Themes Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Creating Child Themes

Slide 41

Slide 41 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What’s New in CSS3?

Slide 42

Slide 42 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What’s New in CSS3? Modularization

Slide 43

Slide 43 text

• Are necessary evil of CSS3, but will be phased out like border-radius • prefixr.com • CSS Preprocessor like Sass Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Vendor Prefixes

Slide 44

Slide 44 text

• 130 New Color Keywords + 17 previously = 147 • http://www.w3schools.com/cssref/css_colornames.asp • RGBA (red, green, blue, alpha) • HSLA (hue, saturation, lightness, alpha) • Opacity Property (applies to children) Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Colors

Slide 45

Slide 45 text

• Specify colors, separated by commas • Specify stops or distributed evenly • Specify angle of gradient • Linear gradients well supported, circular not so much Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Gradients

Slide 46

Slide 46 text

• Specify different images separated by commas • Stacking order is first to top, last to bottom • Can be combined with a linear gradient background • New! background-size: cover; /*stretches to fill page*/ Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Multiple Background Images

Slide 47

Slide 47 text

• Shorthand can be used • Specify each corner from top left clockwise • Border images are cool but not well supported Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Rounded Corners

Slide 48

Slide 48 text

• Specify multiple shadows, separated with commas • Box: horizontal offset, vertical offset, blur, spread, color • Text: horizontal offset, vertical offset, blur, color Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Box & Text Shadows

Slide 49

Slide 49 text

• Translate: move up and down, left to right • Transform: rotate, scale, skew • w3schools.com/cssref/css3_pr_transform.asp • Specify multiple transforms separated by spaces • Use on any element, class, or id • Magical when used with :hover Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Transforms

Slide 50

Slide 50 text

• Transforms with added duration, delay, and/or easing • Define default state with transition instructions • Define :hover state • Specify multiple transforms, separated by commas Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Transitions

Slide 51

Slide 51 text

• Minimally specify beginning & end frames • Specify on element to be applied to: • animation-name (you define) • animation-duration (seconds) • animation-iteration-count (infinite or number) Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Animations @keyframes

Slide 52

Slide 52 text

• Way to include font file in CSS • http://www.fontsquirrel.com/ • http://www.fontsquirrel.com/tools/webfont-generator • Add @font-face declarations near the top of the style sheet • Always check font licensing to see if web embedding is allowed Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple @font-face

Slide 53

Slide 53 text

• Specify rules depending on screen min-width / max-width • Building blocks of responsive design • Typically at end of stylesheet Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple @media queries http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Slide 54

Slide 54 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple mediaqueri.es

Slide 55

Slide 55 text

• CSS3Pie.com Progressive Internet Explorer • Modernizr Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Much Ado About IE

Slide 56

Slide 56 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Tricks

Slide 57

Slide 57 text

http://suzettefranck.com/css3/ Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Demo! Click the Magical WordPress Unicorn

Slide 58

Slide 58 text

http://suzettefranck.com/css3/ Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Demo! Click the Magical WordPress Unicorn

Slide 59

Slide 59 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Interesting CSS3 Tricks ★At-At Walker From Star Wars ★webdesignerwall.com ★CSS3 Patterns Gallery ★CSS Social Media Icons ★Twitter Fail Whale in CSS

Slide 60

Slide 60 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Resources ★http://css-tricks.com/ ★http://wordpress.tv/?s=Chris+Coyier ★http://www.css3.info/ ★http://reference.sitepoint.com/css ★http://coding.smashingmagazine.com/tag/css/ ★http://w3schools.com (Not related to W3C)

Slide 61

Slide 61 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Generators ★http://css3generator.com/ ★http://css3please.com/ ★http://www.css3.me/ ★http://www.css3maker.com/ ★http://css3.mikeplate.com/ ★http://mothereffingtextshadow.com/

Slide 62

Slide 62 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Questions?

Slide 63

Slide 63 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Questions? Suzette Franck [email protected] https://speakerdeck.com/suzettefranck @mt_Suzette