Responsiveness - Create Breakpoints

[skipjack]

Need to play around with the design a bit, maybe create a mockup for mobile devices, and then update the css.

• Add mobile mockup
• Update screen sizes in _vars.scss if necessary
• Create styles/_breakpoints.scss and begin!

Note that I only added a mockup for mobile screens, everything in between the largest screen size and mobile I think we can just wing for now as it's a pretty simple site.

[oliverturner]

@gregvenech so, prompted by @survivejs on Twitter, stepping up to offer any help I can on this. Let me know!

[skipjack]

@oliverturner awesome, yea definitely. Planning to get at least a rough mockup going for mobile done this weekend so we have something to work off. If you have any suggestions re design feel free to take a look at the design repo.

[montogeek]

I want to help too!

[skipjack]

@oliverturner added a rough draft of the mobile version here. It has a few layer comps (normal, search, and sidebar) but to start we can ignore search. I also added a small high-level checklist that we can keep tweaking above. Feel free to open a PR if you want to start working on it.

@montogeek sure thanks, let's give @oliverturner a chance to start it and then enumerate the tasks.

I'll add some screenshots to this thread tomorrow just in case either of you don't have photoshop.

[montogeek]

@gregvenech I have Photoshop :)

[oliverturner]

@gregvenech please do add those screenshots: it's been a while since I let Photoshop pollute my machines ;)

[skipjack]

@montogeek great! Feel free to poke around that design repo if you're interested and let me know if you have any suggestions.

it's been a while since I let Photoshop pollute my machines ;)

@oliverturner jeez, I didn't know there was such anti photoshop sentiment out there 😁 ! Just out of curiosity what's your preference, sketch?

Threw together a quick demo with each comp:

As you can see the search one is barely started but I think we can definitely work on the other two and the medium size screens. Once the screen narrows to the largest size in _screens.scss we should probably go to 100% width and then make any tweaks necessary to keep the site looking good, hiding the Sidebar somewhere around 960px.

Thanks again for taking this on, it should free me up to get more work done on the search design/implementation, as well as continuing on the landing page. The landing page (Splash) is another thing I wouldn't worry about too much yet as it's likely to change a bit.

[oliverturner]

@gregvenech yep: Sketch is my new jam. Was never a PS fan: Fireworks always seemed the more intuitive and flexible option (showing my age I know...)

Thanks for posting the comps :)

[oliverturner]

@gregvenech I have a few questions that would possibly be better hashed out in a quick chat than via GH issues... is there a chance you'd be free to catch up?

[skipjack]

Haha, yea no problem pm me on gitter if that works for you. I should be on in 45 min or so.

[oliverturner]

@gregvenech pinged you :)

[skipjack]

Closing via @oliverturner's #203. There's still some tweaks to be made but these can be opened as separate issues/PRs.