Preventing FOUC (flash of unstyled content).

cf. https://foundation.zurb.com/sites/docs/responsive-navigation.html#preventing-fouc
igoltz · May 29, 2018 · 81b87ba · 81b87ba
1 parent b443b2b
commit 81b87ba
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git a/default/web_tt2/crash.tt2 b/default/web_tt2/crash.tt2
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="[% lang %]" xml:lang="[% lang %]">
+<html class="no-js" lang="[% lang %]" xml:lang="[% lang %]">
 <!-- crash.tt2 -->
 <head>
 <meta charset="UTF-8" />

diff --git a/default/web_tt2/css.tt2 b/default/web_tt2/css.tt2
@@ -113,9 +113,22 @@ q:before, q:after {
 	content: none;
 }
 
-[%# Compat. with Fooundation 5. ~%]
-ul.row {
-    width: 100%;
+/***
+  * Foundation 6: Preventing FOUC.
+  */
+
+.no-js .top-bar {
+  display: none;
+}
+
+@media screen and (min-width: 40em) {
+  .no-js .top-bar {
+    display: block;
+  }
+
+  .no-js .title-bar {
+    display: none;
+  }
 }
 
 /**
@@ -571,6 +584,11 @@ section.home-submenu a:hover span i.fa-envelope, section.home-submenu a:hover sp
     color: [% color_7 %];
 }
 
+[%# Compat. with Fooundation 5. ~%]
+ul.row {
+    width: 100%;
+}
+
 /* Tables */
 table {
     background-color: [% color_7 %];

diff --git a/default/web_tt2/main.tt2 b/default/web_tt2/main.tt2
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="[% lang %]" xml:lang="[% lang %]">
+<html class="no-js" lang="[% lang %]" xml:lang="[% lang %]">
 <!-- main.tt2 -->
 <head>
 <meta charset="UTF-8" />

diff --git a/default/web_tt2/tt2_error.tt2 b/default/web_tt2/tt2_error.tt2
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="[% lang %]" xml:lang="[% lang %]">
+<html class="no-js" lang="[% lang %]" xml:lang="[% lang %]">
 <!-- tt2_error.tt2 -->
 <head>
 <meta charset="UTF-8" />