Re: [nesta] Responsive design (default theme)
- From:
- Isaac Rabinovitch
- Date:
- 2013-03-05 @ 00:06
Very glad to see that vertical rhythm thing gone. It puts the whole
stylesheet beyond my ability to parse.
Hopefully, your changes will work with my site customizations, since
these are mostly outside the SASS files (by necessity!).
On 3/4/2013 4:12 AM, Graham Ashton wrote:
> I've spent the morning re-writing the CSS for effectif.com (which has
always been heavily based on Nesta's default theme), so that the
design/layout adjusts responsively on handsets, tablets, small screens,
etc.
>
> http://effectif.com
>
> Summary of changes:
>
> - the layout adjusts to the screen size
> - the site header is much smaller
> - it uses a Google Webfont
> - I dropped the vertical rhythm CSS; it added complexity for little benefit
>
> I'm planning to copy all these changes over to Nesta's default theme, so
all new/upgraded Nesta sites that use the default design work responsively
out of the box.
>
> Any feedback or suggestions before I move it into Nesta?
>
> I haven't done much browser testing yet, but it's working fine in WebKit
and Firefox.
>
> Cheers,
> Graham
>
Re: [nesta] Responsive design (default theme)
- From:
- Graham Ashton
- Date:
- 2013-03-05 @ 09:53
On 5 Mar 2013, at 00:06, Isaac Rabinovitch <isaac@picknit.com> wrote:
> Very glad to see that vertical rhythm thing gone. It puts the whole
> stylesheet beyond my ability to parse.
:-) Fair comment.
I considered using the Compass typography module instead (which is a bit
less mental than my Sass mixin was), but then decided it would be better
to keep the default setup nice and light.
> Hopefully, your changes will work with my site customizations, since
> these are mostly outside the SASS files (by necessity!).
Most likely. The current theme lets you add custom CSS in a file called
local.sass (or local.scss), which I'll probably keep when I update Nesta
with this new design.
It only tries to serve the file if it exists, so don't feel you need to
use it though. This code pulls it in:
https://github.com/gma/nesta/blob/master/views/layout.haml#L17
https://github.com/gma/nesta/blob/master/lib/nesta/helpers.rb#L54
--
Graham Ashton
Founder, Agile Planner
https://www.agileplannerapp.com | @agileplanner | @grahamashton
Re: [nesta] Responsive design (default theme)
- From:
- Graham Ashton
- Date:
- 2013-03-05 @ 10:00
On 5 Mar 2013, at 07:48, James Abbott <abbottjam@gmail.com> wrote:
> Looks good to me - one technique that I've found useful is scaling the
font size down a little bit for tablet and mobile sizes.
I'd tried it in the iPhone emulator, on my Galaxy Nexus phone, and an iPad
mini. I've just looked at it on a real iPhone and I agree a slightly
smaller font and reduced leading wouldn't hurt.
On the Galaxy Nexus's larger screen the current typography works okay, I think.
Cheers to all for the feedback - I'll move it over to Nesta before too long.
Graham
Re: [nesta] Responsive design (default theme)
- From:
- James Abbott
- Date:
- 2013-03-05 @ 07:48
Looks good to me - one technique that I've found useful is scaling the font
size down a little bit for tablet and mobile sizes. For example, I have
1.15em as font size for the desktop resolutions and 1.035em for the
max-width of 43.125em.
This isn't mandatory in my view, but something I've seen many responsive
sites do. Here's the basic idea:
http://www.stuffandnonsense.co.uk/blog/about/proportional_leading_with_css3_media_queries
If your media queries are em-based, this has the additional benefit of
giving you the ability to scale the entire layout down in a proportional
way, so the layout follows the font size:
https://github.com/jonikorpi/Frameless/blob/master/frameless.scss#L176
Cheers,
James
On Mon, Mar 4, 2013 at 1:12 PM, Graham Ashton <graham@effectif.com> wrote:
> I've spent the morning re-writing the CSS for effectif.com (which has
> always been heavily based on Nesta's default theme), so that the
> design/layout adjusts responsively on handsets, tablets, small screens, etc.
>
> http://effectif.com
>
> Summary of changes:
>
> - the layout adjusts to the screen size
> - the site header is much smaller
> - it uses a Google Webfont
> - I dropped the vertical rhythm CSS; it added complexity for little benefit
>
> I'm planning to copy all these changes over to Nesta's default theme, so
> all new/upgraded Nesta sites that use the default design work responsively
> out of the box.
>
> Any feedback or suggestions before I move it into Nesta?
>
> I haven't done much browser testing yet, but it's working fine in WebKit
> and Firefox.
>
> Cheers,
> Graham
>
> --
> Graham Ashton
> Founder, Agile Planner
> https://www.agileplannerapp.com | @agileplanner | @grahamashton
>
>
Re: [nesta] Responsive design (default theme)
- From:
- Jake Subs
- Date:
- 2013-03-05 @ 10:04
On 5 March 2013 07:48, James Abbott <abbottjam@gmail.com> wrote:
> If your media queries are em-based, this has the additional benefit of
> giving you the ability to scale the entire layout down in a proportional
> way,
An additional tip (again via Andy Clarke) is to use rems (relative
ems), and use a mixin to serve up pixels for those browsers that don't
support rems:
http://www.stuffandnonsense.co.uk/blog/about/less
and more about rems:
http://snook.ca/archives/html_and_css/font-size-with-rem
--
[~] Jake Rayson
[w] www.jrayson.co.uk
[e] subs@growdigital.org
[t] @growdigital