New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change width > max-width for $livingstyleguide--width #185

Closed
wants to merge 1 commit into
base: master
from

Conversation

Projects
None yet
3 participants
@fredrivett

fredrivett commented Nov 2, 2015

To make the livingstyleguide more responsive, it makes sense to make the width declaration max-width instead of width. As it currently stands, width means that if the window is smaller than 640px, the elements with width: $livingstyleguide--width will stick out and make the livingstyleguide look broken.

Changing this to max-width keeps the same effect for when there's more than 640px available, but also means it doesn't break for smaller screens.

As a result of this change, I've changed width: 100% for the .-lsg-has-full-width class to max-width: none, to cancel our our max width.

From what I can see the individual color swatches may need a bit of work to make them responsive too, as I'm not sure if they're set up to break into multiple levels.

As this is used to document responsive websites, it's great for the styleguide to be responsive too to allow this.

Great work with LSG, thanks for making it :thumbs-up:

Change width > max-width for $livingstyleguide--width
To make the livingstyleguide more responsive, it makes sense to make
 the width declaration max-width instead of width. As it currently
 stands, width means that if the window is smaller than 640px, the
 elements with `width: $livingstyleguide--width` will stick out and
 make the livingstyleguide look broken.

Changing this to max-width keeps the same effect for when there's
 more than 640px available, but also means it doesn't break for
 smaller screens.

As a result of this change, I've changed `width: 100%` for the
 `.-lsg-has-full-width` class to `max-width: none`, to cancel
 our our max width.

From what I can see the individual color swatches may need a bit
 of work to make them responsive too, as I'm not sure if they're
 set up to break into multiple levels.

As this is used to document responsive websites, it's great for
 the styleguide to be responsive too to allow this.

Great work with LSG, thanks for making it :thumbs-up:
@jhilden

This comment has been minimized.

Contributor

jhilden commented Nov 2, 2015

+1 for that. I did the same thing here jhilden@7ec3e0e

@hagenburger

This comment has been minimized.

Member

hagenburger commented Nov 2, 2015

@fredrivett yes, this is absolutely right. @jhilden already implemented this which is part of version 2.0.0 (hopefully published soon).

You can already work with it by installing v2.0.0.alpha.11. The documentation is available in the README of the v2 branch. The syntax changed a bit to offer more features. Let me know if it works for you.

You can follow @LSGorg for more updates on the next version!

@hagenburger hagenburger closed this Nov 2, 2015

@hagenburger

This comment has been minimized.

Member

hagenburger commented Nov 2, 2015

(Maybe I will release another 1.x version if needed.)

@fredrivett

This comment has been minimized.

fredrivett commented Nov 2, 2015

@hagenburger Gotcha, perfect. For our implementation we've just manually overwritten it in our styleguide-scss section in the styleguide.html.lsg so there's nothing urgent my end 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment