Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

@media queries
Mobilizing CSS & Sass

...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Game Plan
• Introduction

& Survey abo...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Introduction
Mobile theming experience...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Audience Poll (1)
• Who

is currently ...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Audience Poll (2)
• What

have you bee...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Audience Poll (3)
• Why

Eric Scott Se...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Sample Analytics

Eric Scott Sembrat

...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Sample Analytics

Eric Scott Sembrat

...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Sample Analytics

Eric Scott Sembrat

...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

@media
CSS coming to the rescue with m...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

What is @media?
• @media

Eric Scott S...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

What is @media?

Eric Scott Sembrat

e...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

What is @media?
• @media

designates C...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

What is @media?
• @media

designates C...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Adding Queries
Let’s see an example of...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Usage
declarations are nested inside o...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Usage

Eric Scott Sembrat

email | web...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Example
@media only screen and (max-de...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Example
@media only screen and (max-de...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Example
@media only screen and (max-de...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Example
@media only screen and (max-de...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Example
@media only screen and (max-de...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Sass & @media
Body Level One
Eric Scot...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Behold, Sass
• Breakpoint

Eric Scott ...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Behold, Sass
• Breakpoint

Eric Scott ...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Behold, Sass
• Breakpoint

Eric Scott ...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Where might this help?
• Easily

adjus...
Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)

Questions?
Comments? Concerns?
Eric Sc...
Scope of CSS
• Scope

Eric Scott Sembrat

of CSS


email | website | twitter
Upcoming SlideShare
Loading in …5
×

Media Queries in CSS and Sass

911 views
785 views

Published on

A basic introduction to media queries in CSS and Sass for GT's Drupal Users Group (GTDUG).

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
911
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Media Queries in CSS and Sass

  1. 1. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) @media queries Mobilizing CSS & Sass Eric Scott Sembrat email | website | twitter
  2. 2. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Game Plan • Introduction & Survey about Mobile Development • What is @media? • Using @media • Scenario/Example • Sass & @media (breakpoint) Eric Scott Sembrat email | website | twitter
  3. 3. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Introduction Mobile theming experience check Eric Scott Sembrat email | website | twitter
  4. 4. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Audience Poll (1) • Who is currently developing mobile-friendly styling in your theme(s)? Eric Scott Sembrat email | website | twitter
  5. 5. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Audience Poll (2) • What have you been using for mobile theming? • Media Queries • Theme-centric mobile designation • Modules • Other? Eric Scott Sembrat email | website | twitter
  6. 6. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Audience Poll (3) • Why Eric Scott Sembrat might we need mobile styling? email | website | twitter
  7. 7. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Sample Analytics Eric Scott Sembrat email | website | twitter
  8. 8. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Sample Analytics Eric Scott Sembrat email | website | twitter
  9. 9. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Sample Analytics Eric Scott Sembrat email | website | twitter
  10. 10. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) @media CSS coming to the rescue with mobile-friendly madness! Eric Scott Sembrat email | website | twitter
  11. 11. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) What is @media? • @media Eric Scott Sembrat designates CSS for a specific media (1) email | website | twitter
  12. 12. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) What is @media? Eric Scott Sembrat email | website | twitter
  13. 13. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) What is @media? • @media designates CSS for a specific media (1) • Also designates CSS for a screen size (2) Eric Scott Sembrat email | website | twitter
  14. 14. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) What is @media? • @media designates CSS for a specific media (1) • Also designates CSS for a screen size (2) • Called media features (3) Eric Scott Sembrat email | website | twitter
  15. 15. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Adding Queries Let’s see an example of this media query in action Eric Scott Sembrat email | website | twitter
  16. 16. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Usage declarations are nested inside of a media query. • CSS Eric Scott Sembrat email | website | twitter
  17. 17. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Usage Eric Scott Sembrat email | website | twitter
  18. 18. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Example @media only screen and (max-device-width: 480px) {! ! body #main { background-color: pink; font-size: 28pt; font-family: wingdings; } ! } Eric Scott Sembrat email | website | twitter
  19. 19. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Example @media only screen and (max-device-width: 480px) {! ! body #main { background-color: pink; font-size: 28pt; font-family: wingdings; } ! } Eric Scott Sembrat email | website | twitter
  20. 20. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Example @media only screen and (max-device-width: 480px) {! ! Media body #main { Type background-color: pink; font-size: 28pt; font-family: wingdings; } ! } Eric Scott Sembrat email | website | twitter
  21. 21. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Example @media only screen and (max-device-width: 480px) {! ! body #main { background-color: pink; font-size: 28pt; font-family: wingdings; } ! } Eric Scott Sembrat email | website | twitter
  22. 22. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Example @media only screen and (max-device-width: 480px) {! ! body #main { background-color: pink; font-size: 28pt; font-family: wingdings; } Media Feature ! } Eric Scott Sembrat email | website | twitter
  23. 23. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Sass & @media Body Level One Eric Scott Sembrat email | website | twitter
  24. 24. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Behold, Sass • Breakpoint Eric Scott Sembrat (1) email | website | twitter
  25. 25. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Behold, Sass • Breakpoint Eric Scott Sembrat (1) email | website | twitter
  26. 26. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Behold, Sass • Breakpoint Eric Scott Sembrat (1) email | website | twitter
  27. 27. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Where might this help? • Easily adjustable and configurable media queries queries embedded into your Sass CSS with relative ease • Media • Can be used in conjunction with Sass cornerstones • (variables, loops, conditionals, math computations, etc). ! • See Kendall Totten’s presentation for a complicated example of what Breakpoint can do. Eric Scott Sembrat email | website | twitter
  28. 28. Media Queries with CSS/Sass January 2014 - Georgia Tech Drupal Users Group (GTDUG) Questions? Comments? Concerns? Eric Scott Sembrat email | website | twitter
  29. 29. Scope of CSS • Scope Eric Scott Sembrat of CSS email | website | twitter

×