Menu icon Foundation

Developer

My Posts

No Content

My Comments

Carvel Avis commented on Cordale Ottley's post over 3 years

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.

Carvel Avis commented on Cordale Ottley's post over 3 years

Would like to know the answer to this as well.

Carvel Avis commented on Philip Meissner's post almost 5 years

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

Carvel Avis commented on Philip Meissner's post almost 5 years

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.

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Cordale Ottley's post over 3 years

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.

You commented on Cordale Ottley's post over 3 years

Would like to know the answer to this as well.

You commented on Philip Meissner's post almost 5 years

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

You commented on Philip Meissner's post almost 5 years

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.

Posts Followed

Following

  • No Content

Followers

  • No Content