Menu icon Foundation

My Posts

  • NEW
  • XY-Grid Cells/Grids

    By Knight Yoshi

    xy-grid

    Can a cell be a grid?   For instance I have a .grid-y.grid-frame container that has three cells, a header body and footer. Inside the body is another .grid-y.grid-frame with a cell. I was wondering if the body cell can also be a .grid-y.grid-frame ... (continued)


  • NEW
  • Foundation CodeMirror Module

    By Knight Yoshi

    javascriptmodules

    I have this nice little module to initialize the CodeMirror editor, but I have a bit of an issue.   1) I haven't found anything for using an array in data-options. I end up having to manually look for the config property for it and splitting it &n... (continued)


  • NEW
  • Centering Top Bar

    By Knight Yoshi

    Foundationtop-bar

    I'm just wondering if there's a better way of centering the top bar links while leaving the bar itself the full width of the container/body element; I'm using flexbox gobally. What I'm thinking of using is <nav class="top-bar" data-topbar="" role="na... (continued)





  • 1
    Reply
  • Foundation Doc Issues

    By Knight Yoshi

    Foundation

    I just thought I'd note that some pages like http://foundation.zurb.com/sites/download/ do not have working JavaScript components. The console says that jQuery is not defined. - Which goes back to my statement about the JS components conversation on Tr... (continued)

    Last Reply by Erik M over 3 years ago


  • 7
    Replies
  • Menu Dropdown

    By Knight Yoshi

    On the menu and dropdown menu pages it doesn't mention anything about any of the classes on the list items the .has-submenu, .is-dropdown-submenu-parent, .is-down-arrow classes. In fact if I copy the markup example from dropdown menu page it doesn't gi... (continued)

    Last Reply by Walid Moussa over 3 years ago




My Comments

Knight Yoshi commented on Brent Ransom's post almost 3 years

This isn't a Foundation issue, this is just your issue.
 
That said, I think your server is caching generated files. The first load took about 18 seconds and then there was a 5-second wait for an AJAX request that was immediately fired when the page loaded. Refreshing the pages after that they load almost immediately.
 
This is something you will have to figure out on your own, it's an issue on the back-end.

Knight Yoshi commented on Nick Chambers's post almost 3 years

Would you mind creating a working CodePen that shows what you're talking about? :)

Knight Yoshi commented on Erik Fecher's post almost 3 years

What module are you trying to use when this occurs? Can you create a working example of what you're talking about on CodePen?

Knight Yoshi commented on Omar AlQuaseer's post almost 3 years

That's not really possible with how the off-canvas menu wrapper is styled, it clips the overflow. What you might be interested in doing [maybe?] is using the drill down menu instead. That's what I use, although it locks you into the sub-menu and you have to manually go back.
 
What you might try doing is using the Toggle module to create your own container with a menu in it instead of off-canvas to achieve what you're looking for.

Knight Yoshi commented on Anina's post almost 3 years

Design it for mobile first using the small-* and visibility classes then adjust as you scale up. You mostly use the large-* classes and where you do use the small-, medium-, and large-* classes you have them all set to 12. If that's the case then all you need is small-12.
In other words, you didn't really design it for mobile.

Knight Yoshi commented on Jay Todtenbier's post almost 3 years

@Jay So you probably do not want to upgrade every time there's a new Foundation version released with shiny new stuff. Yes it's appealing, yes it can make things easier, but you have to evaluate your development life cycle. You need to look at if you are to a point where you need to retire the development cycle and build new. Depending on your project your life cycle will vary. You should structure a new development life cycle around the current versions of your resources. Which can be a painstaking process, as your modules may need complete rewrites.
 
When starting a new cycle, these things may be unavoidable between upgrades. Like between Foundation 5 and 6. Major version changes usually do require some changes between them, that's whey they're major change versions. You need to factor all these things in before proceeding to upgrade. In some cases, if it's early on in the development cycle you might be able to get away with upgrading to the next version of a resource.
 
I'm not interested in making videos or tutorials. It's not terribly difficult to make a module for Foundation 6.
Here's a basic example in ES6
'use strict'

!function ($) {
class MyModule {
constructor (element, options) {
this.$element = element; // using $ to denote a jQ object
this.options = $.extend({}, MyModule.defaults, this.$element.data(), options); // merge options into a single object

     this._init(); // initialize the module;
      Foundation.registerPlugin(this, 'MyModule'); // register this on the Foundation object.
  }
  // prefix methods with an underscore to denote it as private (it's not really 'private')
  _init() {
     // do stuff in init
     this._events(); // call events for your element(s)
  }

  _events() {
     this.$element.on(event, callback);
     // whatever other events your module uses
  }
  // anything else your module needs or public methods like an open or close method

}

Foundation.plugin(MyModule, 'MyModule');
}(jQuery);
 
Then in the HTML you would have something like
<!-- there's a dash between my and module because it's Pascal Case if it was Mymodule then data-mymodule -->
<div class="something" data-my-module></div>

Knight Yoshi commented on Emma Nymton's post almost 3 years

For building blocks, I believe you just copy the Sass. I don't really use them, so I haven't looked at building blocks much. Hopefully though I solved your issue of missing Sass files. :)

Knight Yoshi commented on Emma Nymton's post almost 3 years

So the Essential and Complete download output the already compiled files.
You will need to download it from their Github, or through one of the package managers listed on their installation page, http://foundation.zurb.com/sites/docs/installation.html
 

Knight Yoshi commented on Emma Nymton's post almost 3 years

The settings are in sass/settings/settings.scss
https://github.com/zurb/foundation-sites/tree/develop/scss/settings

Knight Yoshi commented on Jay Todtenbier's post almost 3 years

@Jay Foundation 6 is super easy to build upon, more so if you use build processes like Sass, Gulp, and Babel.
I've re-written my applications in ES2015 (ES6) which is easier JavaScript and used Babel to transpile it to ES5. To Once the module registers itself onto the Foundation object invoking it is as easy as adding data-module-name to the HTML element you want to invoke it on.
I've written some simple wrappers for ZeroClipboard, CodeMirror, and Screenfull using Foundation 6 module structure. With Foundation's self initialization, it makes keeping code very clean and with ES6 (transpiled) it's also easy to manage.

Posts Followed











Following

    No Content

Followers

My Posts









My Comments

You commented on Brent Ransom's post almost 3 years

This isn't a Foundation issue, this is just your issue.
 
That said, I think your server is caching generated files. The first load took about 18 seconds and then there was a 5-second wait for an AJAX request that was immediately fired when the page loaded. Refreshing the pages after that they load almost immediately.
 
This is something you will have to figure out on your own, it's an issue on the back-end.

You commented on Nick Chambers's post almost 3 years

Would you mind creating a working CodePen that shows what you're talking about? :)

You commented on Erik Fecher's post almost 3 years

What module are you trying to use when this occurs? Can you create a working example of what you're talking about on CodePen?

You commented on Omar AlQuaseer's post almost 3 years

That's not really possible with how the off-canvas menu wrapper is styled, it clips the overflow. What you might be interested in doing [maybe?] is using the drill down menu instead. That's what I use, although it locks you into the sub-menu and you have to manually go back.
 
What you might try doing is using the Toggle module to create your own container with a menu in it instead of off-canvas to achieve what you're looking for.

You commented on Anina's post almost 3 years

Design it for mobile first using the small-* and visibility classes then adjust as you scale up. You mostly use the large-* classes and where you do use the small-, medium-, and large-* classes you have them all set to 12. If that's the case then all you need is small-12.
In other words, you didn't really design it for mobile.

You commented on Jay Todtenbier's post almost 3 years

@Jay So you probably do not want to upgrade every time there's a new Foundation version released with shiny new stuff. Yes it's appealing, yes it can make things easier, but you have to evaluate your development life cycle. You need to look at if you are to a point where you need to retire the development cycle and build new. Depending on your project your life cycle will vary. You should structure a new development life cycle around the current versions of your resources. Which can be a painstaking process, as your modules may need complete rewrites.
 
When starting a new cycle, these things may be unavoidable between upgrades. Like between Foundation 5 and 6. Major version changes usually do require some changes between them, that's whey they're major change versions. You need to factor all these things in before proceeding to upgrade. In some cases, if it's early on in the development cycle you might be able to get away with upgrading to the next version of a resource.
 
I'm not interested in making videos or tutorials. It's not terribly difficult to make a module for Foundation 6.
Here's a basic example in ES6
'use strict'

!function ($) {
class MyModule {
constructor (element, options) {
this.$element = element; // using $ to denote a jQ object
this.options = $.extend({}, MyModule.defaults, this.$element.data(), options); // merge options into a single object

     this._init(); // initialize the module;
      Foundation.registerPlugin(this, 'MyModule'); // register this on the Foundation object.
  }
  // prefix methods with an underscore to denote it as private (it's not really 'private')
  _init() {
     // do stuff in init
     this._events(); // call events for your element(s)
  }

  _events() {
     this.$element.on(event, callback);
     // whatever other events your module uses
  }
  // anything else your module needs or public methods like an open or close method

}

Foundation.plugin(MyModule, 'MyModule');
}(jQuery);
 
Then in the HTML you would have something like
<!-- there's a dash between my and module because it's Pascal Case if it was Mymodule then data-mymodule -->
<div class="something" data-my-module></div>

You commented on Emma Nymton's post almost 3 years

For building blocks, I believe you just copy the Sass. I don't really use them, so I haven't looked at building blocks much. Hopefully though I solved your issue of missing Sass files. :)

You commented on Emma Nymton's post almost 3 years

So the Essential and Complete download output the already compiled files.
You will need to download it from their Github, or through one of the package managers listed on their installation page, http://foundation.zurb.com/sites/docs/installation.html
 

You commented on Emma Nymton's post almost 3 years

The settings are in sass/settings/settings.scss
https://github.com/zurb/foundation-sites/tree/develop/scss/settings

You commented on Jay Todtenbier's post almost 3 years

@Jay Foundation 6 is super easy to build upon, more so if you use build processes like Sass, Gulp, and Babel.
I've re-written my applications in ES2015 (ES6) which is easier JavaScript and used Babel to transpile it to ES5. To Once the module registers itself onto the Foundation object invoking it is as easy as adding data-module-name to the HTML element you want to invoke it on.
I've written some simple wrappers for ZeroClipboard, CodeMirror, and Screenfull using Foundation 6 module structure. With Foundation's self initialization, it makes keeping code very clean and with ES6 (transpiled) it's also easy to manage.

Posts Followed

Following

  • No Content

Followers

  • No Content