Menu icon Foundation

Designer | Mesa, AZ

I'm a freelancer (hardware)Hacker and Web Designer. I graduated NAU with a B.S. in Applied Sociology and have been coding since November 2013. My passion is designing user experiences for web sites, emails and web apps to create engaging content. On my spare time I work with local startups, hacking wearable hardware (arduino), developing themes/snippets for foundation and most recently developing rapid prototyping tools. aka I have no life and I don't get paid enough lol Currently looking for a full-time position as an entry-level front-end developer / web designer or a paid internship.

My Posts


  • NEW
  • Migrating F6 away from jQuery

    By Hans McMurdy

    refactor

    Just wondering but has anyone taken the time to try and migrate F6 away from jquery?Say using the js code from w3schools as a baseline and abstracting it through classes and helper functions?I'm pretty familiar with the scss but the javscript architecture... (continued)



  • NEW
  • StyleGuide Automation?

    By Hans McMurdy

    styleguidestyle-sherpa

    I just started using style-sherpa with a website http://stylifyme.com/ and then I manually fill out the md files but I was wondering if there was a way to automat this?Figured I'd ask the community before making a feature request or anything ser... (continued)


  • 2
    Replies
  • MotionUI - Text Animation Plugin?

    By Hans McMurdy

    motionui

    Mind if I bounce some ideas off all you lovely people here about MotionUI and possible plugins? My main question is: what is the best why to grab a paragraph of text (by class or id), split that text by word and each letter, wrap in span tag with clas... (continued)

    Last Reply by Hans McMurdy over 3 years ago


  • 2
    Replies
  • Interchange with GULP?

    By Hans McMurdy

    interchangegulp

    Does anyone have experience automating responsive images to use with interchange? Are there any more efficient way to write the gulp task below ? Or has anyone used image optimization techniques like base64, sprite, merge svg, inline svg? I'm curio... (continued)

    Last Reply by Hans McMurdy almost 4 years ago



  • 1
    Reply
  • Wordpress

    By Hans McMurdy

    wordpress

    So I have a potential contract for building a wordpress site and I want to do redesign using foundation 5 and I had a couple questions. Before I ask my first question, I want to point out that I currently only have experience working with static html p... (continued)

    Last Reply by David Sutoyo almost 5 years ago


  • 4
    Replies
  • Foundation-cli

    By Hans McMurdy

    clitemplates

    I've looking at the foundation-cli repro and was wondering if Zurb has any interest in adding templates to their cli when they combine it for web, email and apps? The reason I ask is because I've tested out ionic (not promoting it) and their cli is pre... (continued)

    Last Reply by Hans McMurdy almost 4 years ago



My Comments

Hans McMurdy commented on James Donnelly's post 3 months

you need to modify the uncss task

Hans McMurdy commented on James Donnelly's post 3 months

you need to modify the uncss task

Hans McMurdy commented on Fred Rivett's post about 2 years

 Hi Fred,I think in this ideal world, you are confusing the difference between a task runner (gulp, grunt, etc) and a module bundler like webpack which is understandable because its the hip new thing. The primary reason webpack exists is a separation of concerns. People were primarily using task runners to combine css and js so webpack was initially developed to specialize in that. Put simply webpack isn't built to do this kind of stuff and would require multiple custom loaders to made. Technically speaking, if you or other people really wanted to be super hipsters you could possible hack together an html template loader that uses inky to render the template tags and inline the css. But even then you'd still need to strip media queries and add them in a style tag in the head. That whole process is not what webpack is built for and frankly the readability of the code would aweful compared to the stream/pipe logic of gulp. I hope that answers your questions fully and if you ever go ahead and make some loaders feel free to post about it.

Hans McMurdy commented on Jacob Graf's post over 3 years

There are a couple ways.The first and probably easiest would be something like this:
 
---
menu:
-
title: Home
url: http://www.site.com/
class: active
-
title: Work
url: http://www.site.com/
class: item
-
title: Culture
url: http://www.site.com/
class: item2
-
title: Labs
url: http://www.site.com/
class: item3
-
title: Thoughts
url: http://www.site.com/
class: item4
-
title: Contact
url: http://www.site.com/

class: item5

<div class="top-bar dark" id="example-menu">
<div class="top-bar-left">
<ul class="menu">
{{>logo}}
</ul>
</div>
<div class="top-bar-right">
<ul class="menu ">
{{#each menu}}
<li class="menu-item {{class}}"><a href="/{{url}}">{{ title }}</a></li>
{{/each}}
</ul>
</div>
</div>

<script>
// Add this to your app.js file
(function ($) {
"use strict";

function foundation() {
$(document).foundation();
}
function menu_animation() {
var $button = $('.menu-icon');
var $panel = $('.menu-item');

$button<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    MotionUI<span class="token punctuation">.</span><span class="token function">animateIn</span><span class="token punctuation">(</span><span class="token string">'.menu .menu-item.active'</span><span class="token punctuation">,</span> <span class="token string">'slow hinge-in-from-top scale-in-down'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">// change the effect to attention to home and contact pages</span>
    MotionUI<span class="token punctuation">.</span><span class="token function">animateIn</span><span class="token punctuation">(</span><span class="token string">'.menu .menu-item.item'</span><span class="token punctuation">,</span> <span class="token string">'slow slide-in-left'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    MotionUI<span class="token punctuation">.</span><span class="token function">animateIn</span><span class="token punctuation">(</span><span class="token string">'.menu .menu-item.item2'</span><span class="token punctuation">,</span> <span class="token string">'slow hinge-in-from-left'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    MotionUI<span class="token punctuation">.</span><span class="token function">animateIn</span><span class="token punctuation">(</span><span class="token string">'.menu .menu-item.item3'</span><span class="token punctuation">,</span> <span class="token string">'slow slide-in-left'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    MotionUI<span class="token punctuation">.</span><span class="token function">animateIn</span><span class="token punctuation">(</span><span class="token string">'.menu .menu-item.item4'</span><span class="token punctuation">,</span> <span class="token string">'slow hinge-in-from-left'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    MotionUI<span class="token punctuation">.</span><span class="token function">animateIn</span><span class="token punctuation">(</span><span class="token string">'.menu .menu-item.item5'</span><span class="token punctuation">,</span> <span class="token string">'slow hinge-in-from-bottom scale-in-down'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

}

function init() {
foundation(),
menu_animation();
}

init();

})(jQuery);
</script>

 
Or you could try something along these lines if your goal is to allow the user to change the animation:(Note: this method may buggy or require further javascript...)
 
<div class="title-bar" data-responsive-toggle="mainMenu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="animating"></button>
<div class="title-bar-title">Menu</div>
</div>

{% for page in pages %}
{% if page.hasDescendants() %}
<li>
<a href="#">{{ page.title }}</a>
<ul class="menu vertical">
{% set children = craft.entries.section('pages').descendantOf(page.id) %}
{% for child in children %}
<li {{ activeClass(child.slug, 2) }} id="animating" data-toggler data-animate="{{% animateClass %}}">
<a href="{{ child.url }}">
{% set icon = child.sharedIcon %}
{% if icon %}{{ icon.icon }}{% else %}{{ child.title }}{% endif %}
</a>
</li>
{% endfor %}
</ul>
 

Hans McMurdy commented on Emily Mentzer's post over 3 years

For email, you may want to set the height="30" rather then style="height:30px;".

Hans McMurdy commented on fivedoor's post over 3 years

I think this is an issue with using Gulp 4. I ran into the same issue as well as a few others such as not being able to use multiple instance the gulp4 / babel.gulpfile.js with the email template.Solutions like what shaungrady recommend work but frankly using babel with gulp seems to create more issues then it is worth at this time.I would highly recommend using bower install --save-dev foundation-emails and base your gulpfile off the one there. 
If you are still having issues let me know.

Hans McMurdy commented on Marcus Moore's post over 3 years

I agree. One thing Geoff mentioned in the video below is generating color pallets ( ~ 30min) .
https://www.thenewdynamic.org/event/2016/01/13/zurb-foundtion-and-modern-web-tech/

Personally, I've looking into making the styleguide similar to codyhouse's but with a gulp tasks to automate resizing of your branding logos for everything from favicons.
https://codyhouse.co/demo/style-guide-template/index.html

Hans McMurdy commented on Steven Thate's post over 3 years

First off, that's awesome.

As for your questions:
For sliding down do you mean accomplishing something like this (http://g.recordit.co/7LYLRKxwxx.gif)?
Just add z-index: -1 to dropdown-menu.scss line 35.

As for your second question, yes there is. Not sure I fully understand what you are asking but try out transform origin maybe.

Hans McMurdy commented on Hans McMurdy's post over 3 years

@Rafi Benkual sorry for the delay.

Textilate works but it becomes bloated and creates issues with when you are working with click events like modals. You end up with duplicate D.O.M. nodes that you have to debounce / delete or otherwise hide...

For cherio and Inky, maybe... Not sure how to write it but maybe something like this
Javascript
var input =
'
<animate-word data-animate="%">
// fuzy logic to grab each character
</animate-word>
';
var expected = `
// Grab the text inside any html tag
htmlTag = /^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/
// Split each character and store in an array
.split.this = []
// loop through the array and wrap with span
for each in [ ] {
'<span class="letter{i}" data-animate="{$this.animation}">' + $this.letter + ' </span>'
}
` ;

The end result would be something more simple like this. Also because the document is preprocessed, rendering duplicate nodes on click events wouldn't be be an issue for designers to worry about.

<animate-word data-animate="fade-in fade-out">
this
</animate-word>

<animate-paragraph data-animate="fade-in fade-out">
this this this this
</animate-paragraph>

Document Rendered
```HTML
t
h
i
s

t
h
i
s

```

Hans McMurdy commented on Scott Koons's post almost 4 years

Personally, I'm not very proud about the end results here but...

Selfusnow.com is built on foundation-6 (It was built a week or so before the public release).
Onearizona.org is a bloated and buggy p.o.s. (not a point of sale) but it does uses foundation-6 flex-grid for the section above organizations.

Posts Followed


  • 1
    Reply
  • Animate Mobile Navigation

    By Jacob Graf

    top-baranimation

    I am trying to get used to the new responsive nav setup in Foundation for Sites 6 but getting frustrated. I finally got everything working but how in the world do I get it to animate (slide up/down) when toggled? I would assume I could use Motion UI for t... (continued)

    Last Reply by Hans McMurdy over 3 years ago


  • 1
    Reply
  • Image Resizing Issues

    By Emily Mentzer

    question

    We are having an issue of our small images getting larger than it's actual size when the screen gets small. Any idea why this would be? Even when we specifically call out the size of the image in the code it happens. &nbsp; Here's the code:&nbsp; &lt;r... (continued)

    Last Reply by Hans McMurdy over 3 years ago









Following

Followers

My Posts










My Comments

You commented on James Donnelly's post 3 months

you need to modify the uncss task

You commented on James Donnelly's post 3 months

you need to modify the uncss task

You commented on Fred Rivett's post about 2 years

 Hi Fred,I think in this ideal world, you are confusing the difference between a task runner (gulp, grunt, etc) and a module bundler like webpack which is understandable because its the hip new thing. The primary reason webpack exists is a separation of concerns. People were primarily using task runners to combine css and js so webpack was initially developed to specialize in that. Put simply webpack isn't built to do this kind of stuff and would require multiple custom loaders to made. Technically speaking, if you or other people really wanted to be super hipsters you could possible hack together an html template loader that uses inky to render the template tags and inline the css. But even then you'd still need to strip media queries and add them in a style tag in the head. That whole process is not what webpack is built for and frankly the readability of the code would aweful compared to the stream/pipe logic of gulp. I hope that answers your questions fully and if you ever go ahead and make some loaders feel free to post about it.

You commented on Jacob Graf's post over 3 years

There are a couple ways.The first and probably easiest would be something like this:
 
---
menu:
-
title: Home
url: http://www.site.com/
class: active
-
title: Work
url: http://www.site.com/
class: item
-
title: Culture
url: http://www.site.com/
class: item2
-
title: Labs
url: http://www.site.com/
class: item3
-
title: Thoughts
url: http://www.site.com/
class: item4
-
title: Contact
url: http://www.site.com/

class: item5

<div class="top-bar dark" id="example-menu">
<div class="top-bar-left">
<ul class="menu">
{{>logo}}
</ul>
</div>
<div class="top-bar-right">
<ul class="menu ">
{{#each menu}}
<li class="menu-item {{class}}"><a href="/{{url}}">{{ title }}</a></li>
{{/each}}
</ul>
</div>
</div>

<script>
// Add this to your app.js file
(function ($) {
"use strict";

function foundation() {
$(document).foundation();
}
function menu_animation() {
var $button = $('.menu-icon');
var $panel = $('.menu-item');

$button<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    MotionUI<span class="token punctuation">.</span><span class="token function">animateIn</span><span class="token punctuation">(</span><span class="token string">'.menu .menu-item.active'</span><span class="token punctuation">,</span> <span class="token string">'slow hinge-in-from-top scale-in-down'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">// change the effect to attention to home and contact pages</span>
    MotionUI<span class="token punctuation">.</span><span class="token function">animateIn</span><span class="token punctuation">(</span><span class="token string">'.menu .menu-item.item'</span><span class="token punctuation">,</span> <span class="token string">'slow slide-in-left'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    MotionUI<span class="token punctuation">.</span><span class="token function">animateIn</span><span class="token punctuation">(</span><span class="token string">'.menu .menu-item.item2'</span><span class="token punctuation">,</span> <span class="token string">'slow hinge-in-from-left'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    MotionUI<span class="token punctuation">.</span><span class="token function">animateIn</span><span class="token punctuation">(</span><span class="token string">'.menu .menu-item.item3'</span><span class="token punctuation">,</span> <span class="token string">'slow slide-in-left'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    MotionUI<span class="token punctuation">.</span><span class="token function">animateIn</span><span class="token punctuation">(</span><span class="token string">'.menu .menu-item.item4'</span><span class="token punctuation">,</span> <span class="token string">'slow hinge-in-from-left'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    MotionUI<span class="token punctuation">.</span><span class="token function">animateIn</span><span class="token punctuation">(</span><span class="token string">'.menu .menu-item.item5'</span><span class="token punctuation">,</span> <span class="token string">'slow hinge-in-from-bottom scale-in-down'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

}

function init() {
foundation(),
menu_animation();
}

init();

})(jQuery);
</script>

 
Or you could try something along these lines if your goal is to allow the user to change the animation:(Note: this method may buggy or require further javascript...)
 
<div class="title-bar" data-responsive-toggle="mainMenu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="animating"></button>
<div class="title-bar-title">Menu</div>
</div>

{% for page in pages %}
{% if page.hasDescendants() %}
<li>
<a href="#">{{ page.title }}</a>
<ul class="menu vertical">
{% set children = craft.entries.section('pages').descendantOf(page.id) %}
{% for child in children %}
<li {{ activeClass(child.slug, 2) }} id="animating" data-toggler data-animate="{{% animateClass %}}">
<a href="{{ child.url }}">
{% set icon = child.sharedIcon %}
{% if icon %}{{ icon.icon }}{% else %}{{ child.title }}{% endif %}
</a>
</li>
{% endfor %}
</ul>
 

You commented on Emily Mentzer's post over 3 years

For email, you may want to set the height="30" rather then style="height:30px;".

You commented on fivedoor's post over 3 years

I think this is an issue with using Gulp 4. I ran into the same issue as well as a few others such as not being able to use multiple instance the gulp4 / babel.gulpfile.js with the email template.Solutions like what shaungrady recommend work but frankly using babel with gulp seems to create more issues then it is worth at this time.I would highly recommend using bower install --save-dev foundation-emails and base your gulpfile off the one there. 
If you are still having issues let me know.

You commented on Marcus Moore's post over 3 years

I agree. One thing Geoff mentioned in the video below is generating color pallets ( ~ 30min) .
https://www.thenewdynamic.org/event/2016/01/13/zurb-foundtion-and-modern-web-tech/

Personally, I've looking into making the styleguide similar to codyhouse's but with a gulp tasks to automate resizing of your branding logos for everything from favicons.
https://codyhouse.co/demo/style-guide-template/index.html

You commented on Steven Thate's post over 3 years

First off, that's awesome.

As for your questions:
For sliding down do you mean accomplishing something like this (http://g.recordit.co/7LYLRKxwxx.gif)?
Just add z-index: -1 to dropdown-menu.scss line 35.

As for your second question, yes there is. Not sure I fully understand what you are asking but try out transform origin maybe.

You commented on Hans McMurdy's post over 3 years

@Rafi Benkual sorry for the delay.

Textilate works but it becomes bloated and creates issues with when you are working with click events like modals. You end up with duplicate D.O.M. nodes that you have to debounce / delete or otherwise hide...

For cherio and Inky, maybe... Not sure how to write it but maybe something like this
Javascript
var input =
'
<animate-word data-animate="%">
// fuzy logic to grab each character
</animate-word>
';
var expected = `
// Grab the text inside any html tag
htmlTag = /^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/
// Split each character and store in an array
.split.this = []
// loop through the array and wrap with span
for each in [ ] {
'<span class="letter{i}" data-animate="{$this.animation}">' + $this.letter + ' </span>'
}
` ;

The end result would be something more simple like this. Also because the document is preprocessed, rendering duplicate nodes on click events wouldn't be be an issue for designers to worry about.

<animate-word data-animate="fade-in fade-out">
this
</animate-word>

<animate-paragraph data-animate="fade-in fade-out">
this this this this
</animate-paragraph>

Document Rendered
```HTML
t
h
i
s

t
h
i
s

```

You commented on Scott Koons's post almost 4 years

Personally, I'm not very proud about the end results here but...

Selfusnow.com is built on foundation-6 (It was built a week or so before the public release).
Onearizona.org is a bloated and buggy p.o.s. (not a point of sale) but it does uses foundation-6 flex-grid for the section above organizations.

Posts Followed

Following

Followers