Menu icon Foundation

Designer | Stavanger, Norway

UX Designer. Web and mobile apps. Proficient in user interface design, html and css.

My Posts





My Comments

Ole Fredrik Lie commented on Ole Fredrik Lie's post almost 2 years

Hi Rizky. Adobe XD haven't implemented support for custom grids yet. As soon as they do, I will update the Foundation XD file. All updates are free.

Ole Fredrik Lie commented on Rafi Benkual's post over 3 years

Case 1: I've also had some challenges with navigation in F6. One specific thing that I've noticed is that submenu-item in a dropdown menu will overflow the screen when the menu is placed to the right of the screen.

http://s12.postimg.org/ld45h47p9/subnav_element_offscreen.png

Case 2: I'm using the dropdown button as a menu. I have specified that the dropdown panel should be displayed under the button. But when the button is aligned right on the screen, the panel is rendered on the left side.

http://s21.postimg.org/5vrcpo6nr/dropdown_button.png

Case 3: It should be possible to allow the title-bar to be visible for all screen sizes. As far as I understand, the current workaround is to use the data-hide-for attribute on the title-bar and specify a breakpoint where it should not display. You could define an insanely large breakpoint and use that. But why not just add the possibility to use a data-show-for="all" or similar? More details on this issue can be found here: https://github.com/olefredrik/FoundationPress/issues/726

Ole Fredrik Lie commented on Ole Fredrik Lie's post over 3 years

Hi @amenity ,

What version of FoundationPress are you using? The latest version is based on Foundation 6. The link you're referring to is pointing to the Foundation 5 docs. If you use the syntax as described in the Foundation 6 docs, it should work as expected.

I just updated the Kitchen Sink template with a working example of the reveal modal. The demo site is updated as well. https://foundationpress.olefredrik.com

Please let me know if this don't work for you.

Ole Fredrik Lie commented on Ole Fredrik Lie's post over 3 years

FYI: Just released a major version of FoundationPress, built on Foundation 6.

The most recent Foundation 5 version is now moved to a separate branch: https://github.com/olefredrik/FoundationPress/tree/foundation-5

All versions and full changelog is available in the release archive:
https://github.com/olefredrik/FoundationPress/releases

F6 demo: https://foundationpress.olefredrik.com

F6 source: https://github.com/olefredrik/FoundationPress

Ole Fredrik Lie commented on Hugh Js's post over 3 years

Interesting discussion. Difficult to give a good answer to what's the best CMS, as it really depends on the customer requirements for customization and quirky functionality etc.

Many colleagues who are experienced in .NET, speaks warmly about Umbraco. I've also heard many words of praise about Craft (PHP). There is a Yeoman generator for Craft + WordPress available here, if you'd like to try it out: https://www.npmjs.com/package/generator-origin-craft

Although many devs really hate it, it would be silly to discuss content management systems without mentioning WordPress (by far the world's most popular CMS, whether you like it or not).

If you decide to go with WordPress, I've created a simple Foundation 5 starter-theme that will get you up and running in minutes => https://foundationpress.olefredrik.com

An updated version based Foundation 6 is just around the corner.

Ole Fredrik Lie commented on Valerie Robinson's post almost 4 years

Hi Valerie.

The easiest and most obvious recommendation is to fork the FoundationPress repository on Github. The fork is your own version of the theme where you are free to make it your own, without affecting the main FoundationPress repository in any way.

Github has a decent description of how this works:
https://help.github.com/articles/fork-a-repo/

Else you could simply clone the FoundationPress repository, remove the .git folder completly and init your own empty git project. If you do so, you will start from scratch, meaning the FoundationPress commit log will not be available for your anymore.

See more details on git init here:
http://git-scm.com/docs/git-init

Good luck :-)

Cheers,
Ole Fredrik

Ole Fredrik Lie commented on kalaivani nair's post about 4 years

The official way to add scripts in WordPress is by using the wp_enqueue_script function. That said, it is not necessarily good for performance to load a handful of scripts in the header and footer. By loading scripts in Gruntfile.js, you get the opportunity to concatinate and uglify (minify) scripts using the 'grunt build' command. This will result in fewer and smaller files, which is beneficial for performance. And performance is one of the most important things you can facilitate in responsive web design.

Some skeptics might say that you lose control of your dependencies by loading scripts without registering every single script using wp_enqueue_script. This may not be a big problem if you use a front-end package manager like bower? Dunno.

There are several possible solutions here. Would love to hear what the WordPress gurus say about the matter.

Cheers,
Ole Fredrik

Ole Fredrik Lie commented on Paul Benbow's post about 4 years

Hi Paul :)

First, it's probably a good idea to use

 bower install scrollmagic --save-dev 

This will add your libary (in this case scrollmagic) to your list of dev dependencies in your bower.json file.

There are several possible answers to your question, depending on what you want to achieve. If you want to concatinate all script into one file, I would simply put a reference to the library js file in Gruntfile.js after line 88.

That would look something like this :

    concat: {
        options: {
          separator: ';',
        },
        dist: {
          src: [

          // Foundation core
          'bower_components/foundation/js/foundation/foundation.js',

          // Pick the componenets you need in your project
          'bower_components/foundation/js/foundation/foundation.abide.js',
          'bower_components/foundation/js/foundation/foundation.accordion.js',
          'bower_components/foundation/js/foundation/foundation.alert.js',
          'bower_components/foundation/js/foundation/foundation.clearing.js',
          'bower_components/foundation/js/foundation/foundation.dropdown.js',
          'bower_components/foundation/js/foundation/foundation.equalizer.js',
          'bower_components/foundation/js/foundation/foundation.interchange.js',
          'bower_components/foundation/js/foundation/foundation.joyride.js',
          'bower_components/foundation/js/foundation/foundation.magellan.js',
          'bower_components/foundation/js/foundation/foundation.offcanvas.js',
          'bower_components/foundation/js/foundation/foundation.orbit.js',
          'bower_components/foundation/js/foundation/foundation.reveal.js',
          'bower_components/foundation/js/foundation/foundation.slider.js',
          'bower_components/foundation/js/foundation/foundation.tab.js',
          'bower_components/foundation/js/foundation/foundation.tooltip.js',
          'bower_components/foundation/js/foundation/foundation.topbar.js',

          // Scrollmagic
          'bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js',

          // Include your own custom scripts (located in the custom folder)
          'js/custom/*.js'

          ],
          // Finally, concatinate all the files above into one single file
          dest: 'js/foundation.js',
        },
      },

Save your Gruntfile.js, and run 'grunt build' in your terminal. Then all the defined build tasks (including concat) will be executed. Voila - your lib is ready to use - without loading any extra files (fewer http requests = better performance).

Good luck!

Cheers,
Ole Fredrik

Ole Fredrik Lie commented on meschenbaum's post about 4 years

Thanks, James! I am grateful for your good feedback :)

Ole Fredrik Lie commented on Ankur Khandelwal's post over 4 years

Hi. I've created a custom widget library for Axure based on the UI components in Foundation. You might like it if you're familiar with designing prototypes in Axure. (Not all non-techies are into sass, html etc).

Check it out:
http://axure.olefredrik.com

Cheers,
Ole Fredrik

Posts Followed









Following

Followers

My Posts

My Comments

You commented on Ole Fredrik Lie's post almost 2 years

Hi Rizky. Adobe XD haven't implemented support for custom grids yet. As soon as they do, I will update the Foundation XD file. All updates are free.

You commented on Rafi Benkual's post over 3 years

Case 1: I've also had some challenges with navigation in F6. One specific thing that I've noticed is that submenu-item in a dropdown menu will overflow the screen when the menu is placed to the right of the screen.

http://s12.postimg.org/ld45h47p9/subnav_element_offscreen.png

Case 2: I'm using the dropdown button as a menu. I have specified that the dropdown panel should be displayed under the button. But when the button is aligned right on the screen, the panel is rendered on the left side.

http://s21.postimg.org/5vrcpo6nr/dropdown_button.png

Case 3: It should be possible to allow the title-bar to be visible for all screen sizes. As far as I understand, the current workaround is to use the data-hide-for attribute on the title-bar and specify a breakpoint where it should not display. You could define an insanely large breakpoint and use that. But why not just add the possibility to use a data-show-for="all" or similar? More details on this issue can be found here: https://github.com/olefredrik/FoundationPress/issues/726

You commented on Ole Fredrik Lie's post over 3 years

Hi @amenity ,

What version of FoundationPress are you using? The latest version is based on Foundation 6. The link you're referring to is pointing to the Foundation 5 docs. If you use the syntax as described in the Foundation 6 docs, it should work as expected.

I just updated the Kitchen Sink template with a working example of the reveal modal. The demo site is updated as well. https://foundationpress.olefredrik.com

Please let me know if this don't work for you.

You commented on Ole Fredrik Lie's post over 3 years

FYI: Just released a major version of FoundationPress, built on Foundation 6.

The most recent Foundation 5 version is now moved to a separate branch: https://github.com/olefredrik/FoundationPress/tree/foundation-5

All versions and full changelog is available in the release archive:
https://github.com/olefredrik/FoundationPress/releases

F6 demo: https://foundationpress.olefredrik.com

F6 source: https://github.com/olefredrik/FoundationPress

You commented on Hugh Js's post over 3 years

Interesting discussion. Difficult to give a good answer to what's the best CMS, as it really depends on the customer requirements for customization and quirky functionality etc.

Many colleagues who are experienced in .NET, speaks warmly about Umbraco. I've also heard many words of praise about Craft (PHP). There is a Yeoman generator for Craft + WordPress available here, if you'd like to try it out: https://www.npmjs.com/package/generator-origin-craft

Although many devs really hate it, it would be silly to discuss content management systems without mentioning WordPress (by far the world's most popular CMS, whether you like it or not).

If you decide to go with WordPress, I've created a simple Foundation 5 starter-theme that will get you up and running in minutes => https://foundationpress.olefredrik.com

An updated version based Foundation 6 is just around the corner.

You commented on Valerie Robinson's post almost 4 years

Hi Valerie.

The easiest and most obvious recommendation is to fork the FoundationPress repository on Github. The fork is your own version of the theme where you are free to make it your own, without affecting the main FoundationPress repository in any way.

Github has a decent description of how this works:
https://help.github.com/articles/fork-a-repo/

Else you could simply clone the FoundationPress repository, remove the .git folder completly and init your own empty git project. If you do so, you will start from scratch, meaning the FoundationPress commit log will not be available for your anymore.

See more details on git init here:
http://git-scm.com/docs/git-init

Good luck :-)

Cheers,
Ole Fredrik

You commented on kalaivani nair's post about 4 years

The official way to add scripts in WordPress is by using the wp_enqueue_script function. That said, it is not necessarily good for performance to load a handful of scripts in the header and footer. By loading scripts in Gruntfile.js, you get the opportunity to concatinate and uglify (minify) scripts using the 'grunt build' command. This will result in fewer and smaller files, which is beneficial for performance. And performance is one of the most important things you can facilitate in responsive web design.

Some skeptics might say that you lose control of your dependencies by loading scripts without registering every single script using wp_enqueue_script. This may not be a big problem if you use a front-end package manager like bower? Dunno.

There are several possible solutions here. Would love to hear what the WordPress gurus say about the matter.

Cheers,
Ole Fredrik

You commented on Paul Benbow's post about 4 years

Hi Paul :)

First, it's probably a good idea to use

 bower install scrollmagic --save-dev 

This will add your libary (in this case scrollmagic) to your list of dev dependencies in your bower.json file.

There are several possible answers to your question, depending on what you want to achieve. If you want to concatinate all script into one file, I would simply put a reference to the library js file in Gruntfile.js after line 88.

That would look something like this :

    concat: {
        options: {
          separator: ';',
        },
        dist: {
          src: [

          // Foundation core
          'bower_components/foundation/js/foundation/foundation.js',

          // Pick the componenets you need in your project
          'bower_components/foundation/js/foundation/foundation.abide.js',
          'bower_components/foundation/js/foundation/foundation.accordion.js',
          'bower_components/foundation/js/foundation/foundation.alert.js',
          'bower_components/foundation/js/foundation/foundation.clearing.js',
          'bower_components/foundation/js/foundation/foundation.dropdown.js',
          'bower_components/foundation/js/foundation/foundation.equalizer.js',
          'bower_components/foundation/js/foundation/foundation.interchange.js',
          'bower_components/foundation/js/foundation/foundation.joyride.js',
          'bower_components/foundation/js/foundation/foundation.magellan.js',
          'bower_components/foundation/js/foundation/foundation.offcanvas.js',
          'bower_components/foundation/js/foundation/foundation.orbit.js',
          'bower_components/foundation/js/foundation/foundation.reveal.js',
          'bower_components/foundation/js/foundation/foundation.slider.js',
          'bower_components/foundation/js/foundation/foundation.tab.js',
          'bower_components/foundation/js/foundation/foundation.tooltip.js',
          'bower_components/foundation/js/foundation/foundation.topbar.js',

          // Scrollmagic
          'bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js',

          // Include your own custom scripts (located in the custom folder)
          'js/custom/*.js'

          ],
          // Finally, concatinate all the files above into one single file
          dest: 'js/foundation.js',
        },
      },

Save your Gruntfile.js, and run 'grunt build' in your terminal. Then all the defined build tasks (including concat) will be executed. Voila - your lib is ready to use - without loading any extra files (fewer http requests = better performance).

Good luck!

Cheers,
Ole Fredrik

You commented on meschenbaum's post about 4 years

Thanks, James! I am grateful for your good feedback :)

You commented on Ankur Khandelwal's post over 4 years

Hi. I've created a custom widget library for Axure based on the UI components in Foundation. You might like it if you're familiar with designing prototypes in Axure. (Not all non-techies are into sass, html etc).

Check it out:
http://axure.olefredrik.com

Cheers,
Ole Fredrik

Posts Followed

Following

Followers