Menu icon Foundation

My Posts









My Comments

Shannon Schärer commented on Shannon Schärer's post 11 months

I was so excited to get your response. I re-checked my code, it looks good, so I thought I would try to install Owl Carousel from the tutorial to see if I could get that working. It worked perfectly. I also changed the reference in the config.yml file to:
# Paths to your own project code are here
- "bower_components/masonry/dist/masonry.pkgd.min.js"
 
Masonry however still doesn't work. :-(
Are you using the "Basic Template" or the "Zurb Template?" I can get it working with the basic template but not with the zurb template. I see in your example that you are referencing the plugin at the bottom with the rest of the scripts, which leads me to conclude that you are using the basic template. Please do correct me if I am wrong. :-)
https://gist.github.com/rafibomb/d07a2dac74416dd768e9
Could you maybe tell me how you installed it, step for step? The error is being thrown even before initialisation. I'm totally bummed out.

Shannon Schärer commented on Shannon Schärer's post about 1 year

I also look in the developer tools, the color is coming from title-bar.scss which I suppose comes from the @include foundation-title-bar; in the app.scss. It doesn't matter if I place my custom color before or after, it still doesn't work.
 
Upon further inspection, a lot of my custom css is being overwritten by the foundation mixins, in the bower components file... Not even the settings.scss file can change them.

Shannon Schärer commented on Shannon Schärer's post about 1 year

It usually is something trivial, isn't it? I can change the font-color and off-canvas-background out of my custom file without a problem, just not the title bar. I also placed the title bar at the end of the settings file, because it's not included in there, and that didn't help either. In my app file I moved the custom file up and down, before and after all the imports. That didn't help either, and cause the font-color change to be overridden. This is the setup right now. 
 
Update: I caught those $ where I needed #, that wasn't the problem either.
 
// app.scss

@charset 'utf-8';

@import 'settings';
@import 'foundation';
@import 'custom';
@import 'motion-ui';

@include foundation-global-styles;
@include foundation-grid;
// ...

// custom.scss

.menu-logo {
img {
height: 50px;
}
}
.hero-image-container {
width:100%;
}
.header-hero-image {
width:100%;
}

.row.padded {
padding: 2rem 0 5rem;
}

.background-gray {
background-color: $light-gray;
}

$body-font-color: $primary-color;

$offcanvas-background: #fff;

$titlebar-background: $fff;
$titlebar-color: $fff;

Shannon Schärer commented on Shannon Schärer's post about 1 year

It is probably important to note that I am working with YETI and that the variables mentioned in http://foundation.zurb.com/sites/docs/off-canvas.html aren't in the settings.scss.

Shannon Schärer commented on Shannon Schärer's post over 1 year

Btw. This is how the magellan div looks... am I putting the data-options on the wrong part?
HTML
<div data-sticky data-top-anchor="ss-sub" data-btm-anchor="lang_sel_footer:bottom" data-options="barOffset:500;">

Shannon Schärer commented on Shannon Schärer's post over 1 year

Thanks for the suggestion but Slick, like Orbit is a slider of sorts. I'm looking for a Lightbox.

Shannon Schärer commented on Shannon Schärer's post over 1 year

I guess I will just have to add one in. Is there one that anyone recommends?

Shannon Schärer commented on Shannon Schärer's post over 1 year

Wait it did work! I just forgot to add the example code to the app.js resp. scripts.js. I need to write all that down now, so I don't forget. Pain in the butt!

Shannon Schärer commented on Shannon Schärer's post over 1 year

Ahh no go. Man this shouldn't be so hard.

Shannon Schärer commented on Shannon Schärer's post over 1 year

Sorry things got busy over the weekend.

I included the js file in enqueue scripts, silly me I thought gulp would take care of it... still now signs of life. :-(

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Shannon Schärer's post 11 months

I was so excited to get your response. I re-checked my code, it looks good, so I thought I would try to install Owl Carousel from the tutorial to see if I could get that working. It worked perfectly. I also changed the reference in the config.yml file to:
# Paths to your own project code are here
- "bower_components/masonry/dist/masonry.pkgd.min.js"
 
Masonry however still doesn't work. :-(
Are you using the "Basic Template" or the "Zurb Template?" I can get it working with the basic template but not with the zurb template. I see in your example that you are referencing the plugin at the bottom with the rest of the scripts, which leads me to conclude that you are using the basic template. Please do correct me if I am wrong. :-)
https://gist.github.com/rafibomb/d07a2dac74416dd768e9
Could you maybe tell me how you installed it, step for step? The error is being thrown even before initialisation. I'm totally bummed out.

You commented on Shannon Schärer's post about 1 year

I also look in the developer tools, the color is coming from title-bar.scss which I suppose comes from the @include foundation-title-bar; in the app.scss. It doesn't matter if I place my custom color before or after, it still doesn't work.
 
Upon further inspection, a lot of my custom css is being overwritten by the foundation mixins, in the bower components file... Not even the settings.scss file can change them.

You commented on Shannon Schärer's post about 1 year

It usually is something trivial, isn't it? I can change the font-color and off-canvas-background out of my custom file without a problem, just not the title bar. I also placed the title bar at the end of the settings file, because it's not included in there, and that didn't help either. In my app file I moved the custom file up and down, before and after all the imports. That didn't help either, and cause the font-color change to be overridden. This is the setup right now. 
 
Update: I caught those $ where I needed #, that wasn't the problem either.
 
// app.scss

@charset 'utf-8';

@import 'settings';
@import 'foundation';
@import 'custom';
@import 'motion-ui';

@include foundation-global-styles;
@include foundation-grid;
// ...

// custom.scss

.menu-logo {
img {
height: 50px;
}
}
.hero-image-container {
width:100%;
}
.header-hero-image {
width:100%;
}

.row.padded {
padding: 2rem 0 5rem;
}

.background-gray {
background-color: $light-gray;
}

$body-font-color: $primary-color;

$offcanvas-background: #fff;

$titlebar-background: $fff;
$titlebar-color: $fff;

You commented on Shannon Schärer's post about 1 year

It is probably important to note that I am working with YETI and that the variables mentioned in http://foundation.zurb.com/sites/docs/off-canvas.html aren't in the settings.scss.

You commented on Shannon Schärer's post over 1 year

Btw. This is how the magellan div looks... am I putting the data-options on the wrong part?
HTML
<div data-sticky data-top-anchor="ss-sub" data-btm-anchor="lang_sel_footer:bottom" data-options="barOffset:500;">

You commented on Shannon Schärer's post over 1 year

Thanks for the suggestion but Slick, like Orbit is a slider of sorts. I'm looking for a Lightbox.

You commented on Shannon Schärer's post over 1 year

I guess I will just have to add one in. Is there one that anyone recommends?

You commented on Shannon Schärer's post over 1 year

Wait it did work! I just forgot to add the example code to the app.js resp. scripts.js. I need to write all that down now, so I don't forget. Pain in the butt!

You commented on Shannon Schärer's post over 1 year

Ahh no go. Man this shouldn't be so hard.

You commented on Shannon Schärer's post over 1 year

Sorry things got busy over the weekend.

I included the js file in enqueue scripts, silly me I thought gulp would take care of it... still now signs of life. :-(

Posts Followed

No Content

Following

  • No Content

Followers