Menu icon Foundation

My Posts



My Comments

Alex Robinson commented on Alex Robinson's post over 2 years

Thanks! I did figure out how to make classes using @includes which helped a lot in my understanding. I couldn't install the ZURB template through CLI so I just used the Basic one. I might try to install Handlebars, but for now I'm just trying to get a proof-of-concept going so it doesn't matter too much.
Care to help me with my more current issue?
http://foundation.zurb.com/forum/posts/52750-off-canvas-overflow--motion-ui
 
Thanks again though!

Alex Robinson commented on Kevin Neal's post over 2 years

And honestly, I wrote this before I even knew what FOUC was or how to correct it.

Alex Robinson commented on Kevin Neal's post over 2 years

Oh, I had this problem too. I had to do this, and I'm not sure if it's a perfect solution.
So at the top of my CSS I set the default visibility to the small version:
/* SETS DEFAULT VISIBILITY OF HEADER & FOOTER */

div.title-bar.nav-mobile{display: block;}
nav.top-bar.nav-large{display:none}
nav.top-bar.nav-medium{display: none;}
And then for each size iteration I then coded w/ media queries
/* Medium only */
@media screen and (min-width: 41em) and (max-width: 63.9999em) {

body{min-width: 1024px; font-size: 14px;}

/* NAV Control Medium */
nav.top-bar.nav-medium{display: block;}
div.title-bar.nav-mobile{display: none;}
nav.top-bar.nav-large{display:none}

/* Prevents OffCanvas from showing on refresh/
div#offCanvas{display:none;}
/
Large and up */
@media screen and (min-width: 64em) {

body{min-width: 1400px;}
div.container_content{font-size: 115%}

div.title-bar.nav-mobile{display: none;}
nav.top-bar.nav-large{display: block}
nav.top-bar.nav-medium{display: none;}

div#footer-large{
height: 20px;
}

/*Prevents offCanvas from displaying on refresh */
div#offCanvas{display:none;}
It's probably not the most efficient or correct way to do it, but I was in sort of a hurry so this seemed to help me.
Apologies if it doesn't fix your problem.

Alex Robinson commented on Kevin Neal's post over 2 years

This is called a flash of unstyled content. I found it somewhere in the Docs, but now I can't seem to locate it.
Anyway, this in your CSS or SCSS should fix the problem.
// Prevent FOUC of Top-bar and Title-bar
// ------------------------------------
.no-js {

  @include breakpoint(small only) {

.top-bar {
  display: none;
}

}

@include breakpoint(medium) {
.title-bar {
display: none;
}
}
}

Posts Followed



Following

    No Content

Followers

My Posts

My Comments

You commented on Alex Robinson's post over 2 years

Thanks! I did figure out how to make classes using @includes which helped a lot in my understanding. I couldn't install the ZURB template through CLI so I just used the Basic one. I might try to install Handlebars, but for now I'm just trying to get a proof-of-concept going so it doesn't matter too much.
Care to help me with my more current issue?
http://foundation.zurb.com/forum/posts/52750-off-canvas-overflow--motion-ui
 
Thanks again though!

You commented on Kevin Neal's post over 2 years

And honestly, I wrote this before I even knew what FOUC was or how to correct it.

You commented on Kevin Neal's post over 2 years

Oh, I had this problem too. I had to do this, and I'm not sure if it's a perfect solution.
So at the top of my CSS I set the default visibility to the small version:
/* SETS DEFAULT VISIBILITY OF HEADER & FOOTER */

div.title-bar.nav-mobile{display: block;}
nav.top-bar.nav-large{display:none}
nav.top-bar.nav-medium{display: none;}
And then for each size iteration I then coded w/ media queries
/* Medium only */
@media screen and (min-width: 41em) and (max-width: 63.9999em) {

body{min-width: 1024px; font-size: 14px;}

/* NAV Control Medium */
nav.top-bar.nav-medium{display: block;}
div.title-bar.nav-mobile{display: none;}
nav.top-bar.nav-large{display:none}

/* Prevents OffCanvas from showing on refresh/
div#offCanvas{display:none;}
/
Large and up */
@media screen and (min-width: 64em) {

body{min-width: 1400px;}
div.container_content{font-size: 115%}

div.title-bar.nav-mobile{display: none;}
nav.top-bar.nav-large{display: block}
nav.top-bar.nav-medium{display: none;}

div#footer-large{
height: 20px;
}

/*Prevents offCanvas from displaying on refresh */
div#offCanvas{display:none;}
It's probably not the most efficient or correct way to do it, but I was in sort of a hurry so this seemed to help me.
Apologies if it doesn't fix your problem.

You commented on Kevin Neal's post over 2 years

This is called a flash of unstyled content. I found it somewhere in the Docs, but now I can't seem to locate it.
Anyway, this in your CSS or SCSS should fix the problem.
// Prevent FOUC of Top-bar and Title-bar
// ------------------------------------
.no-js {

  @include breakpoint(small only) {

.top-bar {
  display: none;
}

}

@include breakpoint(medium) {
.title-bar {
display: none;
}
}
}

Posts Followed

Following

  • No Content

Followers

  • No Content