Media Queries in CSS and Sass

Eric Scott Sembrat email | website | twitter

@media queriesMobilizing CSS & Sass

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


• Introduction & Survey about Mobile Development• What is @media?• Using @media• Scenario/Example• Sass & @media (breakpoint)

Game PlanJanuary 2014 - Georgia Tech Drupal Users Group (GTDUG)

Media Queries with CSS/Sass


IntroductionMobile theming experience check



• Who is currently developing mobile-friendly styling in your theme(s)?

Audience Poll (1)January 2014 - Georgia Tech Drupal Users Group (GTDUG)



• What have you been using for mobile theming?• Media Queries• Theme-centric mobile designation• Modules• Other?




• Why might we need mobile styling?




Sample AnalyticsJanuary 2014 - Georgia Tech Drupal Users Group (GTDUG)



@mediaCSS coming to the rescue with mobile-friendly madness!



• @media designates CSS for a specific media (1)

What is @media?January 2014 - Georgia Tech Drupal Users Group (GTDUG)



• @media designates CSS for a specific media (1)• Also designates CSS for a screen size (2)




• @media designates CSS for a specific media (1)• Also designates CSS for a screen size (2)

• Called media features (3)




Adding QueriesLet’s see an example of this media query in action



• CSS declarations are nested inside of a media query.

UsageJanuary 2014 - Georgia Tech Drupal Users Group (GTDUG)



UsageJanuary 2014 - Georgia Tech Drupal Users Group (GTDUG)



ExampleJanuary 2014 - Georgia Tech Drupal Users Group (GTDUG)


@media only screen and (max-device-width: 480px) {!!

body #main { background-color: pink; font-size: 28pt; font-family: wingdings; }

!}






!}

Media Type






!}






!}

Media Feature


Sass & @mediaBody Level One



Behold, SassJanuary 2014 - Georgia Tech Drupal Users Group (GTDUG)


• Breakpoint (1)


• Easily adjustable and configurable media queries• Media queries embedded into your Sass CSS with relative ease

• 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.

Where might this help?January 2014 - Georgia Tech Drupal Users Group (GTDUG)



Questions?Comments? Concerns?



• Scope of CSS

Scope of CSS

Media Queries in CSS and Sass

Education

Transcript of Media Queries in CSS and Sass