Menu icon Foundation
Get header font size variable - Foundation 6

Hi Guys,

In Foundation 5 you can access header font size variables like: $h1-font-size;

Is there an equivalent in Foundation 6?

Thanks

Matt

foundation 6

Hi Guys,

In Foundation 5 you can access header font size variables like: $h1-font-size;

Is there an equivalent in Foundation 6?

Thanks

Matt

Brett Mason about 4 years ago

Its a bit more difficult in Foundation 6 because its stored in a Sass map. See this reply from Geoff for help: http://foundation.zurb.com/forum/posts/36610-get-sass-variable-from-header-sizes

Depending on how you are using it, you could also add a custom function to get the value more easily (its what I've done in my own project). This is the function I use (its probably not perfect but works!)

@function header-size($breakpoint, $size) {
  @return rem-calc(map-get(map-get($header-sizes, $breakpoint), $size) * 1px);
}

All you need to do is in your sass file use it like this: font-size: header-size(medium, h1);
This would output the h1 size for medium and up screens.

G Desmond over 3 years ago

Thanks Brett Mason, it's very helpful.

I make a mixin include breakpoint.

@mixin header-size($type){
  font-size: rem-calc(map_get(map_get($header-sizes, "small"),$type) * 1px);
  @include breakpoint(medium){
    font-size: rem-calc(map_get(map_get($header-sizes, "medium"),$type) * 1px);
  }
}

 

Cyril almost 3 years ago

With foundation 6.3 and change of this variable in $header-styles. How can we access to the "font-size" property ?

Ex : 

$header-styles: (
  small: (
    'h1': ('font-size': 24),
    'h2': ('font-size': 20),
    'h3': ('font-size': 19),
    'h4': ('font-size': 18),
    'h5': ('font-size': 17),
    'h6': ('font-size': 16),
  ),
  medium: (
    'h1': ('font-size': 48),
    'h2': ('font-size': 40),
    'h3': ('font-size': 31),
    'h4': ('font-size': 25),
    'h5': ('font-size': 20),
    'h6': ('font-size': 16),
  ),
) !default;

Paul Benbow almost 3 years ago

Take your pick. Doesn't look particularly efficient but is working for me.

font-size: header-size(medium, h2);
@include mx-header-size(h4);   
@function header-size($breakpoint, $size) {
  @return rem-calc(map-get(map-get(map-get($header-styles, "small"), $size), "font-size") * 1px);
}

@mixin mx-header-size($type){
  font-size: rem-calc(map-get(map-get(map-get($header-styles, "small"), $type), "font-size") * 1px);
  @include breakpoint(medium){
    font-size: rem-calc(map-get(map-get(map-get($header-styles, "medium"), $type), "font-size") * 1px);
  }
}

Hakim Benoudjit almost 3 years ago

I believe this is the way to accomplish what you want:

map-deep-get($header-styles, small, h1, font-size)

Source:

How do we map-deep-get() values from $header-styles in 6.3?

Cris Woler over 1 year ago

Hi! 

Could you explain to me that piece of code Hakim?

map-deep-get($header-styles, small, h1, font-size)

How can I change the <h1> value on specific tags like <section> ?

 

(Thanks!)

Hakim Benoudjit over 1 year ago

Sorry Cris I haven't used Foundation for more than a year, I can't remember the syntax.