Menu icon Foundation

Developer | Porvoo, Finland

My Posts


My Comments

Esa Rantanen commented on Michelle L's post over 3 years
Esa Rantanen commented on Jules Webb's post over 3 years

Hi Ken,
masonry is very easy to implement!
I just minified masonry.pkgd.js into foundation.js using FoundationPress gulp build system, created a simple loop that outputs the items into the grid and initialized. Added some inline styling.
If you don't use a build system like FoundationPress, you could try loading masonry.js after foundation.js and initialize/configure it with jQuery, see examples: http://masonry.desandro.com/
zip available, message me. Have a nice weekend!

Esa Rantanen commented on Jules Webb's post over 3 years

 Jules, of course you do :)
Masonry works really nice on my demo: http://demo.eccola.fi/masonry-demo/

Esa Rantanen commented on Jules Webb's post over 3 years

 Hello Jules,
the instructions you are referring to are for F5.
With F6 the block-grid syntax has changed:
http://foundation.zurb.com/sites/docs/grid.html

Esa Rantanen commented on Robert's post almost 4 years

Robert, you could check out the Block Grid: http://foundation.zurb.com/sites/docs/grid.html

Esa Rantanen commented on Mike Kilpatrick's post almost 4 years

Mike, that is weird.
Your markup is fine and the components get loaded and initialized properly.
Off-canvas works, but the overlap method doesn't.

Try adding the configuration into the end of app.js

Esa Rantanen commented on Mike Kilpatrick's post almost 4 years

Hello Mike,

at the bottom part of the docs page you refer to, you can find 'Optional Javascript configuration':

$(document).foundation({
  offcanvas : {
    // Sets method in which offcanvas opens.
    // [ move | overlap_single | overlap ]
    open_method: 'move', 
    // Should the menu close when a menu link is clicked?
    // [ true | false ]
    close_on_click : false
  }
});

Just set the open_method to overlap or overlap_single.

Esa Rantanen commented on Mark Smallman's post almost 4 years

Hello Mark,
you could start downloading everything here: http://foundation.zurb.com/sites/download/assets/complete-f6.zip

See index.html

Stylesheets are enqueued in the head and scripts are enqueued in footer. Adjust paths depending on how you install foundation. I suggest creating an assets directory for components going to production, and enqueue from there, what do you think?

Esa Rantanen commented on toolman's post almost 4 years

Like Jarryd points out, things could get messy changing the grid to 16 columns with CSS. You could try downloading a customized F5 from here: http://foundation.zurb.com/develop/download.html
with the column count you prefer.

toolman, have you tried the block-grid? It will handle your case easily without the mess:

<ul class="small-block-grid-2 medium-block-grid-4 large-block-grid-8">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>

http://foundation.zurb.com/docs/components/block_grid.html

Esa Rantanen commented on Mike Young's post about 4 years

Mike, looking at your source it seems you're loading jQuery twice.

Read more:
http://foundation.zurb.com/docs/javascript.html

Posts Followed

  • 2
    Replies
  • F6.2 Orbit on Mobile

    By Michelle L

    F6 Orbitmobile

    When manually advancing an orbit on a mobile device it is skipping a slide with every click of the arrow (the auto advance works as expected). &nbsp;It behaves correctly when in a browser of any screen size. A Codepen Example can be found here. I am usi... (continued)

    Last Reply by Michelle L over 3 years ago



  • 3
    Replies
  • How to show playing cards?

    By Robert

    floatF6

    Imagine you have to show 52 playing cards on all devices. 1. Without zoom On large screens i can show 4 or 5 of them in one row. On smaller Screens i can show 3, on small screens only 2 of them. But how i can solve this? If i use a grid i hav... (continued)

    Last Reply by Esa Rantanen almost 4 years ago








  • 3
    Replies
  • Mobile / Resposive Menu

    By Jim Smith

    Hi guys, I'm trying to find a program that makes responsive menus that allows me to add a Logo alongside the mobile menu three bars. I make my own sites for two small businesses in Dreamweaver. Respectfully Im not a highly skilled coder like many of yo... (continued)

    Last Reply by Jim Smith over 4 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Michelle L's post over 3 years
You commented on Jules Webb's post over 3 years

Hi Ken,
masonry is very easy to implement!
I just minified masonry.pkgd.js into foundation.js using FoundationPress gulp build system, created a simple loop that outputs the items into the grid and initialized. Added some inline styling.
If you don't use a build system like FoundationPress, you could try loading masonry.js after foundation.js and initialize/configure it with jQuery, see examples: http://masonry.desandro.com/
zip available, message me. Have a nice weekend!

You commented on Jules Webb's post over 3 years

 Jules, of course you do :)
Masonry works really nice on my demo: http://demo.eccola.fi/masonry-demo/

You commented on Jules Webb's post over 3 years

 Hello Jules,
the instructions you are referring to are for F5.
With F6 the block-grid syntax has changed:
http://foundation.zurb.com/sites/docs/grid.html

You commented on Robert's post almost 4 years

Robert, you could check out the Block Grid: http://foundation.zurb.com/sites/docs/grid.html

You commented on Mike Kilpatrick's post almost 4 years

Mike, that is weird.
Your markup is fine and the components get loaded and initialized properly.
Off-canvas works, but the overlap method doesn't.

Try adding the configuration into the end of app.js

You commented on Mike Kilpatrick's post almost 4 years

Hello Mike,

at the bottom part of the docs page you refer to, you can find 'Optional Javascript configuration':

$(document).foundation({
  offcanvas : {
    // Sets method in which offcanvas opens.
    // [ move | overlap_single | overlap ]
    open_method: 'move', 
    // Should the menu close when a menu link is clicked?
    // [ true | false ]
    close_on_click : false
  }
});

Just set the open_method to overlap or overlap_single.

You commented on Mark Smallman's post almost 4 years

Hello Mark,
you could start downloading everything here: http://foundation.zurb.com/sites/download/assets/complete-f6.zip

See index.html

Stylesheets are enqueued in the head and scripts are enqueued in footer. Adjust paths depending on how you install foundation. I suggest creating an assets directory for components going to production, and enqueue from there, what do you think?

You commented on toolman's post almost 4 years

Like Jarryd points out, things could get messy changing the grid to 16 columns with CSS. You could try downloading a customized F5 from here: http://foundation.zurb.com/develop/download.html
with the column count you prefer.

toolman, have you tried the block-grid? It will handle your case easily without the mess:

<ul class="small-block-grid-2 medium-block-grid-4 large-block-grid-8">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>

http://foundation.zurb.com/docs/components/block_grid.html

You commented on Mike Young's post about 4 years

Mike, looking at your source it seems you're loading jQuery twice.

Read more:
http://foundation.zurb.com/docs/javascript.html

Posts Followed







Following

  • No Content

Followers

  • No Content