A Critique of the Proposed National Education Policy Reform
Media Queries in CSS and Sass
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