Can container-outer-width get size of alternative layouts? #123

Closed
MattyBalaam opened this Issue Oct 15, 2012 · 11 comments

Projects

None yet

2 participants

@MattyBalaam
$total-columns:    6;
$medium:           10;
$wide:             16; 

$column-width:     2.3em;
$gutter-width:     1.1em;
$grid-padding:     5.3em;
$container-style:  fluid;

@include at-breakpoint(0em $medium container-outer-width()) {  
background: red;
}

@include at-breakpoint(0em $medium container-outer-width(100)) {  
background: yellow;
}   

@include at-breakpoint(0em $medium container-outer-width($medium)) {  
background: green;
}

@include at-breakpoint(0em $wide container-outer-width($wide)) {  
background: orange;
}

results in:

@media (min-width: 0em) and (max-width: 28.03125em) {
  background: red; }
@media (min-width: 0em) and (max-width: 28.03125em) {
  background: yellow; }
@media (min-width: 0em) and (max-width: 28.03125em) {
  background: green; }
@media (min-width: 0em) and (max-width: 28.03125em) {
  background: orange; }

To get the result I want I am currently using this as a workaround

columns-width($medium)+$grid-padding*2
@mirisuzanne
Member

This is a bug. I'll get a fix out asap.

@mirisuzanne
Member

Closed by 3c89ad2

@MattyBalaam

Hi,

Am I fundamentally missing something about how Susy works, or is there still a bug somewhere?

SCSS

@media (max-width: container-outer-width($medium)){ 
    max-width: container-outer-width($medium);
    }


@include at-breakpoint($medium) {  
    max-width: container-outer-width($medium);
    }

CSS

@media (max-width: 29.9em) {
  max-width: 29.9em; }
@media (min-width: 40.78125em) {
  max-width: 43.5em; }
@mirisuzanne
Member

Looks like you have $base-font-size: 15px; set somewhere. Susy at-breakpoint adjusts em-based media-queries into browser-default-ems. For some insane reason, browsers ignore all your font size settings when they interpret media-queries, so we have to adjust in order for it to work as expected. That explains the different values within at-breakpoint. I can't recreate the 29.9em value at all. Are you sure you have Susy 1.0.3 installed?

@mirisuzanne
Member

You would see that 29.9em value if you didn't have 1.0.3 installed - that's the bug we were fixing in the first place.

@MattyBalaam

My apologies, I recently moved from command-line to Codekit for compiling and had forgotten I need to specify the exact path for gems in my config.rb file, so despite upgrading, it was still using the older version.

Sorry for the confusion.

@mirisuzanne
Member

No worries, glad to hear it's working. Thanks for finding the bug in the first place!

@MattyBalaam

Just as a follow up, I assume is related to $base-font-size, could I ask how to get the same breakpoint? At the moment I'm getting this:

SCSS

@include at-breakpoint($medium) {
-code-
}

@media (max-width: container-outer-width($medium)){
-code-
}

CSS

@media (min-width: 40.78125em) {
  -code- }

@media (max-width: 43.5em) {
  -code- }
@mirisuzanne
Member

Susy runs the output of container-outer-width through a function called absolute-ems (absolute-ems($ems, $font-size: $base-font-size)). You can do the same:

@media (max-width: absolute-ems(container-outer-width($medium))) { ... }

// or

$medium-break: absolute-ems(container-outer-width($medium));
@media (max-width: $medium-break) { ... }
@MattyBalaam

Thank you for that extra bit of automation you've introduced me to, I'm now
able to use things such as:

$total-medium: (container-outer-width($total-columns) $medium
container-outer-width($medium));

Which is making me happier than it really should.

On 22 October 2012 18:16, Eric Meyer notifications@github.com wrote:

Susy runs the output of container-outer-width through a function called
absolute-ems (absolute-ems($ems, $font-size: $base-font-size)). You can
do the same:

@media (max-width: absolute-ems(container-outer-width($medium))) { ... }
// or
$medium-break: absolute-ems(container-outer-width($medium));@media (max-width: $medium-break) { ... }


Reply to this email directly or view it on GitHubhttps://github.com/ericam/susy/issues/123#issuecomment-9672306.

@mirisuzanne
Member

I approve of excessive happiness. I consider it best practice.

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