Menu icon Foundation

Designer | Seattle, WA

I am a web designer working with an arts non-profit. I am in the process of learning all of the new tools and techniques for our new responsive website after several years of maintaining our current site.

My Posts





  • 8
    Replies
  • Semantic Grid

    By Anna Callahan

    semanticfoundation 6grid

    I am trying to build my site using the semantic grid but I am confused on how to do this. I thought the idea was to change all the medium-4 medium-push-2 etc and make it more semantic. <div class="row"> <div class="large-4 medium-4 medium-... (continued)

    Last Reply by miss ziva 6 months ago







My Comments

Anna Callahan commented on Anna Callahan's post about 2 years

 The error is coming from Dreamweaver. It validates and works in the browser though so I will ignore it.
Thanks for your help!
anna
 
 

Anna Callahan commented on Anna Callahan's post about 2 years

<ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown" data-back-button='<li class="js-drilldown-back"><a tabindex="0">Main Menu</a></li>'>
 
This seems to work, however, I get an error that says the value of attribute [data-back-button]must be closed with double quotes. Should I just ignore this?

Anna Callahan commented on Anna Callahan's post over 2 years

Thanks Rafi,
I wasn't able to figure out how to make your menu do what I wanted. I have re-created what I am trying to do but it's not working either. 
I want the drilldown on small screens and the horizontal on large screens.
Is top bar the answer for how to combine these two menus? (I haven't been able to figure it out)
 
My other question is how to keep the logo on the left from resizing when I resize the window.
http://codepen.io/4culture/pen/wGNBQZ
<div class="row">
<div class="columns hide-for-small-only">
<ul class="menu">
<li><a href="http://www.4culture.org"&gt;&lt;img src="http://placehold.it/60x60" alt="" /></a></li>
<li><a href="grants/index.htm">Grants + Artist Calls</a></li>
<li><a href="arts/index.htm">Arts</a></li>
<li><a href="heritage/index.htm">Heritage</a></li>
<li><a href="preservation/index.htm">Preservation</a></li>
<li><a href="pa/index.htm">Public Art</a></li>
<li><a href="about/index.htm">About</a></li>
<li><a href="news/index.htm">News</a></li>
<li><a href="http://apply.4culture.org/login_form"&gt;Application Login</a></li>
<li><a href="#"><i class="fa fa-search"></i></a></li>
</ul>
</div>
</div>
<div class="row">
<div class="columns show-for-small-only">
<ul class="dropdown menu" data-responsive-menu="drilldown">
<li class="menu-text float-left">MENU</li>
<li class="float-right"><a href="#"><i class="fa fa-search"></i></a></li>
<li class="clearfix"></li>
<li>
<a href="#">Grants + Artist Calls</a>
<ul class="menu vertical">
<li><a href="../grants/index.htm">Grants + Artist Calls</a></li>
<li><a href="../apply/index.htm">How to Apply</a></li>
<li><a href="../managegrant/index.htm">Manage your Grant</a></li>
<li><a href="../logo/index.htm">4Culture Logo</a></li>
<li><a href="../pastgrants/index.htm">Past Grants</a></li>
</ul>
</li>
<li><a href="../arts/">Arts</a></li>
<li><a href="../heritge/">Heritage</a></li>
<li><a href="../preservation/">Preservation</a></li>
<li>
<a href="#">Public Art</a>
<ul class="menu vertical">
<li><a href="index.htm">Public Art Home</a></li>
<li><a href="../grants/index.htm#pa">Calls for Artists</a></li>
<li><a href="../portfolio/index.htm">Our Work</a></li>
<li><a href="../consulting/index.htm">Consulting</a></li>
<li><a href="../makepublicart/index.htm">Make Art in Public</a></li>
<li><a href="../publicart/about/index.htm">Meet the Team</a></li>
</ul>
</li>
<li>
<a href="#">About</a>
<ul class="menu vertical">
<li><a href="index.htm">About Home</a></li>
<li><a href="../staff/index.htm">Staff</a></li>
<li><a href="../leadership/index.htm">Board &amp; Advisory Committees</a></li>
<li><a href="../revenue/index.htm">Revenue Sources</a></li>
<li><a href="../press/index.htm">Newsletters &amp; Press Releases</a></li>
<li><a href="../contact/index.htm">Contact Us</a></li>
</ul>
</li>
<li><a href="../blog/index.htm">Blog</a></li>
<li><a href="http://www.apply.4culture.org"&gt;Application Login</a></li>

    &lt;/ul&gt;

</div>
</div>
 
As always, thanks so much for your help!
Anna
 

Anna Callahan commented on Anna Callahan's post over 2 years

That does help, thank you!
Are you aware of a foundation site online with a semantic structure so I could look at the code to better understand?

Anna Callahan commented on Anna Callahan's post over 2 years

Thank you Dominik,
The main issue I am confused about is if replacing these types of classes
large-4 medium-4 medium-push-2 columns

in the html with other class names is the way to make it more semantic?
Is a semantic grid one that doesn't use the above (generic) types of classes and instead embeds all the column information in the css instead of putting it in the html?
Thank you,
Anna
 
 

Anna Callahan commented on Anna Callahan's post over 2 years

Thanks Corey,
I am currently using SASS in my site. Do you think they were talking about css/sass? That prototyping is done with css and production incorporates sass?
I am mainly wondering if it's okay to use the plugins (toggler especially) as-is without any modifications.
 
Thanks again,
anna
 

Anna Callahan commented on Jason kalawe's post over 2 years

+1

Anna Callahan commented on Jason kalawe's post over 2 years

+1

Anna Callahan commented on Anna Callahan's post almost 3 years

YES YES YES!!!
Thank you so much!

Anna Callahan commented on Anna Callahan's post almost 3 years

It is still just placing all three images on top of each other. I'm not sure what I am doing wrong.

<link rel="stylesheet" href="../../../css/foundation-icons/foundation-icons.css" />
<link rel="stylesheet" href="../../../css/app.css" />
<link rel="stylesheet" href="../../../css/slick.css" />
<script src="../../../bower_components/modernizr/modernizr.js"></script>
<script src="https://use.typekit.net/nhg0fxe.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>



<div class="your-class">
        <div><img src="../../images/blashfield.jpg" alt=""></div>
         <div><img src="../../images/simpson.jpg" alt=""></div>
          <div><img src="../../images/sollod.jpg" alt=""></div>
</div>



   <script src="../../../bower_components/jquery/dist/jquery.min.js"></script>
    <script src="../../../bower_components/foundation/js/foundation.min.js"></script>
    <script src="../../../js/app.js"></script>
    <script src="../../../js/slick.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

Posts Followed




  • 4
    Replies
  • When to use small-12 class

    By Nathan D

    small-12gridcolumns

    I've been using Foundation for a few years now and one thing I've never used but seen used by my colleagues that I now feel I should ask about is when to use the small-12 class on a .column div. By default, .column has a 100% width, so what's the point in... (continued)

    Last Reply by Nathan D almost 3 years ago



  • 3
    Replies
  • HTML5 and Foundation

    By Anna Callahan

    html5semantics

    I took a look at this post but I still have questions (and the codepen wasn't working for me) http://foundation.zurb.com/forum/posts/1890-foundation-and-semantic-elements In this post, you said that div is tied in with the css for columns so other ta... (continued)

    Last Reply by Rafi Benkual over 3 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Anna Callahan's post about 2 years

 The error is coming from Dreamweaver. It validates and works in the browser though so I will ignore it.
Thanks for your help!
anna
 
 

You commented on Anna Callahan's post about 2 years

<ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown" data-back-button='<li class="js-drilldown-back"><a tabindex="0">Main Menu</a></li>'>
 
This seems to work, however, I get an error that says the value of attribute [data-back-button]must be closed with double quotes. Should I just ignore this?

You commented on Anna Callahan's post over 2 years

Thanks Rafi,
I wasn't able to figure out how to make your menu do what I wanted. I have re-created what I am trying to do but it's not working either. 
I want the drilldown on small screens and the horizontal on large screens.
Is top bar the answer for how to combine these two menus? (I haven't been able to figure it out)
 
My other question is how to keep the logo on the left from resizing when I resize the window.
http://codepen.io/4culture/pen/wGNBQZ
<div class="row">
<div class="columns hide-for-small-only">
<ul class="menu">
<li><a href="http://www.4culture.org"&gt;&lt;img src="http://placehold.it/60x60" alt="" /></a></li>
<li><a href="grants/index.htm">Grants + Artist Calls</a></li>
<li><a href="arts/index.htm">Arts</a></li>
<li><a href="heritage/index.htm">Heritage</a></li>
<li><a href="preservation/index.htm">Preservation</a></li>
<li><a href="pa/index.htm">Public Art</a></li>
<li><a href="about/index.htm">About</a></li>
<li><a href="news/index.htm">News</a></li>
<li><a href="http://apply.4culture.org/login_form"&gt;Application Login</a></li>
<li><a href="#"><i class="fa fa-search"></i></a></li>
</ul>
</div>
</div>
<div class="row">
<div class="columns show-for-small-only">
<ul class="dropdown menu" data-responsive-menu="drilldown">
<li class="menu-text float-left">MENU</li>
<li class="float-right"><a href="#"><i class="fa fa-search"></i></a></li>
<li class="clearfix"></li>
<li>
<a href="#">Grants + Artist Calls</a>
<ul class="menu vertical">
<li><a href="../grants/index.htm">Grants + Artist Calls</a></li>
<li><a href="../apply/index.htm">How to Apply</a></li>
<li><a href="../managegrant/index.htm">Manage your Grant</a></li>
<li><a href="../logo/index.htm">4Culture Logo</a></li>
<li><a href="../pastgrants/index.htm">Past Grants</a></li>
</ul>
</li>
<li><a href="../arts/">Arts</a></li>
<li><a href="../heritge/">Heritage</a></li>
<li><a href="../preservation/">Preservation</a></li>
<li>
<a href="#">Public Art</a>
<ul class="menu vertical">
<li><a href="index.htm">Public Art Home</a></li>
<li><a href="../grants/index.htm#pa">Calls for Artists</a></li>
<li><a href="../portfolio/index.htm">Our Work</a></li>
<li><a href="../consulting/index.htm">Consulting</a></li>
<li><a href="../makepublicart/index.htm">Make Art in Public</a></li>
<li><a href="../publicart/about/index.htm">Meet the Team</a></li>
</ul>
</li>
<li>
<a href="#">About</a>
<ul class="menu vertical">
<li><a href="index.htm">About Home</a></li>
<li><a href="../staff/index.htm">Staff</a></li>
<li><a href="../leadership/index.htm">Board &amp; Advisory Committees</a></li>
<li><a href="../revenue/index.htm">Revenue Sources</a></li>
<li><a href="../press/index.htm">Newsletters &amp; Press Releases</a></li>
<li><a href="../contact/index.htm">Contact Us</a></li>
</ul>
</li>
<li><a href="../blog/index.htm">Blog</a></li>
<li><a href="http://www.apply.4culture.org"&gt;Application Login</a></li>

    &lt;/ul&gt;

</div>
</div>
 
As always, thanks so much for your help!
Anna
 

You commented on Anna Callahan's post over 2 years

That does help, thank you!
Are you aware of a foundation site online with a semantic structure so I could look at the code to better understand?

You commented on Anna Callahan's post over 2 years

Thank you Dominik,
The main issue I am confused about is if replacing these types of classes
large-4 medium-4 medium-push-2 columns

in the html with other class names is the way to make it more semantic?
Is a semantic grid one that doesn't use the above (generic) types of classes and instead embeds all the column information in the css instead of putting it in the html?
Thank you,
Anna
 
 

You commented on Anna Callahan's post over 2 years

Thanks Corey,
I am currently using SASS in my site. Do you think they were talking about css/sass? That prototyping is done with css and production incorporates sass?
I am mainly wondering if it's okay to use the plugins (toggler especially) as-is without any modifications.
 
Thanks again,
anna
 

You commented on Jason kalawe's post over 2 years

+1

You commented on Jason kalawe's post over 2 years

+1

You commented on Anna Callahan's post almost 3 years

YES YES YES!!!
Thank you so much!

You commented on Anna Callahan's post almost 3 years

It is still just placing all three images on top of each other. I'm not sure what I am doing wrong.

<link rel="stylesheet" href="../../../css/foundation-icons/foundation-icons.css" />
<link rel="stylesheet" href="../../../css/app.css" />
<link rel="stylesheet" href="../../../css/slick.css" />
<script src="../../../bower_components/modernizr/modernizr.js"></script>
<script src="https://use.typekit.net/nhg0fxe.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>



<div class="your-class">
        <div><img src="../../images/blashfield.jpg" alt=""></div>
         <div><img src="../../images/simpson.jpg" alt=""></div>
          <div><img src="../../images/sollod.jpg" alt=""></div>
</div>



   <script src="../../../bower_components/jquery/dist/jquery.min.js"></script>
    <script src="../../../bower_components/foundation/js/foundation.min.js"></script>
    <script src="../../../js/app.js"></script>
    <script src="../../../js/slick.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

Posts Followed





Following

  • No Content

Followers

  • No Content