Using CSS3 with WordPress Vegas 2013

Using CSS3 in WordPress
Suzette Franck
2013 WordCamp Las Vegas
Sunday, December 15, 2013
Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple

View Slide

Suzette Franck with a “ck”
★WordPress Evangelist @ Media Temple
★Born in Hollywood, California Native
★20 Years Coding & Web Development
★Developed over 200 WordPress sites
★Spoke at 12 WordCamps & WordSesh
★Attended 78 WordPress Meetups, spoke at 25
★Reg. Contributor on WPwatercooler.com
★Hosted DradCast Episode 17
★Blogs at: suzettefranck.com
★Slides: speakerdeck.com/suzettefranck
Follow me!
@mt_Suzette

View Slide

What We Will Cover

View Slide

• What is CSS?
• Inspecting CSS
• CSS Selectors
• Using CSS3 in WordPress
• What’s New in CSS3 Demo
“Using CSS3 in WordPress”
by Suzette Franck

View Slide

What Is CSS?
Cascading Style Sheets

View Slide

• Coding language that defines the styles of a webpage
• Used in conjunction with HTML
• Controls layout and appearance of HTML elements
• Keeps styles separate from HTML markup
• Ability to share common styles across different pages
• Provides 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!
What Are Cascading Style Sheets (CSS)?

View Slide

• The World Wide Web Consortium (W3C)
• International Standards Organization
• Made up of 351 members & organizations
• Defines recommendations for the Web
• http://www.w3.org/
Who Makes This Stuff Up?

View Slide

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!

View Slide

Inspecting CSS
Examination of what has been done previously
is the key to learning efficiently

View Slide

• 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
CSS Tools
+

View Slide

• FireFox with FireBug and Colorzilla Extensions
• http://www.htmlgoodies.com/beyond/css/firebug-an-overview.html
Examining CSS

View Slide

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

View Slide

• 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/
CSS Resets/Normalizing

View Slide

• Build cross-browser sites with tried and true standards
• Add additional features that degrade gracefully
• Always consider your audience
• Definitely consider Mobile
Progressive Enhancement

View Slide

CSS Selectors
To apply CSS, target the HTML element to change

View Slide

Terminology of CSS Rules

View Slide

IDs and Classes
• classes can be added to any HTML element

• IDs are more specific than classes, but used similarly

• Both can not start with a number
• Both must be named uniquely
• Use semantic names over attribute names
• “title” is better then “redbold” for a name
• What is the difference?

View Slide

IDs
• IDs can only be used once on a page
• IDs indexed by the browser
• Fancy things can be done with IDs & Javascript
• Loaded a bit faster than classes
• Specified with #title on the stylesheet
My Rad Title

View Slide

classes
• Use on any HTML element i.e. div, span, p
• Define a style for all instances of that class
• Classes make the world go round
• Specified as .title on the stylesheet
My Rad Title

View Slide

My Rad Title 2
My Rad Title 1
• Classes and IDs are independent of each other
• Class and ID be the same name
• Treated as two separate entities

View Slide

• 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/
CSS Specificity
“Yahtzee or Poker for Styles”

View Slide

Element Selector
Selects any and all HTML elements with matching tag

View Slide

Class Selector
Selects any HTML element containing the matching class

View Slide

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

View Slide

• Ignored by
browsers
• Documents code
• Use liberally!
CSS Comments

View Slide

CSS Pseudo Classes
:hover
:visited
:first-child
:last-child
:first-letter
:first-line

View Slide

CSS Selectors That Rock
http://web-design-weekly.com/2012/05/31/css-selectors-that-rock/

View Slide

Twenty Thirteen Stylesheet
Tip: WordPress 20xx default themes are great to study from!

View Slide

Using CSS3 in
WordPress
The Right Way

View Slide

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

View Slide

1.Inline in WordPress Page/Post editor (frowned upon)
2.If available...in theme’s or plugin’s “Custom CSS” section
3.In child theme’s style.css
Where Does CSS in WordPress Go?

View Slide

• Click on Text view in WordPress Editor
• add code to HTML element:
text
• Use sparingly!
Inline CSS in Text Editor

View Slide

• Many themes have an option to add Custom CSS (WooThemes)
• Jetpack Plugin custom CSS module, adds Appearance > Edit CSS
Custom CSS

View Slide

• 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
Why Child Themes?

View Slide

• 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
Creating Child Themes

View Slide

What’s New in CSS3?
Modularization

View Slide

• Are necessary evil of CSS3
• Eventually will be phased out
• prefixr.com or CSS3 generator
• CSS Preprocessor like SASS or LESS
Vendor Prefixes

View Slide

• 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)
CSS3 Colors

View Slide

• Specify colors, separated by commas
• Specify stops or distributed evenly
• Specify angle of gradient
• Linear gradients well supported, circular not so much
CSS3 Gradients

View Slide

• 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*/
CSS3 Multiple Background Images

View Slide

• Shorthand can be used
• Specify each corner from top left clockwise
• Border images are cool but not well supported
CSS3 Rounded Corners

View Slide

• Specify multiple shadows, separated with commas
• Box: horizontal offset, vertical offset, blur, spread, color
• Text: horizontal offset, vertical offset, blur, color
CSS3 Box & Text Shadows

View Slide

• 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
CSS3 Transforms

View Slide

• Transforms with added duration, delay, and/or easing
• Define default state with transition instructions
• Define :hover state
• Specify multiple transforms, separated by commas
CSS3 Transitions

View Slide

• 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)
CSS3 Animations @keyframes

View Slide

• 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
@font-face

View Slide

• Specify rules depending on screen min-width / max-width
• Building blocks of responsive design
• Typically at end of stylesheet
@media queries
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

View Slide

mediaqueri.es

View Slide

• CSS3Pie.com
• Modernizr
Much Ado About IE

View Slide

CSS3 Tricks

View Slide

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)

View Slide

CSS3 Generators
★http://css3generator.com/
★http://css3please.com/
★http://www.css3.me/
★http://www.css3maker.com/
★http://css3.mikeplate.com/
★http://mothereffingtextshadow.com/

View Slide

http://suzettefranck.com/css3/
CSS3 Demo!
Click the Magical WordPress Unicorn

View Slide

Questions?
Suzette Franck
[email protected]
https://speakerdeck.com/suzettefranck
@mt_Suzette

View Slide

Using CSS3 with WordPress Vegas 2013

Using CSS3 with WordPress Vegas 2013

Suzette Franck

More Decks by Suzette Franck

Other Decks in Technology

Featured

Transcript