Last active
December 20, 2015 13:19
-
-
Save cray0000/6137583 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Mobile-first approach. Usecase is to hide one of columns by default (mobile) | |
// and show additional info on desktop (when @media is active) | |
// !! Working version !! Original problem description is in initial commit. | |
// @media vars: | |
$media-desktop: min-width 769px | |
$media-mobile: max-width 768px | |
.page | |
+use-grid(100% (1) hide) | |
+container | |
.sidebar | |
display: none | |
.content | |
+span(1 omega) | |
+breakpoint($media-desktop) | |
+use-grid(98% (4 6) 0.1 hide) | |
+container | |
.sidebar | |
display: block | |
+span(first 1) | |
.content | |
+span(last 1) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Yup, the case was in full-width span.
+span(1)
added default gutter of1/4
which ismargin-right: 25%;
. And it kept this gutter in grid that overrides the default one.So if we add
omega
argument:+span(1 omega)
then overriding of it works properlyI think if it's possible to detect that span is taking all of the columns then making
omega
argument implicit may be a reasonable solution.Of course your proposition not to float it at all and make use of default full-width of block element is much better. I'm afraid only
clear: both;
can help to achieve this but as you said it will be more confusing for people to explicitly doclear: none
to override it. And addingclear: none
into default+span()
output will bloat the compiled css too much so it doesn't worth it either.