Menu icon Foundation

Developer | Chennai, India

Senior UX engineer at http://www.runway2street.com Sass enthusiast and overall nice guy

My Posts


  • 3
    Replies
  • do you use only rems?

    By Vinay Raghu

    rem-calc

    I have been thinking the rem-calc needs to extend its functionality. em's are being used by a lot of sass plugins that tap into modular scale. They actually prefer the em's compounding effect. There should be a way to calculate ems as well in core. And ev... (continued)

    Last Reply by Vinay Raghu over 5 years ago


My Comments

Vinay Raghu commented on Malou Geurts's post over 5 years

Hi, I have tried using foundation columns with isotope and realized that isotope works best with fixed column widths and not responsive columns(that ship with foundation). So the best way to go about this is to define set widths for your columns.

If you look at masonry examples, there are different sizes but they all have set widths.
If you look at pinterest, only the heights are variable and the widths are set

When we tried this at http://www.runway2street.com, I realized that freewall is a better option for us as it has a default pinterest layout that expands your columns to take up the available screen space.

http://vnjs.net/www/project/freewall/
http://vnjs.net/www/project/freewall/example/pinterest-layout.html

TL;DR don't mix your foundation grid with isotope. They work differently. You can still achieve it but fixed width columns work better for isotope. Check out Freewall project

Goodluck!

Vinay Raghu commented on Vinay Raghu's post over 5 years

@Frank agreed. The initial proposal was to keep the existing as default. and whoever wants to use @extend only turns that variable on and no grid classes are output to the CSS. only extends

But actually, there doesn't seem to be any favor to that approach - especially the sass community. They think foundation's and any 12 column grid is superfluous and imposes constraints to your design.

The alternative is to either adopt a requirement specific Sass based grid framework such as Susy or Singularity that provides more flexibility.

The other option is to make foundation's grid scale up to such higher expectations, which might take it forward but not be useful for people who use it only for prototyping. Am assessing if this effort is worth taking and whether Zurb users would really benefit from it.

Am currently trying to wrap my head around singularity and work some things out. So will keep you posted on the progress. Thanks for your inputs!

Vinay Raghu commented on Eric Bishard's post over 5 years

Could you please add a codepen/fiddle for this?

Vinay Raghu commented on Vinay Raghu's post over 5 years

I agree with Scott. @mixins are probably a better way to go about this since @extends are easy to abuse and end up bloating your stylesheet. At the same time, Foundation needs a better grid system than what is currently present.

While what we have is good for prototyping, foundation prides itself as a framework that offers more customizations and less assumptions about how you use it. Having a flexible grid system is a step forward in that direction.

I am going to go out and build a bunch of mixins to see if we can include that. I would like to know what the core team thinks though.

Vinay Raghu commented on Alec Jackson's post over 5 years

I'd +1 this. Bootstrap overlays the menu as well. While you are at this I want to add a nitty gritty really. Its a very low priority thing but since the positioning and the hamburger icon is being generated by text shadows, if you tap on it, the area that gets highlighted is kind of odd.

It would be awesome if that component works as though its actually a button. Right now it really affects how users interact with it. Please can you also rework that?

Vinay Raghu commented on Vinay Raghu's post over 5 years

Hey Kev, thanks for the inputs and the stimulating conversation.
Here are my understanding of your responses and some additional questions

  1. Private grid systems

I know building your own grid is the best method and I have worked with frameworks such as susy and Singularity. i love singularity but assume I want to use foundation as a framework. I feel comfortable with the framework doing a lot of weight lifting for me and my project uses all their other components, so why not their grid?

Singularity is awesome...that's no reason why foundation's grid should be left behind.

I want to work with their grid system instead of a custom one, just that I want to extend my classes in my SCSS instead of having them in my markup

Its easy to customize their responsive breakpoints, what I don't like is so much of grid CSS when I might not be using all of them. Additionally, I don't want those classes in my HTML and would rather they stay in the CSS/SCSS.

  1. Using the mixin

Using their mixins does not work for me because I have to repeat the @media a lot of times. My requirement is as below

@extend %large-6;
@extend %medium-8;
@extend %small-12;
@extend %columns;
@extend %large-centered;
@extend %medium-centered;
@extend %hide-for-xlarge;

If I use the grid mixins to achieve this, I'd have to do something like the below several times

@include grid-column(12)
@media #{$small} {
    @include grid-column(8)
}
@media #{$medium} {
  @include grid-column(6)
}
....

I find this repetitive, especially the media tags and I don't like writing so many media queries. The foundation grid has already taken care of that for me. Instead of outputting ALL the classes, I want them to be silent placeholders, so I can grab what I want and use it in my code.

  1. Backward compatibility to IE8 and Affecting non power users

F5 does not support <IE9 but I understand IE8 is a big deal for a lot of people. Also, this is absolutely unnecessary for people who are already happy with what ships by default. So how about a switch that people who want to use this feature can turn on?

Vinay Raghu commented on Vinay Raghu's post over 5 years

There are cases where this compounding effect (I am refraining from calling it an issue from now on) is desired. There are a lot of sass tools that use modular ratios for typography which rely on ems and work exceedingly well with ems.

https://github.com/Team-Sass/modular-scale
http://sass.fffunction.co/

Having em-calc and rem-calc might lead to confusion and require renaming, which I am against. I do think a lot of people want em's back though.

Vinay Raghu commented on Robin Cox's post over 5 years

I love it! Its awesome to have a nice theme avaialable that people can just drag and drop into their projects!

Vinay Raghu commented on Rafi Benkual's post over 5 years

Hey Rafi

Great initiative this! I really like it! Thanks for taking your time to do this.
1. I am unable to set my profile picture. I upload it and nothing happens. No error, no upload.
2. Is there a meta-forum? Where we discuss how to use this forum and report bugs/issues with this forum itself?

Vinay Raghu commented on Simon's post over 5 years

If you want a CSS only solution, I have a demo here
http://codepen.io/rvinay88/details/JvByc

The problem here though is, it adds a scroll and doesn't extend just up to the bottom of the screen. Hope this helps someone

Posts Followed



  • 3
    Replies
  • do you use only rems?

    By Vinay Raghu

    rem-calc

    I have been thinking the rem-calc needs to extend its functionality. em's are being used by a lot of sass plugins that tap into modular scale. They actually prefer the em's compounding effect. There should be a way to calculate ems as well in core. And ev... (continued)

    Last Reply by Vinay Raghu over 5 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Malou Geurts's post over 5 years

Hi, I have tried using foundation columns with isotope and realized that isotope works best with fixed column widths and not responsive columns(that ship with foundation). So the best way to go about this is to define set widths for your columns.

If you look at masonry examples, there are different sizes but they all have set widths.
If you look at pinterest, only the heights are variable and the widths are set

When we tried this at http://www.runway2street.com, I realized that freewall is a better option for us as it has a default pinterest layout that expands your columns to take up the available screen space.

http://vnjs.net/www/project/freewall/
http://vnjs.net/www/project/freewall/example/pinterest-layout.html

TL;DR don't mix your foundation grid with isotope. They work differently. You can still achieve it but fixed width columns work better for isotope. Check out Freewall project

Goodluck!

You commented on Vinay Raghu's post over 5 years

@Frank agreed. The initial proposal was to keep the existing as default. and whoever wants to use @extend only turns that variable on and no grid classes are output to the CSS. only extends

But actually, there doesn't seem to be any favor to that approach - especially the sass community. They think foundation's and any 12 column grid is superfluous and imposes constraints to your design.

The alternative is to either adopt a requirement specific Sass based grid framework such as Susy or Singularity that provides more flexibility.

The other option is to make foundation's grid scale up to such higher expectations, which might take it forward but not be useful for people who use it only for prototyping. Am assessing if this effort is worth taking and whether Zurb users would really benefit from it.

Am currently trying to wrap my head around singularity and work some things out. So will keep you posted on the progress. Thanks for your inputs!

You commented on Eric Bishard's post over 5 years

Could you please add a codepen/fiddle for this?

You commented on Vinay Raghu's post over 5 years

I agree with Scott. @mixins are probably a better way to go about this since @extends are easy to abuse and end up bloating your stylesheet. At the same time, Foundation needs a better grid system than what is currently present.

While what we have is good for prototyping, foundation prides itself as a framework that offers more customizations and less assumptions about how you use it. Having a flexible grid system is a step forward in that direction.

I am going to go out and build a bunch of mixins to see if we can include that. I would like to know what the core team thinks though.

You commented on Alec Jackson's post over 5 years

I'd +1 this. Bootstrap overlays the menu as well. While you are at this I want to add a nitty gritty really. Its a very low priority thing but since the positioning and the hamburger icon is being generated by text shadows, if you tap on it, the area that gets highlighted is kind of odd.

It would be awesome if that component works as though its actually a button. Right now it really affects how users interact with it. Please can you also rework that?

You commented on Vinay Raghu's post over 5 years

Hey Kev, thanks for the inputs and the stimulating conversation.
Here are my understanding of your responses and some additional questions

  1. Private grid systems

I know building your own grid is the best method and I have worked with frameworks such as susy and Singularity. i love singularity but assume I want to use foundation as a framework. I feel comfortable with the framework doing a lot of weight lifting for me and my project uses all their other components, so why not their grid?

Singularity is awesome...that's no reason why foundation's grid should be left behind.

I want to work with their grid system instead of a custom one, just that I want to extend my classes in my SCSS instead of having them in my markup

Its easy to customize their responsive breakpoints, what I don't like is so much of grid CSS when I might not be using all of them. Additionally, I don't want those classes in my HTML and would rather they stay in the CSS/SCSS.

  1. Using the mixin

Using their mixins does not work for me because I have to repeat the @media a lot of times. My requirement is as below

@extend %large-6;
@extend %medium-8;
@extend %small-12;
@extend %columns;
@extend %large-centered;
@extend %medium-centered;
@extend %hide-for-xlarge;

If I use the grid mixins to achieve this, I'd have to do something like the below several times

@include grid-column(12)
@media #{$small} {
    @include grid-column(8)
}
@media #{$medium} {
  @include grid-column(6)
}
....

I find this repetitive, especially the media tags and I don't like writing so many media queries. The foundation grid has already taken care of that for me. Instead of outputting ALL the classes, I want them to be silent placeholders, so I can grab what I want and use it in my code.

  1. Backward compatibility to IE8 and Affecting non power users

F5 does not support <IE9 but I understand IE8 is a big deal for a lot of people. Also, this is absolutely unnecessary for people who are already happy with what ships by default. So how about a switch that people who want to use this feature can turn on?

You commented on Vinay Raghu's post over 5 years

There are cases where this compounding effect (I am refraining from calling it an issue from now on) is desired. There are a lot of sass tools that use modular ratios for typography which rely on ems and work exceedingly well with ems.

https://github.com/Team-Sass/modular-scale
http://sass.fffunction.co/

Having em-calc and rem-calc might lead to confusion and require renaming, which I am against. I do think a lot of people want em's back though.

You commented on Robin Cox's post over 5 years

I love it! Its awesome to have a nice theme avaialable that people can just drag and drop into their projects!

You commented on Rafi Benkual's post over 5 years

Hey Rafi

Great initiative this! I really like it! Thanks for taking your time to do this.
1. I am unable to set my profile picture. I upload it and nothing happens. No error, no upload.
2. Is there a meta-forum? Where we discuss how to use this forum and report bugs/issues with this forum itself?

You commented on Simon's post over 5 years

If you want a CSS only solution, I have a demo here
http://codepen.io/rvinay88/details/JvByc

The problem here though is, it adds a scroll and doesn't extend just up to the bottom of the screen. Hope this helps someone

Posts Followed

Following

  • No Content

Followers

  • No Content