No Content
No Content
Yea, Brett, thanks a bunch. Corey, here's one way you could set up responsive styling based on browser size. Our application uses SASS. We've set up a couple of extra screen sizes but only set different gutter sizes for 4 of them using the $grid-column-responsive array variable.
.your-element
padding-left: map-get($grid-column-responsive-gutter, small)
@include breakpoint(medium)
padding-left: map-get($grid-column-responsive-gutter, medium)
@include breakpoint(large)
padding-left: map-get($grid-column-responsive-gutter, large)
@include breakpoint(xlarge)
padding-left: map-get($grid-column-responsive-gutter, xlarge)
In our _settings.scss file we have:
$breakpoints: (
small: 0,
medium: 480px,
large: 768px,
largewide: 1024px,
xlarge: 1280px,
xxlarge: 1440px,
);
$breakpoint-classes: (small medium large largewide xlarge);
$grid-column-responsive-gutter: (
small: 8px,
medium: 12px,
large: 15px,
xlarge: 20px,
);
I tested this in our application and it works like a charm! Hope that helps, and thanks again, Brett.
Would like to know the answer to this as well.
We are unable to update to the latest version of rails at this time but will be able to soon. As for the gemfile, I tried that but got stuck in the ole dependency hamster wheel.
I've gone into the gem in my .rbenv directory and edited the _functions.scss file to be this.
$modules: () !default; @mixin exports($name) { $module_index: index($modules, $name); @if not ($module_index) { $modules: append($modules, $name) !global; @content; } }
That fixed the problem for now but I hope to not have to do that again in a future release. Loving Foundation 5 though, by the way.
Thanks
Our company's site is a rails app and they want to use bundler instead of having a bower directory. Gem file contains...
gem "sass-rails" # for Foundation framework gem 'compass-rails' gem 'foundation-rails'
so I have no _functions.scss file to edit. Is there any way for me to fix this? We have a mess on our hands with this same issue.
-
How do I get a value from the grid-column-responsive-gutter variable
by Cordale Ottley on Thursday, March 03, 2016 at 4:12 PM EST
-
No Content
-
No Content
Yea, Brett, thanks a bunch. Corey, here's one way you could set up responsive styling based on browser size. Our application uses SASS. We've set up a couple of extra screen sizes but only set different gutter sizes for 4 of them using the $grid-column-responsive array variable.
.your-element
padding-left: map-get($grid-column-responsive-gutter, small)
@include breakpoint(medium)
padding-left: map-get($grid-column-responsive-gutter, medium)
@include breakpoint(large)
padding-left: map-get($grid-column-responsive-gutter, large)
@include breakpoint(xlarge)
padding-left: map-get($grid-column-responsive-gutter, xlarge)
In our _settings.scss file we have:
$breakpoints: (
small: 0,
medium: 480px,
large: 768px,
largewide: 1024px,
xlarge: 1280px,
xxlarge: 1440px,
);
$breakpoint-classes: (small medium large largewide xlarge);
$grid-column-responsive-gutter: (
small: 8px,
medium: 12px,
large: 15px,
xlarge: 20px,
);
I tested this in our application and it works like a charm! Hope that helps, and thanks again, Brett.