Heute schauen wir uns ein neues Projekt aus dem Enavu Network an, genannt 52 Framework.
Es behauptet, das erste Framework zu sein, das speziell für HTML5 und CSS3 entwickelt wurde. Im Folgenden betrachten wir einige der grundlegenden Funktionen und schauen uns den Code an, um herauszufinden, was wir finden können.
Zu Frameworks
Frameworks sind ein interessantes Thema. Einige Entwickler schwören absolut auf sie und gehen sogar so weit zu sagen, dass keine Webseite jemals ohne eine gestartet werden sollte, andere Entwickler betrachten sie als unnötige Komplikationen, die den sonst recht einfachen Code überflüssig machen.
Ich bin persönlich irgendwo dazwischen. Ich stimme definitiv zu, dass viele Frameworks, wenn sie unverändert bleiben, eine Menge Flusen enthalten, die weggeworfen werden könnten. Ich finde sie aber auch sehr nützlich und zeitsparend.
Der Schlüssel ist die Anpassung. Jedes Framework, das Sie im Internet finden, wurde von jemandem erstellt, der einen anderen Workflow hat als Sie selbst und auch eine andere Art, über Websites und deren Struktur nachzudenken. Dies ist einer der Hauptgründe, warum Frameworks so belastet sind: Sie können also auf alle Bedürfnisse eingehen. Jede kleine Datei und jeder Code, der im Download enthalten ist, ist nicht für jede Person gedacht, sie dient lediglich als Ausgangspunkt für Ihren persönlichen Rahmen.
Wenn Sie sich das Auto eines anderen Mieters ausleihen, springen Sie nicht einfach hinein und fahren. Sie stellen den Fahrersitz und die Spiegel nach Ihren Wünschen ein. Erwarten Sie auf die gleiche Weise nicht, dass Sie sich einfach ein vorgefertigtes Framework holen und damit arbeiten. Schritt eins sollte sein, alles durchzugehen und herauszufiltern, was Sie nie brauchen werden. Schritt zwei sollte darin bestehen, fehlende Elemente hinzuzufügen, die Sie immer benötigen. Schritt drei sollte darin bestehen, die Dinge zu optimieren, die Sie für Ihren eigenen Gebrauch leicht ändern müssen.
Während wir uns in das untenstehende Framework einarbeiten, denken Sie über jeden Teil nach und wie Sie ihn an Ihre speziellen Bedürfnisse anpassen könnten.
Der 52 Rahmen
Das 52 Framework ist ein neues und sehr in der Entwicklung befindliches Framework, das speziell für die Verwendung von HTML5 und CSS3 auf browserübergreifende, standardkonforme Weise entwickelt wurde.
Zu früh?
HTML5 und CSS3 sind noch immer neue Technologien. Ist es nicht zu früh, um Frameworks für sie zu erstellen? Absolut nicht. Die Unterstützung für diese beiden neuen Standards nimmt rapide zu und wird von einer großen Anzahl von Entwicklern angeheizt, die einfach nicht warten konnten, sie umzusetzen.
Ob es nun an der Zeit ist, HTML5 und CSS3 zu verwenden, ist eine weitere Debatte. Die Idee ist, es ist der perfekte Zeitpunkt, um mit dem Aufbau von Systemen zu beginnen, um deren Verwendung in naher Zukunft zu erleichtern. Es wird nie eine Zeit geben, in der Webstandards nicht mehr weiterentwickelt werden und somit das perfekte Klima für die Schaffung von Rahmenbedingungen geschaffen wird. Anstatt zurückzufallen, sollten Werkzeuge wie diese mit den neuen Technologien Schritt halten und sich mit ihnen entwickeln. Auf diese Weise, da die Entwickler entscheiden, dass es tatsächlich an der Zeit ist, HTML5 und CSS3 zu implementieren, sind die Tools bereits vorhanden.
Der Download
Wie Sie sehen, hat das Framework eine recht kleine Dateigröße, selbst mit den enthaltenen PSDs, die offensichtlich auf Site-Basis entfernt werden können.
Der Download besteht aus drei CSS-Dateien, zwei HTML-Dateien, einer JS-Datei, einem JPG und zwei PSDs. Wir werden einen Blick auf die Rolle werfen, die jedes dieser Spiele in der folgenden Erklärung spielt.
Die Demo-Datei
Wenn Sie das Framework heruntergeladen haben, öffnen Sie index.html. Dies ist das Herzstück des gesamten Frameworks und ich möchte die meiste Zeit damit verbringen, zu diskutieren.
Wie Sie sehen, hilft Ihnen das Framework dabei, eine Reihe der häufigsten Elemente einzurichten. Ihre Header-Tags (h1, h2 und h3) sind zusammen mit der grundlegenden Typografie der Seiten gestaltet. Die Formularelemente sind sofort einsatzbereit und verfügen über ein benutzerdefiniertes Schaltflächendesign, es gibt eine Methode zum Anzeigen von Code und sogar eine Reihe zusätzlicher Stile für verschiedene Elemente wie kräftig, fett, kursiv, eingefügter Text, großer Text usw.
Der Code
Um einen besseren Überblick über die Inhalte der Demo-Datei zu erhalten, können Sie den Code unter der Haube nachschlagen. Wir werden dieses Stück unten Stück für Stück analysieren.
DOKTYP
Das erste, was Sie in der .html-Datei sehen, ist der neue, sehr einfache HTML5-DocType.
Dies ist eine Muss-Anweisung, die Browser anweist, wie Sie Ihren Code interpretieren. Es ist schön und prägnant und ich bevorzuge es gegenüber früheren, komplizierteren Versionen.
JavaScript
Als Nächstes sehen Sie einen Link zu einer externen JavaScript-Datei.
Machen Sie sich keine Sorgen, Sie müssen keine einzige JavaScript-Zeile verstehen, um dieses Framework verwenden zu können. Der mitgelieferte JS verwendet lediglich ein paar Zeilen Code, um Unterstützung für neue Elemente in älteren Browsern zu erstellen. Es ist ein netter Trick, mit dem Sie eine Menge HTML5 nutzen können, ohne sich Gedanken darüber machen zu müssen, wen Sie zurücklassen.
Semantik
Das nächste, was Sie zu diesem Dokument beachten sollten, ist, wie der HTML-Code aufgebaut ist. Es verwendet das neue semantische Markup, dem Sie bereits folgen sollten. Hier ist eine extrem vereinfachte, reduzierte Version der Struktur.
Wie Sie sehen, werden hier einige neue HTML5-Elemente verwendet. Die Seite ist in Kopf-, Navigations-, Seiten-, Artikel-, Code- und Fußzeilenbereiche unterteilt. Mit Hilfe des Frameworks bieten diese Elemente die grundlegende Struktur für alles, was Sie erstellen. Beachten Sie, dass viele Teile, für die Sie normalerweise divs erstellen, native Unterstützung in HTML5 haben.
Wenn Sie das 52 Framework verwenden, werden Sie gezwungen, Ihre Seiten mit diesen neuen Elementen zu erstellen. Daher ist es eine gute Möglichkeit, zu gegebener Zeit in HTML5 einzusteigen.
Reset und Rastersystem
Das Framework enthält drei CSS-Dateien: general, grid und reset.Die Reset-Datei ist ziemlich einfach und ist im Wesentlichen eine modifizierte Version des beliebten Eric Meyer CSS-Reset. Diese Version wurde von Richard Clark erstellt.
Das Raster-CSS ist vorhanden, da dieses Raster, wie jedes gute Framework, stark verwendet.
Es ist definitiv nichts bahnbrechend, es ist im Grunde ein 16-Spalten-960-Rastersystem, genau wie Sie es von anderen Frameworks gewohnt sind. Die verfügbaren Spalten variieren in der Breite von 40 Pixel bis zu 940 Pixel und enthalten jeweils einen linken und einen rechten Rand von 10 Pixel.
Allgemeines CSS
Das primäre CSS enthält eine Reihe hilfreicher Stile, um den Einstieg zu erleichtern. Alles in dem oben genannten HTML-Code enthält bestimmte Stile sowie einige andere grundlegende Elemente wie Float-Clearing-Klassen und Block-Anführungszeichen.
Eine nette Funktion dabei ist, dass Sie die Auswahlfarbe einer Webseite so einstellen können, dass die Browser-Standardeinstellung außer Kraft gesetzt wird. Das heißt, wenn Sie eine Textzeile auswählen, wird die Farbe, die Sie definieren, hervorgehoben.
In den Fieldset-Styles finden Sie einige Styles zum Erstellen dieser beliebten CSS3-Ecken.
In dem in der HTML-Datei enthaltenen eingebetteten CSS wird schließlich noch mehr CSS3 zum Erstellen von Schatten angezeigt.
Da kommt noch mehr
Wie bereits gesagt, befindet sich das 52 Framework definitiv noch am Anfang und wird weiter wachsen und sich verbessern. Zum Beispiel hat die neueste Betaversion Unterstützung für Canvas- und Videoelemente hinzugefügt.
Ich möchte, dass CSS für abgerundete Ecken und Schatten aus bestimmten Elementen in allgemeine Klassen oder auffälligere Beispielelemente gezogen wird, sodass Sie nicht im Code nach ihnen suchen müssen, wenn Sie sie als Starter verwenden möchten deine eigenen Stile
Abgesehen davon denke ich, dass das Framework einen guten Anfang hat und ich kann mich wirklich darauf konzentrieren, etwas zu schaffen, das perfekt für meinen eigenen Gebrauch ist.
Was würdest du ändern?
Hinterlassen Sie unten einen Kommentar und sagen Sie uns Ihre Meinung zum 52 Framework. Was magst du daran? Was hasst du? Die Entwickler suchen nach Vorschlägen für hinzuzufügende Funktionen, also listen Sie alle auf, die Ihnen in den Sinn kommen!