Suggestion: Switch to mobile first-approach

onvlt commented 6 years ago

Although I consider Spectre spectacular and very beautifully crafted framework, I found out it has some peculiar qualities when it comes to responsive grid design. It's actually only thing that really annoys me about it. It was already discussed, but I consider this topic critical enough to be brought up again.

The framework's approach to responsive grids diverges from "mobile-first" convention, where one starts with smaller screens and then adapts the content for larger screens using min-width queries. Spectre goes in exactly opposite direction—starting with large screens and adapting layout with max-width query. However, here are some reasons why I consider mobile-first approach better:

With mobile-first approach, one starts with imaginary "zero-width" screen and gradually adds new breakpoints as the screen grows, as many as needed. However, with "desktop-first", one starts at supposedly "primary" screen width somewhere in the middle of the scale , having two directions to go—both toward larger screens and smaller screens. This makes covering all responsive modalities more difficult.
Mobile-first approach seems more conventional, it is used by popular CSS frameworks and developers are used to it.

There are good reasons to use up-direction instead of down-direction. I'd consider sticking with convention and switching to mobile-first way.

isc-rsingh commented 6 years ago

I agree on all points. First and foremost I love Spectre! It delivers just the right amount of framework with no bloat. I would prefer a mobile-first approach as well.

zjelo commented 6 years ago

+1

bresson commented 5 years ago

I forked the repo and made a few modifications to comply with mobile-first. So far the results with manual tests look good. This seems like an easy switch with deprecation for max-width queries.

jonathanroy commented 5 years ago

I agree we should move forward with this change. Is there a pull request?

inliquid commented 5 years ago

Using "max-width" doesn't mean it's not "mobile first". Using different approach than other "popular" frameworks, doesn't mean it's not "mobile first". That's just speculation. Disagree with this proposal.

picturepan2 / spectre

Suggestion: Switch to mobile first-approach #461