Mobile First? Desktop First? �Go Basic First!
by Elad Shechter
@eladsc
Who Am I?
How to arrange your project
Using preprocessor
Where to Put CSS Media Queries?
*
Media queries in variables.
Applying variables in the components.
Open or Closed Breakpoints?
Open Breakpoints
Closed Breakpoints
Open or Closed Breakpoints?
*
Open Breakpoints (Example from the Guardian)
Overrides is EVIL!
Use only Closed Breakpoints!
unless it is the last breakpoint
What if We Need the Same Rule for Two Breakpoints?
Use the the same styles in more than 1 breakpoint
using the “,” sign means “or”.
The Problem with
“Mobile First”
and
“Desktop First”
“Mobile First” and “Desktop First” (case study)
“Desktop Mode”
“Mobile Mode”
What is the solution?
Go “Basic First”!
Basic First
“”Only common styles which is correct for all media rules will be without media query rule
Basic First - References
bit.ly/33dZ3Zm
bit.ly/2XDNZUg
Will tweet in the end of the talk�
@eladsc
Let’s Keep Talking...
Facebook Groups�CSS Masters Israel�CSS Masters
My Twitter�https://twitter.com/eladsc
More of My Stuff�https://medium.com/@elad�https://codepen.io/elad2412/��LinkedIn�https://il.linkedin.com/in/eladshechter
Join! CSS Masters Israel
Facebook Group
@eladsc
By Elad Shechter