Menu icon Foundation

My Posts


  • NEW
  • Better Sass/Javascript Defaults?

    By Christian Magill

    Sassjavascript

    Working on my second project with Foundation and really getting into the Sass settings file. I'm noticing several default settings that seem to get more in the way than help when it comes to really customizing sites the way you want. I prefer my defaults... (continued)







My Comments

Christian Magill commented on Christian Magill's post 5 months

Awesome. Looking forward to it!

Christian Magill commented on Christian Magill's post 7 months

Thanks,
I'm happy to see this hacky line removed as well.
// small only
if ($(".tabs-to-accordions").css("border-radius") == "0px" ){

Christian Magill commented on Christian Magill's post 9 months

Not sure where my actual post went, so here we go again.
I'm having an issue with dropdown-pane on iPad in F6. I can event reproduce the issue with Chrome's Device Toolbar by emulating iPad in Landscape.
http://staging1.martinnewsite.com/content/page/692/home
If you try and click on "Products" or "Services" in the top menu you will see the menu open, and then shift partially off-screen.
 
 

Christian Magill commented on Christian Magill's post about 1 year

Thanks for the reply,
I was getting tripped up by the defaults being set before the mixins were called. Unfortunately, this means you can not easily combine related variables and css to customize a Foundation component in one file.
This leaves you with a few options as I see it.
You can separate your variables from the output sass, splitting them into separate files, and loading the variable files before importing Foundation.
You can compbine all the variables into one settings file as you mentioned.
Or you can continue to combine the variables and output related sass in one file, but wrap the output related sass in a conditionally that is set after Foundation is imported, thus the files would be imported/compiled twice which probably has a negative performance effect, but may be negligible.

Christian Magill commented on Christian Magill's post about 1 year

Unfortunately this doesn't seem to quite work the way I'd hoped since the main Foundation import which happens first initializes all the variable values. This means that any cascading variable values that I set in my component file, for instance $topbar-background, aren't reflected in variables such as $topbar-submenu-background unless I explicitly set it as well.
Any suggestions on how to handle this?
I'd really hoped to have one scss file dedicated to each component to make things easy.
 
Thanks,

Christian Magill commented on Rafi Benkual's post about 1 year

My above comment is based on usage in 6.2, I have edited post to note it as so. Full screen modals are much better in general, but I can't figure out how to stop modal triggers from resetting page to top.

Christian Magill commented on Rafi Benkual's post about 1 year

My above comment is based on usage in 6.2, I have edited post to note it as so. Full screen modals are much better in general, but I can't figure out how to stop modal triggers from resetting page to top.

Christian Magill commented on Rafi Benkual's post about 1 year

@Kevin Ball

My previous example now goes full screen properly, yeah!, however clicking on the trigger resets page to top. I have tried removing the "#" href, but this does not improve the situation. By setting the opacity of the modal, I see that this happens on modal trigger instead of close.

I'm using 6.2 release...

Christian Magill commented on Rafi Benkual's post about 1 year

No worries, thanks for your help on solving these issues.

Christian Magill commented on Rafi Benkual's post about 1 year

The 8px translation on the element also persists.

And when I try something more complex like the below, the reveal modal doesn't even show up when triggered.

<!doctype html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <title>Martin Engineering</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="/dist/styles/main.css">
</head>
<body>


<div class="off-canvas-wrapper">
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

    <!-- off-canvas left menu -->
    <div class="off-canvas off-canvas-menu position-left" id="off-canvas-menu" data-off-canvas>
      <ul class="vertical menu" data-accordion-menu>
        <li>
          <a href="#">Home</a>
          <ul class="menu vertical nested">
            <li><a href="#">Item 1A</a></li>
            <li><a href="#">Item 1B</a></li>
            <li><a href="#">Item 1C</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Why Us</a>
          <ul class="menu vertical nested">
            <li><a href="#">Item 2A</a></li>
            <li><a href="#">Item 2B</a></li>
            <li><a href="#">Item 2C</a></li>
          </ul>
        </li>
        <li><a href="#">Industries</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

    <!-- original content goes in this container -->
    <div class="off-canvas-content main-canvas" data-off-canvas-content>

      <!-- off-canvas title bar for 'small' screen -->
      <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
        <div class="title-bar-left">
          <button class="menu-icon" type="button" data-open="off-canvas-menu"></button>
          <span class="title-bar-title">Martin</span>
        </div>
      </div>

      <!-- "wider" top-bar menu for 'medium' and up -->
      <div id="main-menu" class="top-bar main-menu">
        <div class="row column">
          <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
              <li class="menu-text">Test</li>
              <li>
                <a href="#">Testing</a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="main-content" id="main-content">
        <div class="show-for-medium" data-sticky-container>
          <div class="sticky" id="example" data-sticky data-margin-top="0" style="width:100%;" data-margin-bottom="0" data-anchor="main-content">
              <nav class="content-menu" data-magellan>
                <div class="row column">
                  <ul class="horizontal menu -expanded">
                    <li><a href="#section-intro">Features / Benefits</a></li>
                    <li><a href="#section-solutions">Solutions</a></li>
                    <li><a href="#section-case-studies">Case Studies</a></li>
                  </ul>
                </div>
              </nav>

          </div>
        </div>

        <style>
          section{
            min-height: 400px;
          }
        </style>

        <section class="section-intro" id="section-intro" data-magellan-target="section-intro">Intro</section>
        <section class="section-bullets" id="section-bullets">Bullets</section>
        <section class="section-solutions" id="section-solutions" data-magellan-target="section-solutions">Solutions</section>
        <section class="section-case-studies" id="section-case-studies" data-magellan-target="section-case-studies">Case Studies</section>

        <section class="testing">
          <a href="#" data-toggle="contact-modal" class="action-button">Contact Us <i class="fa fa-arrow-right"></i></a>
        </section>

        <div class="full reveal" id="contact-modal" data-reveal>
          <p>OH I'M SO FUUUUL</p>
          <img src="http://placekitten.com/1920/1280" alt="Intropsective Cage">
          <button class="close-button" data-close aria-label="Close reveal" type="button">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="/dist/scripts/jquery.js"></script>
<script src="/dist/scripts/main.js"></script>
</body>
</html>

Posts Followed




Following

    No Content

Followers

My Posts

My Comments

You commented on Christian Magill's post 5 months

Awesome. Looking forward to it!

You commented on Christian Magill's post 7 months

Thanks,
I'm happy to see this hacky line removed as well.
// small only
if ($(".tabs-to-accordions").css("border-radius") == "0px" ){

You commented on Christian Magill's post 9 months

Not sure where my actual post went, so here we go again.
I'm having an issue with dropdown-pane on iPad in F6. I can event reproduce the issue with Chrome's Device Toolbar by emulating iPad in Landscape.
http://staging1.martinnewsite.com/content/page/692/home
If you try and click on "Products" or "Services" in the top menu you will see the menu open, and then shift partially off-screen.
 
 

You commented on Christian Magill's post about 1 year

Thanks for the reply,
I was getting tripped up by the defaults being set before the mixins were called. Unfortunately, this means you can not easily combine related variables and css to customize a Foundation component in one file.
This leaves you with a few options as I see it.
You can separate your variables from the output sass, splitting them into separate files, and loading the variable files before importing Foundation.
You can compbine all the variables into one settings file as you mentioned.
Or you can continue to combine the variables and output related sass in one file, but wrap the output related sass in a conditionally that is set after Foundation is imported, thus the files would be imported/compiled twice which probably has a negative performance effect, but may be negligible.

You commented on Christian Magill's post about 1 year

Unfortunately this doesn't seem to quite work the way I'd hoped since the main Foundation import which happens first initializes all the variable values. This means that any cascading variable values that I set in my component file, for instance $topbar-background, aren't reflected in variables such as $topbar-submenu-background unless I explicitly set it as well.
Any suggestions on how to handle this?
I'd really hoped to have one scss file dedicated to each component to make things easy.
 
Thanks,

You commented on Rafi Benkual's post about 1 year

My above comment is based on usage in 6.2, I have edited post to note it as so. Full screen modals are much better in general, but I can't figure out how to stop modal triggers from resetting page to top.

You commented on Rafi Benkual's post about 1 year

My above comment is based on usage in 6.2, I have edited post to note it as so. Full screen modals are much better in general, but I can't figure out how to stop modal triggers from resetting page to top.

You commented on Rafi Benkual's post about 1 year

@Kevin Ball

My previous example now goes full screen properly, yeah!, however clicking on the trigger resets page to top. I have tried removing the "#" href, but this does not improve the situation. By setting the opacity of the modal, I see that this happens on modal trigger instead of close.

I'm using 6.2 release...

You commented on Rafi Benkual's post about 1 year

No worries, thanks for your help on solving these issues.

You commented on Rafi Benkual's post about 1 year

The 8px translation on the element also persists.

And when I try something more complex like the below, the reveal modal doesn't even show up when triggered.

<!doctype html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <title>Martin Engineering</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="/dist/styles/main.css">
</head>
<body>


<div class="off-canvas-wrapper">
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

    <!-- off-canvas left menu -->
    <div class="off-canvas off-canvas-menu position-left" id="off-canvas-menu" data-off-canvas>
      <ul class="vertical menu" data-accordion-menu>
        <li>
          <a href="#">Home</a>
          <ul class="menu vertical nested">
            <li><a href="#">Item 1A</a></li>
            <li><a href="#">Item 1B</a></li>
            <li><a href="#">Item 1C</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Why Us</a>
          <ul class="menu vertical nested">
            <li><a href="#">Item 2A</a></li>
            <li><a href="#">Item 2B</a></li>
            <li><a href="#">Item 2C</a></li>
          </ul>
        </li>
        <li><a href="#">Industries</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

    <!-- original content goes in this container -->
    <div class="off-canvas-content main-canvas" data-off-canvas-content>

      <!-- off-canvas title bar for 'small' screen -->
      <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
        <div class="title-bar-left">
          <button class="menu-icon" type="button" data-open="off-canvas-menu"></button>
          <span class="title-bar-title">Martin</span>
        </div>
      </div>

      <!-- "wider" top-bar menu for 'medium' and up -->
      <div id="main-menu" class="top-bar main-menu">
        <div class="row column">
          <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
              <li class="menu-text">Test</li>
              <li>
                <a href="#">Testing</a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="main-content" id="main-content">
        <div class="show-for-medium" data-sticky-container>
          <div class="sticky" id="example" data-sticky data-margin-top="0" style="width:100%;" data-margin-bottom="0" data-anchor="main-content">
              <nav class="content-menu" data-magellan>
                <div class="row column">
                  <ul class="horizontal menu -expanded">
                    <li><a href="#section-intro">Features / Benefits</a></li>
                    <li><a href="#section-solutions">Solutions</a></li>
                    <li><a href="#section-case-studies">Case Studies</a></li>
                  </ul>
                </div>
              </nav>

          </div>
        </div>

        <style>
          section{
            min-height: 400px;
          }
        </style>

        <section class="section-intro" id="section-intro" data-magellan-target="section-intro">Intro</section>
        <section class="section-bullets" id="section-bullets">Bullets</section>
        <section class="section-solutions" id="section-solutions" data-magellan-target="section-solutions">Solutions</section>
        <section class="section-case-studies" id="section-case-studies" data-magellan-target="section-case-studies">Case Studies</section>

        <section class="testing">
          <a href="#" data-toggle="contact-modal" class="action-button">Contact Us <i class="fa fa-arrow-right"></i></a>
        </section>

        <div class="full reveal" id="contact-modal" data-reveal>
          <p>OH I'M SO FUUUUL</p>
          <img src="http://placekitten.com/1920/1280" alt="Intropsective Cage">
          <button class="close-button" data-close aria-label="Close reveal" type="button">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="/dist/scripts/jquery.js"></script>
<script src="/dist/scripts/main.js"></script>
</body>
</html>

Posts Followed

Following

  • No Content

Followers

  • No Content