HTML5 Boilerplate: Was es ist und wie es funktioniert

Es gibt mehrere Tools, mit denen Sie eine vorgefertigte Struktur haben, um mit der Entwicklung von Projekten zu beginnen. Es handelt sich um leere, bereits vorgefüllte Behälter, die es uns ermöglichen, wertvolle Zeit für die Entwicklung zu sparen.

Es kommt oft vor, dass Sie eine komfortable Umgebung wünschen, um mit der Entwicklung eines Projekts zu beginnen: sei es   Webdesign   oder   Webentwicklung   . Die Basis für ein Webprojekt besteht jedoch in den meisten Fällen aus einem sehr einfachen modularen Aufbau, bestehend aus einer   initialen index.html und einigen nützlichen Ordnern, wie dem, in den wir alle unsere Skripte, die Bilder und Schriftarten einfügen und schließlich unseren CSS-Ordner.

So wie es CSS-Frameworks gibt (zB   Twitter Bootstrap oder Foundation   ) und wie es Frameworks für die Entwicklung gibt (zB   laravel   ,   simphony   ,   codeigniter   ), gibt es auch „Frameworks“ zum Verfassen von HTML. Deshalb werden wir heute versuchen, die HTML5 Boilerplate zu analysieren     . Lassen Sie uns gemeinsam sehen,   was es ist und wie es   konkret funktioniert .

Inhaltsverzeichnis

  • Was ist HTML5 Boilerplate?
  • So funktioniert HTML5 Boilerplate
  • Schlussfolgerungen

Was ist HTML5 Boilerplate?

Bevor wir beginnen, ist es gut, gemeinsam zu sehen,   was HTML5 Boilerplate ist   und ob wir es in unsere Projekte integrieren können.

Dieses HTML-Framework enthält alles, was für die Erstellung unserer ersten Codezeilen erforderlich ist. Seit Jahren ist es ein Muss zu Beginn meiner Projekte und Sie werden schnell verstehen warum.

Wie bereits erwähnt, ist   HTML5 Boilerplate   eine Front-End-Vorlage, die entwickelt wurde, um mit dem Erstellen solider und robuster Webanwendungen oder Websites zu beginnen.

Dieses Projekt ist das Produkt jahrelanger iterativer Entwicklung und des gemeinsamen Wissens der Entwicklergemeinschaft. Es schreibt keine bestimmte Entwicklungsphilosophie vor und zwingt Sie auch nicht, komplexe Konzepte oder klassische Framework-Architekturen zu erlernen.

Sie können die Architektur Ihres Codes einfach frei entscheiden.

So funktioniert HTML5 Boilerplate

Zu Beginn haben wir grundsätzlich drei mögliche Optionen, die alle sehr einfach sind und im Wesentlichen mit unseren Gewohnheiten und Fähigkeiten verbunden sind.

  • Laden Sie die neueste   stabile Version des Projekts direkt von der Website herunter  mit
  • Klonen Sie das Git-Repository  mit dem Git-Clone- Befehl
    https://github.com/h5bp/html5-boilerplate.git
  • Installieren Sie es über den   Knotenpaketmanager  mit dem Befehl
    npm install html5-boilerplate

Hier sind einige der Hauptmerkmale, die dieses Projekt sehr interessant machen:

  • Basierend auf   HTML5  ist es einfach, alle neuen Elemente zu verwenden, die durch die neuesten Spezifikationen verfügbar sind.
  • Enthält   CSS  , einen der am häufigsten verwendeten Stile, um CSS zu normalisieren und Diskrepanzen zwischen verschiedenen Browsern zu vermeiden
  • Beinhaltet   jQuery  , integriert über ein CDN und mit lokalem Datei-Fallback bei Netzwerkschwierigkeiten
  • Enthält die Modernizr- Bibliothek   mit einigen Funktionen, die speziell für HTML5 Boilerplate entwickelt wurden
  • Einstellungen für den Apache-Server, die unter anderem die Leistung und Sicherheit der Site stark verbessern
  • CSS enthält die   am häufigsten verwendeten  Medienabfragen
  • Innerhalb der CSS – Dateien finden Sie Helferklassen   , sehr nützlich in verschiedenen Operationen.
  • CSS enthält auch Stile zum Drucken
  • Darin finden Sie den Code, der für Google Analytics bereit ist    , ändern Sie einfach die UA

Dies sind nur einige der Funktionen, die HTML5 Boilerplate bietet. Schließlich garantiert diese Struktur die Kompatibilität zwischen den Browsern.

Obwohl es offensichtlich HTML5 und die neuen Tags unterstützt, kann es naturgemäß nicht mit früheren Versionen von Internet Explorer kompatibel sein     , aber HTML5 Boilerplate schafft es immer noch, die Anforderungen der meisten Browser auf dem Markt zu erfüllen.

Hier ist die vollständige Liste:

  • Chrome    (neueste 2)
  • Edge    (2 zuletzt)
  • Firefox    (2 neueste)
  • Internet Explorer 9+
  • Oper    (2 zuletzt)
  • Safari    (2 zuletzt)

Wie es auch in der   offiziellen Dokumentation steht   , bedeutet dies nicht, dass es nicht mit älteren Browsern kompatibel ist, es hängt alles vom Code ab, den Sie darin verwenden werden. Das Framework selbst ist nichts anderes als ein Container und alle im Index enthaltenen Tags können einfach ersetzt werden.

Schlussfolgerungen

Wie wir gesehen haben, ist HTML5 Boilerplate ein guter Ausgangspunkt für viele Arten von Anwendungen.

Weitere Informationen zum Projekt finden Sie auf   der offiziellen GitHub-Seite   und auf der Website html5boilerplate.com, außerdem können Sie die offizielle Dokumentation   mit allen Tipps für eine einfache, schnelle und unkomplizierte Entwicklung einsehen   .

Die Dokumentation ist im MD-Format geschrieben, sodass Sie sie auch herunterladen und bequem offline lesen können     .

 

Leave a Comment

Your email address will not be published.