Menu icon Foundation

Designer | Beuningen, the Netherlands

My Posts

  • 1
    Reply
  • disable Dropdown align to button

    By Remco Janssen

    dropdown

    By default the new dropdown js aligns to something, nice that we can now set it to right/center/left or whatever, but that causes my megamenu (build using F6.3) to malfunction, because it now get's an offset of -433px (or something) passes as element css.... (continued)

    Last Reply by Jamessmith 6 months ago


  • 6
    Replies
  • disable Dropdown align to button

    By Remco Janssen

    dropdown

    By default the new dropdown js aligns to something, nice that we can now set it to right/center/left or whatever, but that causes my megamenu (build using F6.3) to malfunction, because it now get's an offset of -433px (or something) passes as element css.... (continued)

    Last Reply by Nerin Lop 2 months ago


  • NEW
  • @import 'breakpoint' Error

    By Remco Janssen

    Sassbreakpointutil

    When installing a fresh foundation (using cli) I get the following error after the 'foundation watch' command   Error in plugin 'sass'Message:    bower_components/foundation-sites/scss/util/_util.scssError: File to import not found o... (continued)



  • 1
    Reply
  • Can data-toggler act on hover?

    By Remco Janssen

    data-toggler

    I am using data-toggler for a project, and I'm a big fan of the function, but I really would like the toggle to happen on hover. I want to reveal a 'megamenu' when hovering over a menu-item. If data-toggler can help me out here, great, if not I'll have to... (continued)

    Last Reply by Fabian about 2 years ago




My Comments

Remco Janssen commented on Remco Janssen's post about 2 years

Hi Rafi,
I added class "hide" to the outer div, and then used data-toggle to reveal it - but then the height wasn't calculated correctly (ended up being 0).
I changed it so it is offcanvas and now it works....

Remco Janssen commented on shaquel's post about 2 years

All right, first, I see you load foundation.min.css and foundation.css
 
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/foundation.min.css" />it's unnecessary to load these both...If I take a clean foundation for sites install and use the code below it works. So try to change your code to use the 'class="orbit" and so on like below....

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<ul class="orbit-container">
<li class="orbit-slide">
<h5>The Jazz Bar</h5>
</li>
<li class="orbit-slide">
<h5>Electric Doc</h5>
</li>
<li class="orbit-slide">
<h5>Mario's Palace</h5>
</li>
</ul>
</div>
 

Remco Janssen commented on Iain MacDonald's post about 2 years

You can set the breakpoint in your settings.scss file to get your site to switch to mobile on a higher width... or, and that's what I've done on 'https://www.echtimproviseren.nl' just lower the font-size a bit to make the items fit...
I used the following in the class for the menu items
@include breakpoint(medium down) {font-size: 0.8rem;}

Remco Janssen commented on Son of Spectrum's post about 2 years

What do you mean with 'collapsed'... According to your code it shouldn't equalize on small. Did you try adding s small-12 to the class to see if the equalizing happens when you stack the divs?

Remco Janssen commented on shaquel's post about 2 years

Hi Shaquel,
Did you check for JavaScript Errors?
post an example url

Remco Janssen commented on Jessica Meyer Votaw's post about 2 years

@Fistyl,
Can you provide more details, like an url of where it is happening?
 

Remco Janssen commented on Daniel Jeffery's post over 2 years

I've made an installable basic template with Foundation 6 (It's not the latest build)
https://github.com/RemcoJanssen/foundation6-template

Remco Janssen commented on Remco Janssen's post over 2 years

@James Lin thanks for your sugestion, but my problem is that the divs are not the same height, and I don't want them to be. What I did now is create 3 columns and if I have e.g. 9 items I place 3 in each of them. But I would have liked to use this code:

<div class="row">
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
</div>

And have that result in 3 columns like in the image above...
But somehow the top of 4th item (which ends up on the left after the first three) is aligned with the bottom of the 3th, in stead of the bottom of the 1st

Remco Janssen commented on Sharriff's post over 2 years

The error you get now says it's missing the 'success-color' variable. So I think you need to add those to the palette, try changing it to:

$foundation-palette: (
  primary: #F0AD27,
  secondary: #E44347,
  success: #F37809,
  warning: #F26107,
  alert: #0C0C0B,
 mars: #D7525C,
  saturn: #E4B884,
  neptune: #5147D7,
);

Remco Janssen commented on Greg Wasserstrom's post over 2 years

@Vladimir that was my first reaction as well, but I don't know if this goes for 'foundation for email' ... it does for 'sites'

Posts Followed






  • 9
    Replies
  • Problem creating color palette

    By Sharriff

    PaletteSass

    According to the 6.2 docs, one can define a color palette, a step towards making a site "themable"(http://foundation.zurb.com/sites/docs/global.html#colors). As a test, I proceeded to create a test project using the foundation CLI with the "basic" temp... (continued)

    Last Reply by Rafi Benkual over 2 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Remco Janssen's post about 2 years

Hi Rafi,
I added class "hide" to the outer div, and then used data-toggle to reveal it - but then the height wasn't calculated correctly (ended up being 0).
I changed it so it is offcanvas and now it works....

You commented on shaquel's post about 2 years

All right, first, I see you load foundation.min.css and foundation.css
 
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/foundation.min.css" />it's unnecessary to load these both...If I take a clean foundation for sites install and use the code below it works. So try to change your code to use the 'class="orbit" and so on like below....

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<ul class="orbit-container">
<li class="orbit-slide">
<h5>The Jazz Bar</h5>
</li>
<li class="orbit-slide">
<h5>Electric Doc</h5>
</li>
<li class="orbit-slide">
<h5>Mario's Palace</h5>
</li>
</ul>
</div>
 

You commented on Iain MacDonald's post about 2 years

You can set the breakpoint in your settings.scss file to get your site to switch to mobile on a higher width... or, and that's what I've done on 'https://www.echtimproviseren.nl' just lower the font-size a bit to make the items fit...
I used the following in the class for the menu items
@include breakpoint(medium down) {font-size: 0.8rem;}

You commented on Son of Spectrum's post about 2 years

What do you mean with 'collapsed'... According to your code it shouldn't equalize on small. Did you try adding s small-12 to the class to see if the equalizing happens when you stack the divs?

You commented on shaquel's post about 2 years

Hi Shaquel,
Did you check for JavaScript Errors?
post an example url

You commented on Jessica Meyer Votaw's post about 2 years

@Fistyl,
Can you provide more details, like an url of where it is happening?
 

You commented on Daniel Jeffery's post over 2 years

I've made an installable basic template with Foundation 6 (It's not the latest build)
https://github.com/RemcoJanssen/foundation6-template

You commented on Remco Janssen's post over 2 years

@James Lin thanks for your sugestion, but my problem is that the divs are not the same height, and I don't want them to be. What I did now is create 3 columns and if I have e.g. 9 items I place 3 in each of them. But I would have liked to use this code:

<div class="row">
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
</div>

And have that result in 3 columns like in the image above...
But somehow the top of 4th item (which ends up on the left after the first three) is aligned with the bottom of the 3th, in stead of the bottom of the 1st

You commented on Sharriff's post over 2 years

The error you get now says it's missing the 'success-color' variable. So I think you need to add those to the palette, try changing it to:

$foundation-palette: (
  primary: #F0AD27,
  secondary: #E44347,
  success: #F37809,
  warning: #F26107,
  alert: #0C0C0B,
 mars: #D7525C,
  saturn: #E4B884,
  neptune: #5147D7,
);

You commented on Greg Wasserstrom's post over 2 years

@Vladimir that was my first reaction as well, but I don't know if this goes for 'foundation for email' ... it does for 'sites'

Posts Followed

Following

  • No Content

Followers

  • No Content