Foundations (Zurb) - Frameworks

So I recently reached out to the Foundations forum for help. But it's been a few days and no one has replied and I am hoping somewhere here familiar with frameworks, foundations or CSS3 could help me figure out some questions I have. I've repasted my post here with a link to the thread:

I'm trying to learn how to use Foundations as a framework, but I am finding that unlike HTML5, CSS3 and other programming languages like C# and Javascript, there aren't many free resources available for me to learn how to use Foundations (that are not videos or require payment outside of my league). I currently rely on free information to learn and attempting to cross the barrier by trying one last place (this forum) before putting it down.

Currently, The Docs gives a basic intro to what parts of the code does, but after researching other sites, there is so much more missing, and everything I've read covers lightly some areas like 'nesting' and other abilities foundations have that I desperately am trying to understand. There are videos I've seen floating around but I actually learn best when I can read it, and apply what I read rather than listening and trying to follow speech.

There are 3 main areas where I am confused and need more help.

1. Utilizing the features that are used to create layouts, and understanding Nesting Layouts and when it can be used, and when it doesn't have to be used.

2. Customizing and proper syntax. I understand that classes are used, and recently was using HTML5 boilerplate. Boilerplate has a section that says "Author's Code Here", in Foundations there is no clear place where to put my own customized code, and due to the added classes and pre-written code, I don't always know what is already there waiting for me to customize or what I can simply just put in myself. One example was trying to work with 'body' and realizing that I couldn't change the background because there already was a body elsewhere or that text-display: none, was something that was already in the code and writing it in my own was redundant.

To this effect attaching my own Customized CSS filesheet to build my site would lead to areas that would not change because another part of the code already had it written in the main foundation file. Right now knowing what I can tamper with to get what I want done in order to customize it and what was better left alone so as not to break areas that foundation has implemented has been a battle.

So far I have not found many resources that talk about customizing the CSS so it doesn't look generic. Beyond how to customize the navigation and Foundations docs talk about SASS which I am not ready to approach yet right now. (I'm still trying to get comfortable with using CSS3 -within- Foundations, let alone learning SASS)

At this point I don't know whether it's more productive to create my own CSS3 file and move elements I want from the main file to edit into my customized file to keep it altogether, or if I should be editing within the main Foundations CSS3 file, and so on as it relates to customization.

3. I am not sure how it works with Grids, but I am aware that Grids come with predefined Widths in their columns, but what about Heights. Is there predefined Heights are is that something we customize ourselves?

My goal right now is to learn how to create layouts and customize them using Foundations and CSS3 (not SASS). These are the current questions I have listed here, that I've been unable to get more help on.

One specific problem I have regarding what might require Nesting:
I've currently attached a problem in an area in which I've felt like I've required nesting but am not sure how to approach it, what I tried to do was replicate something I did using HTML5 boilerplate in Foundations. Where the "Header" is supposed to be behind the "Navigation Bar" which is centered in the middle.

To do this in Foundations without positioning I've had to break the header into 2 separate pieces, and then put what I want for navigation in the middle. The navigation bar has a pure CSS3 drop down menu, but when it drops down the entire 'row' that contains the headers and the navigation bar stretches, instead of just the navigation area. I do not know how to replicate a customized CSS3 menu using Foundations built in code that comes close to looking like this.

I figure a bit of CSS3 customization can fix the navigation bar not being fixed in it's place with some more tinkering, but for the most part my struggle is what I don't know how to customize within the foundation Grid itself.

Any assistance would be helpful!

<!--Empty Spaces-->
    <div class = "row" id = "Header_Background">

   
        <!--Left Empty Space-->
        <div class= "small-3 columns" id = "Left_Header">
   
        </div>
   
        <!--Navigation-->
        <div class="small-6 columns" id = "Nav">
        <nav>       
            <ul>
                <li>Home</li>
                <li>Products</li>
                <li>
                Portfolio
                    <ul>
                      <li>Web Design</li>
                      <li>Web Development</li>
                      <li>Illustrations</li>
                    </ul>
                 </li>
                <li>Blog</li>
                <li>About</li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
   
        </div>
   
       
        <!--Right Empty Space-->
        <div class="small-3 columns large-6" id = "Right_Header">

        </div>
   
   
    </div>
    <!---End of Empty Space-->
       
       
       
       

            <!--Main Content-->
            <div class = "row" id = "Main">
                <!--
                <div class="small-6 columns" id ="Main_2">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tempor justo. Sed consequat aliquet commodo. Curabitur gravida, dolor nec efficitur commodo, massa metus lobortis elit, ac fermentum turpis leo non enim. Nunc sed justo purus. Morbi a auctor nulla. Pellentesque non egestas ex. Phasellus commodo, libero quis vulputate aliquam, nisi justo sollicitudin orci, vitae tincidunt nisi leo eu elit. Praesent id ante tortor. Vivamus in interdum ligula, sed tincidunt erat.
                </div>
                -->
           
           
            </div>
       

    Navigation Bar Example:
    ul {
   
      font: bold 12px/18px sans-serif;
      text-align: left;
      display: inline;
      margin: 0;
      padding: 15px 4px 17px 0;
 
      list-style: none;
 
      -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
      -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
      /*font: bold 12px/18px sans-serif;*/
      display: inline-block;
      margin-right: -4px;
      position: relative;
      padding: 15px;
      background: #fff;
      cursor: pointer;
 
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -ms-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;

}

                                       
ul li:hover {
      background: #555;
      color: #fff;
}

ul li ul {
      padding: 0;
 
      top: 48px;
      left: 0;
      width: 150px;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      display: none;
      opacity: 0;
      visibility: hidden;
 
      -webkit-transiton: opacity 0.2s;
      -moz-transition: opacity 0.2s;
      -ms-transition: opacity 0.2s;
      -o-transition: opacity 0.2s;
      -transition: opacity 0.2s;
}

ul li ul li {
      background: #555;
      display: block;
      color: #fff;
      text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover {
    background: #666;
}
                           

ul li:hover ul {
      display: block;
      opacity: 1;
      visibility: visible;
}

Code (markup):

Was unable to share picture so I posted the original post here, there are reference pictures to what I am describing here: Foundation post + Images

 

Just wondering, does -anyone- here know how to work with Foundations Frameworks, Zurb? foundations Zurb I think (not sure just based on the $99 for support on their page when I ask it) charges $99 just to ask a question or get support, their community forums are hit or miss, and the few extensive tutorials out there are 'video' tutorials and start at $299. Is there anyone with advanced working knowledge of CSS3 who can help with my questions for foundations framework?

Link to the forum post that contains the pictures: foundation.zurb.com/forum/posts/21649-learning-foundations--grids-help

A modified shorter version of my question is the following:


1. Nesting layouts & Features not founds in Docs. An example problem involves my header which had to be broken in 2 Divs, that were each 3 columns, in order to place the Navigation inside it, between the 3 columns at 6 columns. Whereas in regular CSS3 all I had to do was position the header as relative and the navigation as absolute and then move it up a bit.

Because they are contained in the same row when I mouse over navigation, the entire 'row' & column stretches. This is not what I want to do. In trying to problem solve myself I'm going to see if removing the navigation from the grid helps but honestly there has to be a better way. I thought nesting was the answer, but can't fully understand how to properly implement it.

1B. Foundation Feature Question: Features not found in Docs, there are a bunch of things the Doc does not list or fully explain beyond the single examples placed there. And some things don't seem to be listed when compared to other basic tutorials I've found out there, making me feel like I'm not fully utilizing what foundations is capable of.

2. Best method for defining Heights with Grids? They don't seem to be predefined so what would be the best method for it? The same way I would do it without the Grid or is there a system to it here?

3. How and where to customize foundation frameworks CSS3? Using HTML5 Boilerplate there is a -clear- place for customization. Foundation Frameworks does not have a clear place, and what code I put in myself ends up overlapping or not working with what is already there. A clear guide or some tips or some help or link to a resource would be awesome.

 

Zurb foundation is really easy framework. If you have used twitter boostrap then you will find it much easier and having more features as compared to bootstrap. In your want to add nav in the right column which is not identical, Basically, nav is used with full-width. Just try to add another div with column size small-12 columns and add the nav to verify output.