Switch to min-width media queries? #14

Open
beep opened this Issue Jan 14, 2014 · 16 comments

Comments

Projects
None yet
10 participants
@beep
Contributor

beep commented Jan 14, 2014

(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

This comment has been minimized.

Show comment
Hide comment
@mikepick

mikepick Jan 14, 2014

Member

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. :) )

Member

mikepick commented Jan 14, 2014

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

This comment has been minimized.

Show comment
Hide comment
@beep

beep Jan 14, 2014

Contributor

Awesome. Well, now that the repo’s out in the open, I’d love to help out too! (Once my schedule clears a bit, of course. #smallestviolin)

Contributor

beep commented Jan 14, 2014

Awesome. Well, now that the repo’s out in the open, I’d love to help out too! (Once my schedule clears a bit, of course. #smallestviolin)

@Wilto

This comment has been minimized.

Show comment
Hide comment
@Wilto

Wilto Jan 14, 2014

Member

What @beep said.

Member

Wilto commented Jan 14, 2014

What @beep said.

@erinlynch

This comment has been minimized.

Show comment
Hide comment
@erinlynch

erinlynch Jan 14, 2014

Member

What Mat said about what Ethan said.

Sent from my iPhone

On Jan 14, 2014, at 9:29 AM, Mat Marquis notifications@github.com wrote:

What @beep said.


Reply to this email directly or view it on GitHub.

Member

erinlynch commented Jan 14, 2014

What Mat said about what Ethan said.

Sent from my iPhone

On Jan 14, 2014, at 9:29 AM, Mat Marquis notifications@github.com wrote:

What @beep said.


Reply to this email directly or view it on GitHub.

@sarawb

This comment has been minimized.

Show comment
Hide comment
@sarawb

sarawb Jan 17, 2014

Contributor

+1 hugs and kisses please carry on yay!

Contributor

sarawb commented Jan 17, 2014

+1 hugs and kisses please carry on yay!

@maxfenton

This comment has been minimized.

Show comment
Hide comment
@maxfenton

maxfenton Jan 23, 2014

Contributor

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

Contributor

maxfenton commented Jan 23, 2014

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

@beep

This comment has been minimized.

Show comment
Hide comment
@beep

beep Jan 23, 2014

Contributor

I still haven’t looked into getting the codebase up and running locally, so I’m not sure of the effort involved. But once I do, I could probably help map a plan of attack.

On Jan 22, 2014, at 11:08 PM, Max Fenton notifications@github.com wrote:

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


Reply to this email directly or view it on GitHub.

Contributor

beep commented Jan 23, 2014

I still haven’t looked into getting the codebase up and running locally, so I’m not sure of the effort involved. But once I do, I could probably help map a plan of attack.

On Jan 22, 2014, at 11:08 PM, Max Fenton notifications@github.com wrote:

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


Reply to this email directly or view it on GitHub.

@maban

This comment has been minimized.

Show comment
Hide comment
@maban

maban Jan 23, 2014

Member

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.

Member

maban commented Jan 23, 2014

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

This comment has been minimized.

Show comment
Hide comment
@ShaneHudson

ShaneHudson Jan 23, 2014

I'm up for helping with this too, but don't yet have a way to run locally.

I'm up for helping with this too, but don't yet have a way to run locally.

@mikepick

This comment has been minimized.

Show comment
Hide comment
@mikepick

mikepick Jan 23, 2014

Member

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.

Member

mikepick commented Jan 23, 2014

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

This comment has been minimized.

Show comment
Hide comment
@maban

maban Jan 23, 2014

Member

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

Member

maban commented Jan 23, 2014

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

@beep

This comment has been minimized.

Show comment
Hide comment
@beep

beep Jan 23, 2014

Contributor

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

Contributor

beep commented Jan 23, 2014

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

This comment has been minimized.

Show comment
Hide comment
@maban

maban Jan 23, 2014

Member

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

Member

maban commented Jan 23, 2014

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

@Wilto

This comment has been minimized.

Show comment
Hide comment
@Wilto

Wilto Jan 23, 2014

Member

oh my god yes @maban absolutely

New issue?

Member

Wilto commented Jan 23, 2014

oh my god yes @maban absolutely

New issue?

@maban

This comment has been minimized.

Show comment
Hide comment
@maban

maban Jan 23, 2014

Member

Created a new issue. :)

Member

maban commented Jan 23, 2014

Created a new issue. :)

@murtaugh murtaugh added enhancement and removed bug labels Feb 25, 2014

@aparkening

This comment has been minimized.

Show comment
Hide comment
@aparkening

aparkening Jun 19, 2014

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

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