Responsive Design: Welches Framework soll ich verwenden? CSS3 & HTML5


7

Ich habe nach einem geeigneten Satz von HTML5 / CSS3-Gründungsdateien gesucht, um neue Projekte zu starten. Ich habe angefangen, meine eigenen Dateien zusammenzusetzen, aber ich glaube, ich könnte besser dazu dienen, ein solides und ziemlich kompatibles (mit mir) CSS3 / HTML5-Framework zu finden und dann bestimmte Dinge zu optimieren, die möglicherweise nicht am besten zu meinem eigenen Prozess passen.

Ich würde gerne etwas finden, das reaktionsschnell ist und Aspekte umfasst, die sich auf Layout, Typ (hor- und vert-Baselines), Form- und Schnittstellenkomponenten, browserübergreifende Probleme konzentrieren und vorzugsweise auf etwas anderem als einem einfachen CSS-Reset basieren, aber Dazu gehört, dass Elemente konsistent über alle Browser hinweg neu erstellt werden, um eine saubere Arbeit zu gewährleisten. Zusätzliche Funktionen wie Polyfills oder andere sind großartig, ebenso wie gute Dokumentationen und Beispiele.

Bisher weiß ich von oben,

  • Skelett
  • 1140 Gitter
  • 320 & Up (plus BP)
  • HTML5 Boilerplate 2.0 und Mobile
  • Inuit.css
  • Weniger Rahmen
  • Fluir
  • Perkins.Less
  • Ein paar WP-Themen

Gibt es eine großartige, von der ich nichts weiß? Ich arbeite viel in WP und etwas, das sich leicht integrieren lässt (aber auch für sich allein steht), ist ideal. Plugins und Wide-Set-Funktionen bei gleichzeitiger Beibehaltung der Möglichkeit, sie bei Bedarf zu reduzieren (Flexibilität), sind ebenfalls ein großes Plus und entsprechen einem schnelleren Lernen, da ich sofort mit dem beginnen möchte, was ich finde.

Was sind einige der besseren Optionen, die ihr vielleicht empfehlen könnt? Systeme oder Skripte, Plugins und andere verwandte Tools sind ebenfalls willkommen. Danke!

Antworten:


5

Joni Korpi, Erfinder des 'Less'-Frameworks, hat gerade sein ' Golden Grid System 'veröffentlicht , ein adaptives Framework, das sich durch elastische Dachrinnen und ein zoombares Grundlinienraster auszeichnet.

Darüber hinaus haben Sie jedoch die beliebtesten erwähnt. Wenn sie Ihren Anforderungen nicht entsprechen, sollten Sie überlegen, ein eigenes Framework zu erstellen. Zwei Bücher, die ich empfehle, helfen:

Wenn Sie Ihr eigenes Framework (oder Ihre Startvorlage) erstellen, lernen Sie viel und erhalten etwas, das Ihren spezifischen Vorlieben und Anforderungen entspricht. Frameworks können großartig sein, aber am Ende nehmen Sie häufig viele Änderungen vor, um sie an Ihre Bedürfnisse anzupassen. Warum nicht einfach von vorne anfangen?


Ich habe mich ein bisschen vom Codieren entfernt und bin in diesem Jahr bei mehreren Projekten mit dem Kopf voran gesprungen. Deshalb würde ich etwas vorziehen, das es schon gibt, während ich wieder im Spiel bin. Ich würde es sowieso als Ausgangspunkt verwenden, um meine eigenen Boilerplate-Dateien zu erstellen, Teile zu schneiden und andere hinzuzufügen, aber ich möchte, dass eine solide Basis sofort verwendet wird, da ich nicht den Luxus habe, Ewigkeiten zu brauchen, um alle Elemente zu erstellen Ich würde gerne. Haben Sie auch eine Meinung dazu, ob einer von ihnen besser für die Überarbeitung bestehender Websites geeignet ist?
Jayhal

@ Jayhal Lass uns ein Auto entwerfen, ich frage mich, was die perfekte Form für ein Rad ist.

3

Twitter Bootstrap ist ein großartiges Framework zum Aufbau von http://twitter.github.com/bootstrap/. Eine Sache, die Sie beachten sollten, ist, was Sie erstellen möchten. Wenn WordPress den Großteil der Funktionen ausführen kann, nach denen Sie in einer App suchen, müssen Sie sich die WP-Vorlagen ansehen.

Wenn Sie eine App von Grund auf neu erstellen, sind Twitter-Bootstrap und einige andere, die Sie aufgelistet haben, gut. Ich verwende WordPress als Frontend, um den Inhalt unserer Website zu verwalten, aber das Backend ist ein Zend-Framework mit jquery ui (Übergang zum nächsten Commit für Bootstrap).


2

Ich habe die letzte Woche mit denen gearbeitet, die du erwähnt hast. Ich habe auch Bootstrap von Twitter, HTML5 Boilerplate Mobile und Foundation von ZURB ausprobiert. Sie schienen alle aufgebläht und mehr als ich wirklich wollte.

Ich fing an, gegabelte Projekte von all denen zu suchen, die mich auf Github interessierten. Dann habe ich die besseren Teile aus allen oben genannten "Frameworks" genommen, um etwas für mich selbst zu bauen. Am Ende hatte ich Normalize.css anstelle von Meyers Reset. Preboot.less Bootstrap mit vielen .LESS Mixins. Einige Komponenten aus dem Twitter Bootstrap. Und fügen Sie sie alle in das reaktionsschnelle .LESS 960-inspirierte Framework von Semantic.gs ein.

Ich könnte nicht glücklicher sein!

Das Beste daran ist, dass ich jede einzelne Codezeile in all meinen Dateien kenne und sie im Vergleich zu den anderen tatsächlich sehr klein ist.

Sie könnten einfach besser dran sein, so etwas zu tun. Auch ich war gegen die Idee, das Rad neu zu erfinden. Aber ich wollte wirklich etwas, das ich selbst nennen kann.


1

Ich benutze die 960gs jetzt schon eine Weile und habe mich ziemlich daran gewöhnt. Ich mag die Abmessungen und die einfache Möglichkeit, schnell gute Layouts zu erstellen.

Jetzt mit all den neuen Geräten sind die 960gs für mich etwas veraltet, da sie nicht immer auf jedes Gerät passen. Und ich war auch kein Fan von Javascript, um den Browser aufzuspüren und dann das CSS dafür zu laden.

Responsive Wesbites sind eine großartige und elegante Lösung, um das Problem der verschiedenen Geräte zu beheben. Da ich es gewohnt war, die 960gs zu verwenden, suchte ich nach etwas Ähnlichem, und das Skeleton-Framework erwies sich für mich als Gewinner. Es wird lediglich eine reaktionsfähige Ebene für das 960-System angezeigt.

Eine Sache, die ich auch mag, ist die Tatsache, dass es 4 feste angegeben hat. Bei einigen Frameworks ändert sich das Layout bei jeder einzelnen Browsergröße. Das Skelett-Framework rastet nur in 4 Zuständen ein.

Ein Nachteil des Bürgermeisters, den ich festgestellt habe, ist, dass der Pinch-Zoom nicht mit den Frameworks funktioniert. Die Größe des Bildschirms wird geändert, aber die Farbe bleibt gleich.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.