Menu icon Foundation

Coder

My Posts

  • NEW
  • Email not responsive

    By Alex

    emailResponsiveOutlook

    Hi, i tested an email (the marketing template) in Outlook (browser) within office 365, but the template is not responsive. The columns doesn't stack if i resize the browser. I didn't customize the template


  • 2
    Replies
  • Reveal modal with ajax in Foundation 5

    By Alex

    modalAJAX

    Hi,   by using ajax, the close button will be replaced by the modal content within the div tag with the id of myModal. How can i prevent this behavior?   <div id="myModal" class="reveal-modal" data-reveal> <a class="close-revea... (continued)

    Last Reply by aamir khan 18 days ago


  • 3
    Replies
  • Foundation 6 - edit _settings.scss

    By Alex

    settingsedit

    Hi. i manually installed Foundation 6 like it is described. In the root-directory there is an folder "scss". Within this folder there is the _settings.scss (and the app.scss). How can i edit this file and prevent the overwrite if there is an update of ... (continued)

    Last Reply by Alex over 3 years ago



  • 1
    Reply
  • Accordion not working

    By Alex

    accordion

    Hi, the accordion does not work, but i don't know why. The tooltips are working fine. I copied the markup and JS from the documentation, but it does not work. The accordion lib was loaded (i can see it in the console by typing Foundation) and there... (continued)

    Last Reply by Alex almost 4 years ago



  • 5
    Replies
  • Inline List Mixin does not work

    By Alex

    inline list

    Hi, whats wrong with this mixin? I want to set margin-left to a negative value, but this does not work. There are 3 margin-values and the last one overwrites the other one? $inline-list-default-float-margin is the right variable?

    Last Reply by Alex about 4 years ago



  • 2
    Replies
  • Gulp, SASS-Files and Error-Handling

    By Alex

    gulpSass

    Hi, i use gulp-sass with the SASS-Version of Foundation (installed via bower). Is there an option to show an error message during the compile-process if a function does not exist? I use a settings file (imported before all foundation files) and insid... (continued)

    Last Reply by Geoff Kimball about 4 years ago


My Comments

Alex commented on Alex's post over 3 years

@Rafi Benkual you mean if i grab this updated _settings.scss then i have to place the changes in my existing _settings.scss?

@Brian Tan thank you, good idea :-)

Alex commented on Alex's post almost 4 years

Hi,

i tried in in codepen and there it works:

http://codepen.io/axelf/pen/wKgQMe?editors=110

But you can try it here (and thats the same behavior i have):
http://foundation.zurb.com/docs/components/buttons.html

If you change the HTML for the Expanded Button with Firebug or Dev Tools and add the small class, the font size won't change. By removing the expand class, the font size changes.

This is the CSS from Codepen

button.expand, .button.expand {
padding-left: 0;
padding-right: 0;
width: 100%;
}

and this is my local CSS

button.expand, .button.expand {
font-size: 1.14286rem;
padding: 1.14286rem 1.14286rem 1.21429rem;
width: 100%;
}

I think i have an error, but don't know the reason for the error.

Alex commented on Alex's post almost 4 years

Hi,

my mistake. i forgot to include the css for the accordion. now it works :-)

Alex commented on Alex's post almost 4 years

Hi,

my base font size is 14px, but for the breakpoints i have to use 16px as the base, because breakpoints in em are based on the browser standard of 16px, no matter what the base font size is.

what i don't inderstand is this line
$remValues: rem-calc($values, $base-value: $rem-base);

In the function em-calc i can use a param for the base-value and why is this value not used by the rem-calc function? What is the point of the variable $base-value? This variable will never be used in this function. Breakpoints are not calculated correct if the standard of 16px will be changed.

Alex commented on Alex's post about 4 years

Thank you very much. I looked only into my local version and not on github.

Alex commented on Alex's post about 4 years

Hi,

there is a bug in the mixin.

if i comment out this line

margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;

then the values are working. But with this line all the values before are overwritten by the auto value

ul {
margin-left: -30px;
margin: 0 auto;
}

the margin left value will never displayed in the css, because the next line overwrites this value.

Alex commented on Alex's post about 4 years

Hi,

exactly thats what i did, but it does not work.

$inline-list-default-float-margin: rem-calc(-55);

output is this:

.inline-list {
list-style: outside none none;
margin: 0 auto 1.0625rem;
overflow: hidden;
padding: 0;
}

this variable works:
$inline-list-bottom-margin: rem-calc(87);

Alex commented on Alex's post about 4 years

Hi Rafi,

i have still 1 question. If i want to add a new breakpoint and new classes with the mixin (grid and block-grid) do i have to copy the whole code from _grid.scss to my custom grid file and then modify the code in my custom file?

Until now i thougt i could only add the additional code to my custom grid but this don't work, because i overwrite some styles.

// from foundation
@media (min-width: 640px) {
  @include grid-html-classes('small');
}

//my custom grid file
@media (min-width: 200px) {
  @include grid-html-classes('verysmall');
}

My definition should come before the mixin of foundation, but this only works if i copy the whole code. Is there a better way of doing that?

Alex commented on Alex's post about 4 years

Hi,

thank you. I also need some classes to work with the grid. I forgot this to write in my first post. Do you know how can i create the classes for the smaller breakpoints? (e. xsmall- or xxsmall)

Alex commented on Stefan4UK's post about 4 years

Hi,

i have integrated the fix including your little change $remValues: rem-calc($values, $base-value); and it worked for me. Em-values in media queries are calculated correct:

@function mq-em-calc($value) {
    @return em-calc($value,16);
}

$small-breakpoint:  mq-em-calc(640);
$medium-breakpoint: mq-em-calc(1024);
$large-breakpoint:  mq-em-calc(1440);
$xlarge-breakpoint: mq-em-calc(1920);

$small-range:   (0, $small-breakpoint);
$medium-range:  ($small-breakpoint  + mq-em-calc(1), $medium-breakpoint);
$large-range:   ($medium-breakpoint + mq-em-calc(1), $large-breakpoint);
$xlarge-range:  ($large-breakpoint  + mq-em-calc(1), $xlarge-breakpoint);
$xxlarge-range: ($xlarge-breakpoint + mq-em-calc(1), mq-em-calc(99999999));

Posts Followed


Following

    No Content

Followers

My Posts










My Comments

You commented on Alex's post over 3 years

@Rafi Benkual you mean if i grab this updated _settings.scss then i have to place the changes in my existing _settings.scss?

@Brian Tan thank you, good idea :-)

You commented on Alex's post almost 4 years

Hi,

i tried in in codepen and there it works:

http://codepen.io/axelf/pen/wKgQMe?editors=110

But you can try it here (and thats the same behavior i have):
http://foundation.zurb.com/docs/components/buttons.html

If you change the HTML for the Expanded Button with Firebug or Dev Tools and add the small class, the font size won't change. By removing the expand class, the font size changes.

This is the CSS from Codepen

button.expand, .button.expand {
padding-left: 0;
padding-right: 0;
width: 100%;
}

and this is my local CSS

button.expand, .button.expand {
font-size: 1.14286rem;
padding: 1.14286rem 1.14286rem 1.21429rem;
width: 100%;
}

I think i have an error, but don't know the reason for the error.

You commented on Alex's post almost 4 years

Hi,

my mistake. i forgot to include the css for the accordion. now it works :-)

You commented on Alex's post almost 4 years

Hi,

my base font size is 14px, but for the breakpoints i have to use 16px as the base, because breakpoints in em are based on the browser standard of 16px, no matter what the base font size is.

what i don't inderstand is this line
$remValues: rem-calc($values, $base-value: $rem-base);

In the function em-calc i can use a param for the base-value and why is this value not used by the rem-calc function? What is the point of the variable $base-value? This variable will never be used in this function. Breakpoints are not calculated correct if the standard of 16px will be changed.

You commented on Alex's post about 4 years

Thank you very much. I looked only into my local version and not on github.

You commented on Alex's post about 4 years

Hi,

there is a bug in the mixin.

if i comment out this line

margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;

then the values are working. But with this line all the values before are overwritten by the auto value

ul {
margin-left: -30px;
margin: 0 auto;
}

the margin left value will never displayed in the css, because the next line overwrites this value.

You commented on Alex's post about 4 years

Hi,

exactly thats what i did, but it does not work.

$inline-list-default-float-margin: rem-calc(-55);

output is this:

.inline-list {
list-style: outside none none;
margin: 0 auto 1.0625rem;
overflow: hidden;
padding: 0;
}

this variable works:
$inline-list-bottom-margin: rem-calc(87);

You commented on Alex's post about 4 years

Hi Rafi,

i have still 1 question. If i want to add a new breakpoint and new classes with the mixin (grid and block-grid) do i have to copy the whole code from _grid.scss to my custom grid file and then modify the code in my custom file?

Until now i thougt i could only add the additional code to my custom grid but this don't work, because i overwrite some styles.

// from foundation
@media (min-width: 640px) {
  @include grid-html-classes('small');
}

//my custom grid file
@media (min-width: 200px) {
  @include grid-html-classes('verysmall');
}

My definition should come before the mixin of foundation, but this only works if i copy the whole code. Is there a better way of doing that?

You commented on Alex's post about 4 years

Hi,

thank you. I also need some classes to work with the grid. I forgot this to write in my first post. Do you know how can i create the classes for the smaller breakpoints? (e. xsmall- or xxsmall)

You commented on Stefan4UK's post about 4 years

Hi,

i have integrated the fix including your little change $remValues: rem-calc($values, $base-value); and it worked for me. Em-values in media queries are calculated correct:

@function mq-em-calc($value) {
    @return em-calc($value,16);
}

$small-breakpoint:  mq-em-calc(640);
$medium-breakpoint: mq-em-calc(1024);
$large-breakpoint:  mq-em-calc(1440);
$xlarge-breakpoint: mq-em-calc(1920);

$small-range:   (0, $small-breakpoint);
$medium-range:  ($small-breakpoint  + mq-em-calc(1), $medium-breakpoint);
$large-range:   ($medium-breakpoint + mq-em-calc(1), $large-breakpoint);
$xlarge-range:  ($large-breakpoint  + mq-em-calc(1), $xlarge-breakpoint);
$xxlarge-range: ($xlarge-breakpoint + mq-em-calc(1), mq-em-calc(99999999));

Posts Followed

Following

  • No Content

Followers

  • No Content