Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Switch to min-width media queries? #14

Open
beep opened this Issue · 16 comments

10 participants

@beep
Collaborator

(Porting this over from the old tracker.)

Hey, guys—was just poring over the CSS, and I noticed the media queries are all max-width. Might I suggest switching this over to min-width queries at some point? It’d make for a more mobile-/progressive enhancement-friendly architecture, at least, and have a much broader reach.

@mikepick
Collaborator

I've been mulling this over for a while, and would like to get it done - the big screen demo was done in that fashion and so perhaps provides a starting point. Bit of a big task. Would be worth it alone, though, for then testing A/B for page speed metrics (and writing up for the blog. :) )

@beep
Collaborator
@Wilto
Collaborator

What @beep said.

@erinlynch
Collaborator
@sarawb
Collaborator

+1 hugs and kisses please carry on yay!

@maxfenton

I'd love to hear the team strategy for this, and the approach. Happy to help in the doing, as well.

@beep
Collaborator
@maban
Collaborator

I'd be happy to help too. If you're using SASS, there's a really good mixin I've been using for the project I'm working on that lets you put in the min-width breakpoint in ems (or px), and outputs just the wide-screen layout styles into a separate stylesheet for IE8 and below. That means we can still write min-width media queries inline with the rest of the CSS, and using ems, and IE still gets the layout styles it needs.

@ShaneHudson
@mikepick
Collaborator

I'm in the process of finishing up this very task for An Event Apart as we do a little design touch-up on that site, and it's actually not that difficult to do it simply by a lot of tedious cut and paste.

I don't have a local copy going myself yet either. One approach I was considering for ALA was to simply fence the bulk of the current style.css sheet into a large-screen media query and then drop back styles as needed, but then I'm fairly familiar with the code as it is now. :)

I'd like to avoid using SASS if we can, but that might be for selfish reasons.

@maban
Collaborator

Understand :) Sass can be a bit of a PITA to get playing nicely for a team of people.

@beep
Collaborator

Yeah, well said @maban.

Given the EE dependency, I’m wondering if this might be a @alistapart/collaborators-only gig, at least for the first pass. Getting a local copy up and running’s probably going to be key.

@Wilto / @murtaugh, is there any documentation (on Basecamp or elsewhere) for getting up and running with the codebase? (I probably missed it. I do that. Hi.)

@maban
Collaborator

hey is anyone doing a front-end style guide cos I might know someone who likes building front-end style guides

@Wilto
Collaborator

oh my god yes @maban absolutely

New issue?

@maban
Collaborator

Created a new issue. :)

@murtaugh murtaugh added enhancement and removed bug labels
@aparkening
Collaborator

Where are we at with switching over to min-width?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.