Menu icon Foundation

My Posts







My Comments

Will Fairhurst commented on Matt Mac's post almost 3 years

I was looking for a similar thing this morning and have put together a custom solution.  If anyone is still looking to achieve this (and is using SASS) then you could use the following to create breakpoint specific shrink styles.
/* =============================================================================
Custom Shrink Classes
========================================================================== */

@each $breakpoint in $breakpoint-classes {
@if $breakpoint == small {
// Do nothing
} @else {
@include breakpoint($breakpoint) {
.#{$breakpoint}-shrink {
flex: 0 0 auto;
max-width: 100%;
}
}
}
}
Once compiled you end up with the ability to use classes such as 
.medium-shrink or .large-shrink
This will work for custom breakpoints as well as any predefined ones.
Hope that helps someone.
Will
 

Will Fairhurst commented on Ryan's post about 3 years

Rafi,
Know and LOVE the gutter map in Sites...would be just as cool to have it in Emails too...in fact I had assumed it would be there when I gave the client the mockups...then had to retro-engineer a solution when I found it wasn't :-)
It is great to be able to give a greater feeling of space on desktop mail clients but reduce it down on small devices, so I for one would definitely be in favour.
Cheers,
Will

Will Fairhurst commented on Ryan's post about 3 years

Not sure if this is still of interest to you but I had the same requirement and this is what I did...
Firstly I set the $global-gutter variable to what I wanted it to be for desktops, in my case 30px
Secondly I added the following code to my app.scss file
/Responsive Gutter/
table.body td.columns, table.body th.columns{
@media only screen and (max-width: #{$global-breakpoint}) {
padding-left: 15px!important;
padding-right: 15px!important;
}
}
Limited testing carried out so far but it seems to be working as intended.
Hope that is of help to someone.
Cheers,
Will

Will Fairhurst commented on Will Fairhurst's post almost 4 years

Brandon,

I did eventually...in a way... :-)

It occurred to me that I was going about it the wrong way. Why did I need to know the orientation when (for me at least) I was really just interested in the available width.

I have therefore created additional breakpoints in the _settings.scss file and reference those instead. See below...

$breakpoints: (
  smallport: 0px,
  small: 376px,
  mediumport: 668px,
  medium: 1024px,
  large: 1210px,
  xlarge: 1440px,
  xxlarge: 1921px,
);

$breakpoint-classes: (smallport small mediumport medium large);

This enables me to define column sizes like this:

<div class="row">
    <div class="smallport-12 small-6  mediumport-6 medium-8  columns">
        This is some text
    </div>
    <div class="smallport-12 small-6  mediumport-6 medium-4  columns">
        This is a side bar...
    </div>
</div>

Hope that helps.

Cheers,

Will

Will Fairhurst commented on Will Fairhurst's post almost 4 years

Brian,

Perfect! Thanks for your help.

Will

Will Fairhurst commented on Will Fairhurst's post almost 5 years

Ok, so I have tracked the Internet Explorer problem down to the reveal js. It seems that IE does not like the var $(root_element).scrollTop(), which returns 0. If I replace the 'root_element' variable with 'window' we get the necessary scrollTop value and the calculation for position works fine and as such the reveal shows in the viewport whether you have scrolled or not.

The line in question is #4577 in foundation.js (at least in my build) and it is currently

css.top = $(root_element).scrollTop() - el.data('offset') + 'px'; //adding root_element instead of window for scrolling offset if modal trigger is below the fold

By changing it to

css.top = $(window).scrollTop() - el.data('offset') + 'px'; //adding root_element instead of window for scrolling offset if modal trigger is below the fold

it works! I notice that you can see the root_element when initialising Foundation with something like this 'reveal', { rootElement: 'window' } but it doesn't seem to work. The only thing that works (cross-browser) is to modify the core js which I am reluctant to do. Anyone got any better ideas?

Cheers,

Will

Will Fairhurst commented on Will Fairhurst's post almost 5 years

Rafi,

Thanks for that. You've fixed 90% of the problems with that fix....minor issue left is that on IE11 if you have scrolled down the page before launching the modal it 'reveals' off the top of the viewport so you can't see it without scrolling up...which will be beyond most users :-)

Any thoughts greatly appreciated!

Cheers,

Will

Will Fairhurst commented on Guillaume Masserey's post almost 5 years

Guillaume,

You absolute star! Thanks so much for that...problem solved!

All the best,

Will

Will Fairhurst commented on Guillaume Masserey's post almost 5 years

Guillaume,

Did you find a fix for this as I am having the same issue and it is bugging the hell out of me?

Cheers,

Will

Will Fairhurst commented on Will Fairhurst's post almost 5 years

Han,

Thanks so much for that and sorry for the late reply....didn't get a notification that you had replied!

I have implemented your suggestions and they are working perfectly so thank you! Totally agree with the breakpoints versus resolution comment but the specific issue I was trying to resolve was on an older site which was back when we were more resolution focused!

Thanks again,

Will

Posts Followed



  • 5
    Replies
  • Breakpoint-specific gutter?

    By Ryan

    gutter

    For my email templates, using a one-column layout and the default breakpoints, I'd like to specify a 40px left and right gutter on larger&nbsp;displays, but a 20px gutter on smaller&nbsp;displays. I'm currently setting&nbsp;$global-gutter: 40px, which wor... (continued)

    Last Reply by Ryan almost 3 years ago





Following

    No Content

Followers

My Posts

My Comments

You commented on Matt Mac's post almost 3 years

I was looking for a similar thing this morning and have put together a custom solution.  If anyone is still looking to achieve this (and is using SASS) then you could use the following to create breakpoint specific shrink styles.
/* =============================================================================
Custom Shrink Classes
========================================================================== */

@each $breakpoint in $breakpoint-classes {
@if $breakpoint == small {
// Do nothing
} @else {
@include breakpoint($breakpoint) {
.#{$breakpoint}-shrink {
flex: 0 0 auto;
max-width: 100%;
}
}
}
}
Once compiled you end up with the ability to use classes such as 
.medium-shrink or .large-shrink
This will work for custom breakpoints as well as any predefined ones.
Hope that helps someone.
Will
 

You commented on Ryan's post about 3 years

Rafi,
Know and LOVE the gutter map in Sites...would be just as cool to have it in Emails too...in fact I had assumed it would be there when I gave the client the mockups...then had to retro-engineer a solution when I found it wasn't :-)
It is great to be able to give a greater feeling of space on desktop mail clients but reduce it down on small devices, so I for one would definitely be in favour.
Cheers,
Will

You commented on Ryan's post about 3 years

Not sure if this is still of interest to you but I had the same requirement and this is what I did...
Firstly I set the $global-gutter variable to what I wanted it to be for desktops, in my case 30px
Secondly I added the following code to my app.scss file
/Responsive Gutter/
table.body td.columns, table.body th.columns{
@media only screen and (max-width: #{$global-breakpoint}) {
padding-left: 15px!important;
padding-right: 15px!important;
}
}
Limited testing carried out so far but it seems to be working as intended.
Hope that is of help to someone.
Cheers,
Will

You commented on Will Fairhurst's post almost 4 years

Brandon,

I did eventually...in a way... :-)

It occurred to me that I was going about it the wrong way. Why did I need to know the orientation when (for me at least) I was really just interested in the available width.

I have therefore created additional breakpoints in the _settings.scss file and reference those instead. See below...

$breakpoints: (
  smallport: 0px,
  small: 376px,
  mediumport: 668px,
  medium: 1024px,
  large: 1210px,
  xlarge: 1440px,
  xxlarge: 1921px,
);

$breakpoint-classes: (smallport small mediumport medium large);

This enables me to define column sizes like this:

<div class="row">
    <div class="smallport-12 small-6  mediumport-6 medium-8  columns">
        This is some text
    </div>
    <div class="smallport-12 small-6  mediumport-6 medium-4  columns">
        This is a side bar...
    </div>
</div>

Hope that helps.

Cheers,

Will

You commented on Will Fairhurst's post almost 4 years

Brian,

Perfect! Thanks for your help.

Will

You commented on Will Fairhurst's post almost 5 years

Ok, so I have tracked the Internet Explorer problem down to the reveal js. It seems that IE does not like the var $(root_element).scrollTop(), which returns 0. If I replace the 'root_element' variable with 'window' we get the necessary scrollTop value and the calculation for position works fine and as such the reveal shows in the viewport whether you have scrolled or not.

The line in question is #4577 in foundation.js (at least in my build) and it is currently

css.top = $(root_element).scrollTop() - el.data('offset') + 'px'; //adding root_element instead of window for scrolling offset if modal trigger is below the fold

By changing it to

css.top = $(window).scrollTop() - el.data('offset') + 'px'; //adding root_element instead of window for scrolling offset if modal trigger is below the fold

it works! I notice that you can see the root_element when initialising Foundation with something like this 'reveal', { rootElement: 'window' } but it doesn't seem to work. The only thing that works (cross-browser) is to modify the core js which I am reluctant to do. Anyone got any better ideas?

Cheers,

Will

You commented on Will Fairhurst's post almost 5 years

Rafi,

Thanks for that. You've fixed 90% of the problems with that fix....minor issue left is that on IE11 if you have scrolled down the page before launching the modal it 'reveals' off the top of the viewport so you can't see it without scrolling up...which will be beyond most users :-)

Any thoughts greatly appreciated!

Cheers,

Will

You commented on Guillaume Masserey's post almost 5 years

Guillaume,

You absolute star! Thanks so much for that...problem solved!

All the best,

Will

You commented on Guillaume Masserey's post almost 5 years

Guillaume,

Did you find a fix for this as I am having the same issue and it is bugging the hell out of me?

Cheers,

Will

You commented on Will Fairhurst's post almost 5 years

Han,

Thanks so much for that and sorry for the late reply....didn't get a notification that you had replied!

I have implemented your suggestions and they are working perfectly so thank you! Totally agree with the breakpoints versus resolution comment but the specific issue I was trying to resolve was on an older site which was back when we were more resolution focused!

Thanks again,

Will

Posts Followed

Following

  • No Content

Followers

  • No Content