Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Media Queries in CSS and Sass

1,170 views

Published on

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

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

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

×