Menu icon Foundation

Designer

My Posts

No Content

My Comments

Avery L commented on samjin's post over 5 years

There's an easy fix, all you do is move "foundation/components/grid", to the top of all the other imports. It has to be loaded first.

Change that and the error goes away!

Avery L commented on Guy Van Bael's post over 5 years

The same problem happened to me. I updated and now all of javascript doesn't work.

edit: couldn't find a solution that works consistently so i just create a new project and copied my content over and now everything's working again.

Avery L commented on Christian Matthias's post over 5 years

I also found the grunt documentation very informative in understanding the compiling processor and helped me a lot: http://gruntjs.com/getting-started

Avery L commented on Maria Rodriguez's post over 5 years

If you setup sass like the documentation (http://foundation.zurb.com/docs/sass.html) then you just edit the .scss files in the /project-dir/scss/... If it's one of the default styles/variables then uncomment and edit the appropriate lines in the _settings.scss files, or if you wanna add your own custom css then it's easier to add it to the app.scss

Then when you put it together via grunt it'll all be in the app.css file. App.css is just the output (and if you're not using SCSS then it's what you'd edit).

Avery L commented on Donovan Ng's post over 5 years

I think he wants different styling for different sizes (i may be wrong), because he has menulinks-s menulinks-m and menulinks-l (i'm guessing small/medium/large).

If so, you should just separate them with media queries and have one menulinks class instead of 3.:

$background-color:#999;
$link-color:#fff;
ul li {
  &.menulinks {
  list-style:none;
  font-family: "Century Gothic", Verdana, Arial, Sans-Serif;
  margin:0;
  padding:0;
  //etc (other styles that's for all sizes)
  }
}
@media #{$medium-only} {
  ul li {
    &.menulinks {
    //medium only attributes
    }
  }
}
@media #{$large-up} {
  ul li {
    &.menulinks {
    //large and up attributes
    }
  }
}

Avery L commented on Shreekar Chonkar's post over 5 years

I think the best way is to do it via media queries. If you do it in the html the browser will download all of the images (not good for mobile users), whereas with media queries most of the browsers will download only the one they need.

so if you use sass for your medium and up devices it could be:
@media #{$medium-up} {
//background css goes here
}

If you want to learn how to create a cover background check out this site and do some research, it's really easy to do: http://css-tricks.com/perfect-full-page-background-image/

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on samjin's post over 5 years

There's an easy fix, all you do is move "foundation/components/grid", to the top of all the other imports. It has to be loaded first.

Change that and the error goes away!

You commented on Guy Van Bael's post over 5 years

The same problem happened to me. I updated and now all of javascript doesn't work.

edit: couldn't find a solution that works consistently so i just create a new project and copied my content over and now everything's working again.

You commented on Christian Matthias's post over 5 years

I also found the grunt documentation very informative in understanding the compiling processor and helped me a lot: http://gruntjs.com/getting-started

You commented on Maria Rodriguez's post over 5 years

If you setup sass like the documentation (http://foundation.zurb.com/docs/sass.html) then you just edit the .scss files in the /project-dir/scss/... If it's one of the default styles/variables then uncomment and edit the appropriate lines in the _settings.scss files, or if you wanna add your own custom css then it's easier to add it to the app.scss

Then when you put it together via grunt it'll all be in the app.css file. App.css is just the output (and if you're not using SCSS then it's what you'd edit).

You commented on Donovan Ng's post over 5 years

I think he wants different styling for different sizes (i may be wrong), because he has menulinks-s menulinks-m and menulinks-l (i'm guessing small/medium/large).

If so, you should just separate them with media queries and have one menulinks class instead of 3.:

$background-color:#999;
$link-color:#fff;
ul li {
  &.menulinks {
  list-style:none;
  font-family: "Century Gothic", Verdana, Arial, Sans-Serif;
  margin:0;
  padding:0;
  //etc (other styles that's for all sizes)
  }
}
@media #{$medium-only} {
  ul li {
    &.menulinks {
    //medium only attributes
    }
  }
}
@media #{$large-up} {
  ul li {
    &.menulinks {
    //large and up attributes
    }
  }
}

You commented on Shreekar Chonkar's post over 5 years

I think the best way is to do it via media queries. If you do it in the html the browser will download all of the images (not good for mobile users), whereas with media queries most of the browsers will download only the one they need.

so if you use sass for your medium and up devices it could be:
@media #{$medium-up} {
//background css goes here
}

If you want to learn how to create a cover background check out this site and do some research, it's really easy to do: http://css-tricks.com/perfect-full-page-background-image/

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content