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

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. 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. 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. 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. 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. 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. Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)
Sample Analytics
Eric Scott Sembrat
email | website | twitter

8. Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)
Sample Analytics
Eric Scott Sembrat
email | website | twitter

9. Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)
Sample Analytics
Eric Scott Sembrat
email | website | twitter

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. 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. Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)
What is @media?
Eric Scott Sembrat
email | website | twitter

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. 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. 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. 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. Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)
Usage
Eric Scott Sembrat
email | website | twitter

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. 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. 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. 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. 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. 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. Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)
Behold, Sass
• Breakpoint
Eric Scott Sembrat
(1)
email | website | twitter

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. Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)
Behold, Sass
• Breakpoint
Eric Scott Sembrat
(1)
email | website | twitter

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. Media Queries with CSS/Sass
January 2014 - Georgia Tech Drupal Users Group (GTDUG)
Questions?
Comments? Concerns?
Eric Scott Sembrat
email | website | twitter

29. Scope of CSS
• Scope
Eric Scott Sembrat
of CSS
email | website | twitter