Menu icon Foundation

My Posts

  • NEW
  • Sliders Not working on mobile

    By Will Barker

    slider

    I am getting an error on mobile when trying to use the sliders and the slider isn't draggable.  This is for the non-native version.   Foundation 6.5.3 Foundation Rails.   error in console is: TypeError: touches is undefined ln 133 fo... (continued)


  • NEW
  • Sliders Not working on mobile

    By Will Barker

    slider

    I am getting an error on mobile when trying to use the sliders and the slider isn't draggable.  This is for the non-native version.   Foundation 6.5.3 Foundation Rails.   error in console is: TypeError: touches is undefined ln 133 fo... (continued)


  • 2
    Replies
  • Block Grids For Flex-Grid

    By Will Barker

    Block Grids

    With the new F6 Flex Grid. Can you use block grids? I know they have been merged into the main grid, but they don't seem to be working for me. This works when using the regular f6 grid: div class="row small-up-1 medium-up-2 " Stack nicely in tw... (continued)

    Last Reply by Phoenix H. over 3 years ago



  • 2
    Replies
  • Youtube Videos in a Reveal

    By Will Barker

    jsapiVideo

    I want to use the Youtube JSAPI to add video to a modal & auto play it. I'm nearly there, and yet totaly stumped. The first one works, but clicking a second link to open a new video opens the first one. check out my pen, http://codepen.io/anon/p... (continued)

    Last Reply by jenny over 1 year ago


  • 7
    Replies
  • Getting started, the CLI

    By Will Barker

    gettingstarted

    I tried to use the CLI today. I usually just copy the sass files into my own project and off i go. thought i should do things properly this time. First I tried to use the foundation gem and compass watch. It didn't work. The files compiled, but only ... (continued)

    Last Reply by Will Barker about 5 years ago


  • 1
    Reply
  • Clearing thumbnails maximum number?

    By Will Barker

    clearing

    I have a grid of 30 images, 3 x 10 in a data-clearing ul. when i click on one of the first 6, clearing displays the big image with the first 6 images in a grid below, if i click any other image, clearing just shows that image in the lightbox. how can... (continued)

    Last Reply by Rafi Benkual over 5 years ago




My Comments

Will Barker commented on Will Barker's post almost 4 years

messing about, I found i can get them back by sticking a

@include foundation-everything;

in foundation.scss below the @mixin foundation-everything

Is that to be expected? It seems odd they aren't available by default without mention of this in the docs when the docs still focus on class based grid layouts rather than semantic mixins.

Will Barker commented on Will Barker's post almost 5 years

This was just me being silly really. Here is a working version in case anyone comes along

http://codepen.io/anon/pen/HkoKg?editors=101

Will Barker commented on Stephan's post almost 5 years

Did you ever get anywhere with this Stephan? I like what you are suggesting. Rem's are cool and everything, but very awkward to fit into a workflow.

  • Design software works in pixels
  • Conversion to rem's is a pain
  • if you use rem-calc it's easy, until the designer looks at the site & requests font size changes in rem's!
  • at that point delete the rem-calc and go full rem.
  • now you effectively have two unit systems in your sass. pixels (via rem-calc) and rem's where changes have occurred.

your method makes that a lot less painful.

Will Barker commented on Will Barker's post about 5 years

nope. not even as a joke : )

this is on osx 10.9

Will Barker commented on Will Barker's post about 5 years

I used this to create a folder with all this stuff inside a (fairly empty) WordPress theme folder. I have then been adding my own bits of sass to the app.scss file & settings.

On initialising a git repo for the theme, i notice that the foundation folder is a submodule.

oh no! submodules are the second most scary thing in git, after merging. : )

So i don't think i can make project specific changes to the sass in the submodule and be able to commit them in to my main repo.

I would like to make the submodule not a submodule, and include it in the main repo, would that break the bower update powers?

Whats the standard way to proceed? are the docs a bit lacking? or have i just bungled it up somewhere & now I'm off the path?

W

ps, this is all on OSX 10.9

Will Barker commented on Will Barker's post about 5 years

i'm not.

Will Barker commented on Will Barker's post over 5 years

sorry, bit premature. That expands the content - youtube videos to fit the modal width, and then contract responsively.

Will Barker commented on Will Barker's post over 5 years

Thanks! that sounds awesome. For now, i got a fairly simple work around happening:

in my modal i have:

<div class="video-container">
     $Embed.raw
</div>
video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Will Barker commented on Will Barker's post over 5 years

Hi Rafi

Whilst that didn't work, it got me there.

I think i was a bit freaked out by the black box aspect of the foudation-rails js. Your post made me see the obvious - swap it out with the cdn version from your pen.

So with the CDN js and css, it works. working backwards, it turns out the sass i had was causing issues. i had 5.03 versions of the sass (i like to have the sass included from my assets dir so i can see what they are) and updating to 5.1.1.0 for tooltips & functions fixed the issue.

so a basic mismatch in versions - i had js 5.1.1.0 and sass 5.03 - whoops.

Thanks mate

W

Will Barker commented on James Cocker's post over 5 years

The biggest challenge is getting the JS to work now foundation & jquery 2 have abandoned < ie8

I found fixing up the layout issues fairly simple with a bit of polyfilling and some specific .ie css rules. Fixing the JS just for ie8 wasn't required though, so i just don't load foundation.js for ie8 and get everything to gracefully downgrade. Good enough.

Posts Followed

No Content

Following

    No Content

Followers

My Posts










My Comments

You commented on Will Barker's post almost 4 years

messing about, I found i can get them back by sticking a

@include foundation-everything;

in foundation.scss below the @mixin foundation-everything

Is that to be expected? It seems odd they aren't available by default without mention of this in the docs when the docs still focus on class based grid layouts rather than semantic mixins.

You commented on Will Barker's post almost 5 years

This was just me being silly really. Here is a working version in case anyone comes along

http://codepen.io/anon/pen/HkoKg?editors=101

You commented on Stephan's post almost 5 years

Did you ever get anywhere with this Stephan? I like what you are suggesting. Rem's are cool and everything, but very awkward to fit into a workflow.

  • Design software works in pixels
  • Conversion to rem's is a pain
  • if you use rem-calc it's easy, until the designer looks at the site & requests font size changes in rem's!
  • at that point delete the rem-calc and go full rem.
  • now you effectively have two unit systems in your sass. pixels (via rem-calc) and rem's where changes have occurred.

your method makes that a lot less painful.

You commented on Will Barker's post about 5 years

nope. not even as a joke : )

this is on osx 10.9

You commented on Will Barker's post about 5 years

I used this to create a folder with all this stuff inside a (fairly empty) WordPress theme folder. I have then been adding my own bits of sass to the app.scss file & settings.

On initialising a git repo for the theme, i notice that the foundation folder is a submodule.

oh no! submodules are the second most scary thing in git, after merging. : )

So i don't think i can make project specific changes to the sass in the submodule and be able to commit them in to my main repo.

I would like to make the submodule not a submodule, and include it in the main repo, would that break the bower update powers?

Whats the standard way to proceed? are the docs a bit lacking? or have i just bungled it up somewhere & now I'm off the path?

W

ps, this is all on OSX 10.9

You commented on Will Barker's post about 5 years

i'm not.

You commented on Will Barker's post over 5 years

sorry, bit premature. That expands the content - youtube videos to fit the modal width, and then contract responsively.

You commented on Will Barker's post over 5 years

Thanks! that sounds awesome. For now, i got a fairly simple work around happening:

in my modal i have:

<div class="video-container">
     $Embed.raw
</div>
video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

You commented on Will Barker's post over 5 years

Hi Rafi

Whilst that didn't work, it got me there.

I think i was a bit freaked out by the black box aspect of the foudation-rails js. Your post made me see the obvious - swap it out with the cdn version from your pen.

So with the CDN js and css, it works. working backwards, it turns out the sass i had was causing issues. i had 5.03 versions of the sass (i like to have the sass included from my assets dir so i can see what they are) and updating to 5.1.1.0 for tooltips & functions fixed the issue.

so a basic mismatch in versions - i had js 5.1.1.0 and sass 5.03 - whoops.

Thanks mate

W

You commented on James Cocker's post over 5 years

The biggest challenge is getting the JS to work now foundation & jquery 2 have abandoned < ie8

I found fixing up the layout issues fairly simple with a bit of polyfilling and some specific .ie css rules. Fixing the JS just for ie8 wasn't required though, so i just don't load foundation.js for ie8 and get everything to gracefully downgrade. Good enough.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content