Tag Archives ⇒ quickfix

Prevent FOUC in Foundation 6

· Michael Schmitt

If your Webbrowser renders before all CSS is loaded you will probably see a FOUC  – a flash of unstyled content. This happened to me in several Foundation 6 Projects. I have to write this down because I always forget about the fix.

Set the starting html tag this way:

<html class="no-js" lang="en" dir="ltr">

and put this snippet in in your scss:

.no-js {
  @include breakpoint(small only) {
    .top-bar {
      display: none;
    }
  }
 
  @include breakpoint(medium) {
    .title-bar {
      display: none;
    }
  }
}