Prevent FOUC in Foundation 6

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;
    }
  }
}

Schneller zu validem Html mit Ubuntu und Eclipse

Tree on Monument Hill
Attribution-NonCommercial-NoDerivs License by zachstern

Valides Html ist wichtig – keine Frage. Leider ist der Weg dorthin oft beschwerlich, vor allem, wenn man wie ich eher selten damit arbeitet. Für größere PHP Sachen verwende ich Eclipse für „PHP Menschen“.  Wenn nun irgendwas mit meinem Html nicht stimmt, bekomme ich meist so ein kleines Ausrufezeichen, jedoch nicht immer.

phpnwe7CH

Deswegen bemühe (bemühte) ich häuft den Validator der W3C Seite, der endgültige Gewissheit über das Markup verschafft. Da ich meist lokal arbeite und auch nicht  Dyndns oder ähnliches verwenden möchte, hat sich das „Debuggen“ mit dem Validator immer in eine Copy & Paste Orgie verwandelt. Ein wenig Lesen auf der W3C Seite brachte mir diese schöne Erkenntnis:

All software developed at W3C is Open Source / Free software. Which means that you can download and use them for free, if you like. It also means that you are welcome to participate in making them better, cooler, more useful for you and everyone.

Juhu. Schnell stand fest, daß es da auch ein Ubuntu Paket namens w3c-markup-validator im Repository gibt. Nach der Installtion muß man  in der Datei /etc/w3c/validator.conf noch die Option Allow Private IPs auf yes setzen. Den Validator erreicht man unter http://localhost/w3c-markup-validator. Sehr schön.

Um den Validator bequem mit Eclipse zu nutzen, werden noch 5 Minuten Rumklicken benötigt. Mir reicht es, wenn ich per Mausklick die aktuelle Seite validieren kann. Dazu konfiguriere ich unter Run->External Tools->External Tools Configuration den Browseraufruf. Zu beachten wäre hierbei, daß der absolute Pfad zum Programm angegeben werden muß. (Ich verwende Chrome. Firefox findet man unter /usr/bin/firefox)

Hier der Screenshot des Fensters mit meinen Einstellungen:

phpo16zCr

Im Reiter common sollte man noch das Häckchen bei  „Allocate Console“ rausnehmen und „Launch in Background“ setzen.

Nun kann man bequem per Mausklick validieren:

phpjls8gg

Zum Ende bleibt nur noch zu fragen, wie Ihr euren HTML Krams validiert. Meine Lösung ist zwar relativ einfach, aber simpler gehts – finde ich –  immer 🙂