Menu icon Foundation

My Posts


  • 2
    Replies
  • Foundation scripts not running

    By Darren Wood

    jsjavascript

    Hi, I've been stuggling with this for far too long... I'm wanting to use only the JS bits of foundation (interchange, abide, magellan) and write my own custom CSS. I've included all the required scripts and am calling foundation but nothing is happe... (continued)

    Last Reply by Darren Wood over 5 years ago


My Comments

Darren Wood commented on Darren Wood's post over 5 years

Thanks for the reply Rafi, but none of your links address the issue I'm having... which is that interchange thinks that my HTML snippet is an image. If you look at the rendered HTML again you will see that it's setting my 02-organisms-01-product-00-product-hero-large.html file as the background image rather than loading that HTML block into the page

Darren Wood commented on Darren Wood's post over 5 years

Okay—so I've found out how to fix this issue. As I mentioned I was using my own CSS therefore I was not including any foundation CSS—therein lies the issue... There are a number of critical lines of CSS required to get the scripts to run.

Obviously change the font-family values to match whatever you need...

meta.foundation-version {
  font-family: "/5.2.0/"; }

meta.foundation-mq-small {
  font-family: "/only screen and (max-width: 40em)/";
  width: 0em; }

meta.foundation-mq-medium {
  font-family: "/only screen and (min-width:40.063em)/";
  width: 40.063em; }

meta.foundation-mq-large {
  font-family: "/only screen and (min-width:64.063em)/";
  width: 64.063em; }

meta.foundation-mq-xlarge {
  font-family: "/only screen and (min-width:90.063em)/";
  width: 90.063em; }

meta.foundation-mq-xxlarge {
  font-family: "/only screen and (min-width:120.063em)/";
  width: 120.063em; }

meta.foundation-data-attribute-namespace {
  font-family: false; }


Posts Followed


Following

    No Content

Followers

My Posts


My Comments

You commented on Darren Wood's post over 5 years

Thanks for the reply Rafi, but none of your links address the issue I'm having... which is that interchange thinks that my HTML snippet is an image. If you look at the rendered HTML again you will see that it's setting my 02-organisms-01-product-00-product-hero-large.html file as the background image rather than loading that HTML block into the page

You commented on Darren Wood's post over 5 years

Okay—so I've found out how to fix this issue. As I mentioned I was using my own CSS therefore I was not including any foundation CSS—therein lies the issue... There are a number of critical lines of CSS required to get the scripts to run.

Obviously change the font-family values to match whatever you need...

meta.foundation-version {
  font-family: "/5.2.0/"; }

meta.foundation-mq-small {
  font-family: "/only screen and (max-width: 40em)/";
  width: 0em; }

meta.foundation-mq-medium {
  font-family: "/only screen and (min-width:40.063em)/";
  width: 40.063em; }

meta.foundation-mq-large {
  font-family: "/only screen and (min-width:64.063em)/";
  width: 64.063em; }

meta.foundation-mq-xlarge {
  font-family: "/only screen and (min-width:90.063em)/";
  width: 90.063em; }

meta.foundation-mq-xxlarge {
  font-family: "/only screen and (min-width:120.063em)/";
  width: 120.063em; }

meta.foundation-data-attribute-namespace {
  font-family: false; }


Posts Followed

Following

  • No Content

Followers