Menu icon Foundation

Developer | Bangkok

Making things look nice since 2004.

My Posts

  • NEW
  • Reveal modal width px

    By Karl Ward

    reveal

    Hi. I'm creating a wrapper for the Foundation REVEAL plugin, but one thing eludes me: It is not possible to effectively work with PIXEL-based widths without flaws. Often, a modal window should be quite narrow, also on ultra-wide screens, to make... (continued)





  • 9
    Replies
  • Forum: 500 Internal server error

    By Karl Ward

    forumerror

    Am I the only one getting server error when navigating to myforum? http://foundation.zurb.com/forum/myforum Seems to be a few other random pages also ... I would just like to add that the "myforum" page always seemed to be taking a long time to proces... (continued)

    Last Reply by Rafi Benkual over 3 years ago



  • 1
    Reply
  • Magellan 5.0.3

    By Karl Ward

    Magellan

    After upgrading to Foundation 5.0.3, I noticed my content starting jumping vertically on the screen on scroll. I noticed it was changes to Magellan adding empty DIV elements with height. I assume this is used to equalize differences between the height of ... (continued)

    Last Reply by Rafi Benkual almost 4 years ago



  • 1
    Reply
  • js/vendor/* in foundation vanilla

    By Karl Ward

    jsvendorcss

    When downloading the vanilla version of foundation, there is a folder /js/ with foundation.min.js, jquery.js and modernizr.js ... All 3 need to be included in the html naturally. However, there is a folder /js/vendor/ with a few files fastclick.js, autoco... (continued)

    Last Reply by Karl Ward almost 4 years ago


My Comments

Karl Ward commented on Neil Gardose's post about 3 years

I had this problem, which was solved by updating sass:
npm update
sudo gem update sass

Karl Ward commented on Sven's post about 3 years

Foundation doesn't have much effect on how fast/slow your page loads, because essentially it's just a few files. There are many factors for load time, the most important to check:

  1. Are you using some backend/php? If so, check response time from your server.

  2. Even if you are not using any backend to process output, check response time of a single file from your server (for example a JS or CSS file). This is crucial, as some servers are simply slow, and will take time to respond for every call.

  3. If the above is eliminated, you should: A) Make sure your server is using GZIP compression, B) Minify and concatenate js and css files.

Karl Ward commented on Kevin RAy's post about 3 years

If you need to stack your videos vertically, then why are you using the block-grid in the first place? The whole point of the block grid is to stack elements horizontally. As you are explaining it, you want them to stack vertical on ALL screen sizes not just small ...

Yes, I have embedded responsive Youtube and vimeo videos. It is done with "intrinsic rato" and it can easily be combined within a block grid or without. http://mjau-mjau.com/concepts/vertical/video/

I have done lots of research on block grid thank you very much. I even created a block-grid plugin here http://foundation.zurb.com/forum/posts/15137-plugin-block-grid-target-width, and I have many integrations of the block grid here http://mjau-mjau.com/concepts/grid/. No need to get upset just because your logic is off target.

Karl Ward commented on Kevin RAy's post about 3 years

What's the point of using block-grid if you are going un-float the block elements? Then it is not a grid anymore and it will just stack vertically.

Karl Ward commented on Michael Forcer's post over 3 years

If you open Foundation's custom.modernizr.js, you will find a comment at the top, something like this:

 /* Modernizr 2.6.2 (Custom Build) | MIT & BSD
 * Build: http://modernizr.com/download/#-inlinesvg-svg-svgclippaths-touch-shiv-mq-cssclasses-teststyles-prefixes-ie8compat-load
 */

Just copy the URL and you will get the Foundation Modernizr starting point. I am not sure you should remove more features than this default though ... Don't you think Foundation would remove them if they were sure they were not needed? You are probably playing a guessing game if you want to slim it more than this ...

Karl Ward commented on Jamie Brightmore's post over 3 years

The columns are actually stacking correctly, but you need to set your images to 100% width so they scale the entire width of the column ...

Karl Ward commented on Les Mizzell's post over 3 years

looks like list styles are recursive, and no-bullet is likely defined after circle thus superseding it ... Perhaps just style your own lists? It is pretty simple:

ul.myclass { list-style-type: circle; }

Karl Ward commented on chris's post over 3 years

You can't do everything with Foundation settings ... Just set it in your own sass/css file:

body {
  @include linear-gradient(#111111, #333333);
}

I would probably recommend applying the gradient on an inner div element instead of the body though, just to minimize heavy styling on the body tag.

Karl Ward commented on chris's post over 3 years

For gradients, best is to employ tools like Bourbon or Compass so your code would be as simple as this:

@include linear-gradient(#111111, #333333);

For pure CSS, you might want to use a generator to create styles with vendor prefixes:
http://www.colorzilla.com/gradient-editor/

Karl Ward commented on Mihai Stroe's post over 3 years

So why not change to a 10-column grid then? ... or do you also need some pages with 6 columns? The grid is mainly a utility help create a responsive layout of a website, and it is a bit unusual to use that amount of columns for this main purpose. If you need an additional grid to separate content over multiple columns, you should probably consider the aid of the block grid:
http://foundation.zurb.com/docs/components/block_grid.html

The block grid can be used within a normal grid to create extended inner content column layouts based on a different logic.

Posts Followed

No Content

Following

    No Content

Followers

My Posts






My Comments

You commented on Neil Gardose's post about 3 years

I had this problem, which was solved by updating sass:
npm update
sudo gem update sass

You commented on Sven's post about 3 years

Foundation doesn't have much effect on how fast/slow your page loads, because essentially it's just a few files. There are many factors for load time, the most important to check:

  1. Are you using some backend/php? If so, check response time from your server.

  2. Even if you are not using any backend to process output, check response time of a single file from your server (for example a JS or CSS file). This is crucial, as some servers are simply slow, and will take time to respond for every call.

  3. If the above is eliminated, you should: A) Make sure your server is using GZIP compression, B) Minify and concatenate js and css files.

You commented on Kevin RAy's post about 3 years

If you need to stack your videos vertically, then why are you using the block-grid in the first place? The whole point of the block grid is to stack elements horizontally. As you are explaining it, you want them to stack vertical on ALL screen sizes not just small ...

Yes, I have embedded responsive Youtube and vimeo videos. It is done with "intrinsic rato" and it can easily be combined within a block grid or without. http://mjau-mjau.com/concepts/vertical/video/

I have done lots of research on block grid thank you very much. I even created a block-grid plugin here http://foundation.zurb.com/forum/posts/15137-plugin-block-grid-target-width, and I have many integrations of the block grid here http://mjau-mjau.com/concepts/grid/. No need to get upset just because your logic is off target.

You commented on Kevin RAy's post about 3 years

What's the point of using block-grid if you are going un-float the block elements? Then it is not a grid anymore and it will just stack vertically.

You commented on Michael Forcer's post over 3 years

If you open Foundation's custom.modernizr.js, you will find a comment at the top, something like this:

 /* Modernizr 2.6.2 (Custom Build) | MIT & BSD
 * Build: http://modernizr.com/download/#-inlinesvg-svg-svgclippaths-touch-shiv-mq-cssclasses-teststyles-prefixes-ie8compat-load
 */

Just copy the URL and you will get the Foundation Modernizr starting point. I am not sure you should remove more features than this default though ... Don't you think Foundation would remove them if they were sure they were not needed? You are probably playing a guessing game if you want to slim it more than this ...

You commented on Jamie Brightmore's post over 3 years

The columns are actually stacking correctly, but you need to set your images to 100% width so they scale the entire width of the column ...

You commented on Les Mizzell's post over 3 years

looks like list styles are recursive, and no-bullet is likely defined after circle thus superseding it ... Perhaps just style your own lists? It is pretty simple:

ul.myclass { list-style-type: circle; }

You commented on chris's post over 3 years

You can't do everything with Foundation settings ... Just set it in your own sass/css file:

body {
  @include linear-gradient(#111111, #333333);
}

I would probably recommend applying the gradient on an inner div element instead of the body though, just to minimize heavy styling on the body tag.

You commented on chris's post over 3 years

For gradients, best is to employ tools like Bourbon or Compass so your code would be as simple as this:

@include linear-gradient(#111111, #333333);

For pure CSS, you might want to use a generator to create styles with vendor prefixes:
http://www.colorzilla.com/gradient-editor/

You commented on Mihai Stroe's post over 3 years

So why not change to a 10-column grid then? ... or do you also need some pages with 6 columns? The grid is mainly a utility help create a responsive layout of a website, and it is a bit unusual to use that amount of columns for this main purpose. If you need an additional grid to separate content over multiple columns, you should probably consider the aid of the block grid:
http://foundation.zurb.com/docs/components/block_grid.html

The block grid can be used within a normal grid to create extended inner content column layouts based on a different logic.

Posts Followed

No Content

Following

  • No Content

Followers