Bieten Web-Frameworks wie Bootstrap oder HTML5-Boilerplate Designern (nicht Entwicklern) etwas?

Beachten Sie, dass es hier viel mehr um Design als um Entwicklung geht.

Ich erstelle Websites von Grund auf mit komplett handgeschriebenem CSS und HTML.

Ich kenne schon seit einiger Zeit vorgefertigte CSS-Vorlagen wie Bootstrap oder HTML5 Boilerplate . Ich habe sie in der Vergangenheit kurz angeschaut, bin aber nie dazu übergegangen, sie tatsächlich für irgendetwas zu verwenden. Ich habe keine Probleme beim Zurücksetzen von CSS oder beim Einschließen von Javascript bei Bedarf oder beim Konfigurieren für Ansichtsfenster.

Heute Abend habe ich eine grundlegende HTML5 / CSS-Seite codiert. Nichts wirklich weltbewegendes in Bezug auf Layout. Einfach ein Absprungpunkt. Danach habe ich mich entschlossen, Bootstrap mit dem gleichen Layout einen Whirl zu geben. Es ist eine ziemlich standardmäßige 960px, 3-spaltige Seite mit Heldenbildern.

Als ich Bootstrap ändere, stellte sich heraus, dass mindestens 80% meiner Zeit damit verbracht wurden, zu lernen, welche Klasse oder ID auf etwas angewendet wurde, und dass dies dann im CSS angepasst werden musste. Es wurde klar, dass Bootstrap mich überhaupt nicht retten würde. Tatsächlich würde Bootstrap die Produktionszeiten erheblich verlängern, da das CSS mit * zu vielen Vorlagen erstellt wird.

* (Mit "übermäßig überarbeitet" meine ich, dass es eine Menge CSS gibt, das ich wahrscheinlich nicht für eine bestimmte Website verwenden würde. Nicht, dass es im Großen und Ganzen unnötiges CSS gibt. )

Ich verstehe, dass wenn ich mit Bootstrap vertraut wäre, ich mit Klassen- / ID-Namen und der allgemeinen Position in den Stylesheets vertraut wäre. Also bin ich bereit, mich ein bisschen nach der Zeit zu beugen, die ich gebraucht habe, und zu erkennen, dass ein Teil davon auf meine eigene Unbekanntheit zurückzuführen ist.

Ich frage mich jedoch, ob Bootstrap et. al. sind nur Krücken, die Designer lähmen, indem sie ihnen ihren eigenen Code geben. Sich auf einen Kundenstamm beschränken, der ausschließlich auf Lösungen von Drittanbietern und deren Funktionalität für alles oder zumindest die Mehrheit angewiesen ist. Es erinnert mich an diejenigen, die eine Website nur gestalten können, wenn sie Dreamweaver verwenden können. Und der Himmel verbietet es ihnen, wenn sie keinen Zugriff auf Dreamweaver haben und eine Änderung erforderlich ist.

Beim Erstellen einer Site verwende ich meine eigenen Standardklassen- und ID-Namen. Ich strukturiere CSS so, wie es für mich intuitiv ist. Ich habe meine eigenen vorgefertigten Vorlagen für die schnelle Einrichtung. Daher kann ich jede Site, die ich baue, ziemlich schnell bearbeiten. Eine der vorkonfigurierten Front-End - Pakete mit einfach bedeutet , dass ich lernen müssen , ihre Namenskonventionen und ihre eher Struktur als meine eigenen Berufung auf.

• Kann mir irgendjemand die großen Vorteile von Template-Systemen wie Bootstrap oder HTML5 Boilerplate anpreisen ?
• Was macht sie für Sie wertvoll?
• Kennen Sie sich nur mit dem System aus, mit dem Sie sich leicht zurechtfinden, oder müssen Sie immer noch nach Gegenständen suchen?
• Könnten Sie eine Site ohne sie erstellen, wenn Sie müssten?

Ich habe in den letzten Monaten viel über Frameworks geforscht. Ich habe mich noch nicht mit einer der Lösungen befasst, aber einige Framework-Alternativen, die auf meiner Shortlist stehen , sind Foundation , Intuit und YAML und Base .

Das Gute an diesen ist, dass sie nicht das Bootstrap-Aussehen haben und Designer dazu ermutigen, ihren Job (Design) zu erledigen, während sie sich um die Reaktionsfähigkeit kümmern.

Hier ist eine große Liste von Frameworks und weitere Informationen in diesem Artikel .

Wie bereits erwähnt, habe ich die Nachforschungen angestellt, sie aber noch nicht getestet. Daher sind Kommentare, die sich für eines der Frameworks aussprechen, hilfreich.

Die Vorteile sind in erster Linie:

• Rapid Prototyping (dh Geschwindigkeit)
• Integrierte browserübergreifende Konsistenz

Wenn Sie ein Raster erstellen müssen und das zu erstellende Raster zum vorgefertigten CSS-Framework passt, besteht die Logik darin, dass Sie das Framework auf halbem Weg verwenden.

Trotzdem stimme ich Ihnen eher zu. CSS-Frameworks, IMHO, ähneln visuellen Entwurfsvorlagen. Wenn sie 90% Ihres Ziels erfüllen, sind sie großartig. Wenn sie dies nicht tun, verbringen Sie viel mehr Zeit und Mühe damit, die Standardvorgaben zu ändern, anstatt nur zu erstellen Ihre eigenen von Grund auf neu.

NACHTRAG:

Ich sollte noch einen potenziellen Vorteil hinzufügen:

• Es ist ein dokumentiertes System

In einer Unternehmensumgebung mit möglicherweise mehreren Front-End-Entwicklern und einem mehrjährigen Projekt mit mehreren verschiedenen Front-End-Entwicklerteams kann ein dokumentiertes Framework für die Präsentationsschicht hilfreich sein.

Das heißt nicht, dass Ihr selbst erstelltes Framework nicht dokumentiert werden kann, sondern dass Dokumentation oft keine Priorität hat.

Ich bin mit HTML5 Boilerplate vertraut, aber mit Bootstrap kenne ich mich besser aus, also werde ich darüber sprechen. Denken Sie daran, dass beide auf zwei unterschiedliche Aufgaben ausgerichtet sind (H5BP ist eine reaktionsschnelle normalisierte Vorlage, Bootstrap ist eine Sammlung von HTML / CSS / JS-Widgets und ein reaktionsschnelles Raster). Tatsächlich können sie zusammen verwendet werden .

Ich frage mich jedoch, ob Bootstrap et. al. sind nur Krücken, die Designer lähmen, indem sie ihnen ihren eigenen Code geben. Sich auf einen Kundenstamm beschränken, der ausschließlich auf Lösungen von Drittanbietern und deren Funktionalität für alles oder zumindest die Mehrheit angewiesen ist. Es erinnert mich an diejenigen, die eine Website nur gestalten können, wenn sie Dreamweaver verwenden können. Und der Himmel verbietet es ihnen, wenn sie keinen Zugriff auf Dreamweaver haben und eine Änderung erforderlich ist.

Die Analogie schlägt hier fehl, weil Sie vollen Zugriff auf die Bootstrap-Quelle haben. Wenn Ihnen etwas nicht gefällt, können Sie es ändern. Für mich ist es das Gegenteil einer Krücke - Sie können den Quellcode verwenden, um CSS-Techniken zu erlernen .

Ich bin nicht der Meinung, dass das "Entwerfen einer Website" so nah am Metall sein muss, wie ich glaube, dass C-Codierer genaue Kenntnisse der Assemblersprache benötigen. Auch wenn diese Analogie ins Stocken gerät, da das Anpassen von HTML / CSS lediglich eine Erweiterung der Selektoren und das Hinzufügen der benötigten Elemente ist.

Kann mir irgendjemand die großen Vorteile von Template-Systemen wie Bootstrap oder HTML5 Boilerplate anpreisen?

Das Killer-Feature von Bootstrap ist für mich die konsistente und einfach anzuwendende Widget-Gestaltung und Javascript-Komponenten. Möchten Sie, dass ein Link wie eine Schaltfläche aussieht? Fügen Sie eine '.btn'-Klasse hinzu. Willst du einen Tisch? Fügen Sie eine '.table'-Klasse hinzu. Willst du ein Navigationselement? Richten Sie eine ungeordnete Liste ein und fügen Sie Navigationsklassen hinzu.

Dropdowns, Popovers, Warnungen usw. können Elementen mit Datenattributen problemlos hinzugefügt werden. Bootstrap enthält eine sehr gut aussehende Reihe von Symbolen, die sich leicht in Widgets integrieren lassen.

Was macht sie für Sie wertvoll?

• Kann Websites schnell prototypisieren
• Das Debuggen von Cross-Browser- und Cross-Plattform-CSS wurde für mich durchgeführt.
• Leicht anpassbares CSS mit einer großen Auswahl an Variablen, sodass ich Layouts schnell experimentieren und prototypisieren kann.
• Standard-Navigations-Widgets
• Der Quellcode ist offen und kostenlos. Ich kann meine Hände schmutzig machen und den WENIGER anpassen, wenn ich ein neues Mixin benötige oder das Verhalten nach meinen Wünschen ändere.

Kennen Sie sich nur mit dem System aus, mit dem Sie sich leicht zurechtfinden, oder müssen Sie immer noch nach Gegenständen suchen?

Eines der größten Merkmale von Bootstrap ist die hervorragende Dokumentation . Ich kann es leicht navigieren und CSS-Selektoren sind intuitiv und leicht zu merken.

Könnten Sie eine Site ohne sie erstellen, wenn Sie müssten?

Ja, aber es ist eindeutig mehr Arbeit. Ich kann mich auf UX und schnelle Prototyp-Layouts mit gut aussehenden Widgets und konsistenter Funktionalität konzentrieren.

Das Schöne am Templating von Systemen und Frameworks ist, dass sie Ihnen viel Zeit sparen können, wenn Sie so arbeiten, wie Sie es möchten. Wenn Sie mit Bootstrap erst einmal die Semantik für ein JS-Karussell kennen gelernt haben, ist die Implementierung nahezu strafbar. Außerdem scheint Bootstrap viel einfacher zu werden, wenn Sie entweder Ihre eigenen vor dem Start rollen oder Bootstrap-sass in Rails verwenden, um diese Variablen im laufenden Betrieb zu ändern. Das erspart Ihnen spätere Änderungen.

DA01 spricht über Browserkonsistenz ... das ist ein großer Faktor für mich. Aus diesem Grund verwende ich jQuery, auch wenn eine beliebige Anzahl von Mitarbeitern bei SO daran erinnert, dass das Hinzufügen einer großen Bibliothek, um nur ein paar Dinge zu tun, eine Verschwendung von Ressourcen darstellt. Ich weiß, dass jQuery in bestimmten Browsern funktioniert, und obwohl ich wahrscheinlich selbst eine leichtere Lösung erzielen kann, finde ich es vorteilhafter, zu lernen, wie ich mit jQuery schreiben soll JavaScript und dann mach es auf ihre Weise.

Letztendlich neige ich dazu, HTML / CSS-Frameworks restriktiv zu finden; Ich bin genug von einem Kontrollfreak, den ich immer noch gerne von Hand codiere, wenn ich kann. Aber ich respektiere die Tatsache, dass Leute, die schlauer und fortschrittlicher sind als ich, viel Zeit damit verbracht haben, diese Vorlagen / Frameworks einzurichten.

Arbeiten Sie aus Interesse in einem großen Team für ein großes Unternehmen?

Frameworks wie Bootstrap eignen sich hervorragend, um während eines Projekts einen einheitlichen Codestandard zu erstellen. Wenn Sie neue Entwickler einstellen, sind diese mit einem gängigen Framework bereits vertraut und können viel schneller produktiv werden. Gute Nachrichten für große Unternehmen.

Bei Frameworks wie Bootstrap wird es ständig aktualisiert, indem mehr Bildschirmgrößen, mehr Geräte und bessere Funktionen unterstützt werden. Für ein Unternehmen wie das unsrige (bei dem wir Bootstrap verwenden) ist dies eine wesentliche Kostenersparnis.

Ich gehe davon aus, dass die meisten Antworten von Leuten stammen, die es gewohnt sind, alleine oder in sehr kleinen Teams und bei kleineren Projekten zu arbeiten, bei denen solche Dinge normalerweise kein Problem sind .

Ein weiterer Vorteil dieser Vorlagen ist die geräteübergreifende Konsistenz . Die eingebauten Gitter machen das Entwerfen für jedes Betriebssystem sehr einfach.

Ich ziehe es aus folgenden Gründen immer noch vor, meinen eigenen Code zu schreiben:

• Vertrautheit mit dem, was ich bereits geschrieben habe. Wenn ich etwas ändern muss, weiß ich genau, wo es ist;

• Projektzentrierte Struktur. Jede neue Site / App hat andere Anforderungen als die vorherige, daher müssen Dateien und Ressourcen möglicherweise separat organisiert werden.

• Angepasste Ansichten für verschiedene Geräte.

Wenn Sie keine sehr eingeschränkte Seite erstellen, werden Sie am Ende immer mehr Stile zu neuen Elementen hinzufügen und vorhandene überschreiben.

Da ich gerne mit reaktionsschnellen Designs arbeite, würde ich sie hauptsächlich deshalb nicht verwenden, weil ich es bevorzuge, jeden reaktionsschnellen Schritt "separat" und als Ganzes zu entwerfen. Und diese Vorlagen funktionieren normalerweise mit einem mehr oder weniger starren Raster, das Sie nicht vollständig optimieren können.

Der größte Vorteil ist, dass Sie mit der Größenänderung experimentieren können, anstatt nur zu spekulieren, wie die Dinge aussehen würden.

Ich habe einen sehr "Content First" -Entwicklungsansatz, bei dem ich die Navigation tatsächlich codiere und den Textinhalt hinzufüge. Sie sind häufig Dingen ausgesetzt, die Sie in der Entwurfsphase nicht erwartet haben.

Wenn Sie ein Framework wie Twitter Bootstrap verwenden, können Sie die Seiten tatsächlich testen, während sie noch im Design sind, und möglicherweise sogar Usability-Probleme und andere Probleme bei der Benutzererfahrung aufdecken. Die Frameworks bieten viele wiederverwendbare Klassen, mit denen Sie sich vertraut machen und Zeit sparen können.

Sie haben erwähnt, dass Sie viel von Grund auf neu programmieren. Wenn ich etwas habe, das sehr individuell oder sehr leicht sein muss, nehme ich Skeleton

Früher habe ich alles von Hand codiert, aber heute benutze ich eher Bootstrap. Warum mache ich das?

1. Ich bekomme ein ansprechendes Layout mit sehr wenig Arbeit. Bei einigen der Websites, an denen ich gearbeitet habe, sind nur ein paar kleine Änderungen erforderlich, um ein für Tablets und Handys optimiertes Layout zu erhalten. Die reaktionsschnelle Navigationsleiste ist eine meiner bevorzugten Bootstrap-Komponenten.
2. Die Standardeinstellungen für Browser und Betriebssystem stimmen nicht überein. Ganz zu schweigen davon, dass sie alle hässlich sind, unabhängig davon, welches Betriebssystem oder welchen Browser Sie verwenden. Mit Bootstrap erhalten Sie ein anständiges, einheitliches Aussehen und fühlen sich wenig Arbeit. Wenn Sie trotzdem alle Steuerelemente neu formatieren möchten, spart Bootstrap zwar nicht viel Zeit, aber meiner Erfahrung nach haben Sie die meiste Zeit nicht genug Zeit, um alle Steuerelemente neu zu formatieren, sind aber dennoch irritiert von der hässlichen Standardeinstellung Kontrollen.
3. Englisch: www.mjfriendship.de/en/index.php?op...37&Itemid=32 Das schränkt Ihre Arbeit ein, und das ist auch gut so, denn wenn Sie mit reinem CSS arbeiten, möchten Sie in der Regel jede Kleinigkeit optimieren (Farbe, Randstärke, Farbverlauf, Schatten, Randradius, ...) Übergänge, und die Liste geht weiter), während sie einzeln wenig Zeit in Anspruch nehmen, ist es im Großen und Ganzen eine große Zeitsenke. Wenn Sie an Projekten mit Deadline arbeiten, möchten Sie einschränken, was Sie können und was nicht. Durch die Verwendung von Frameworks können Sie gröberkörnige Komponenten anstelle der zu optimierenden CSS-Eigenschaften verwenden.
4. Einige serverseitige Frameworks sind in Bootstrap integriert. Wenn Sie beispielsweise Django-Bootstrap verwenden, können Sie einfach {{ form|as_bootstrap }}einen Bootstrap-Stil für Formulare festlegen , einschließlich roter Hervorhebungen bei Fehlermeldungen usw.

Als ich Bootstrap ändere, stellte sich heraus, dass mindestens 80% meiner Zeit damit verbracht wurden, zu lernen, welche Klasse oder ID auf etwas angewendet wurde, und dass dies dann im CSS angepasst werden musste.

Da verstehst du es falsch. Wenn Sie von Bootstrap profitieren möchten, sollten Sie nicht zu viele Anpassungen vornehmen. Sie geben die Flexibilität auf, bei der Verwendung vorgefertigter Komponenten alles optimieren zu müssen und zu können. Sie sollten keine Zeit damit verbringen, Holzbretter zu sägen oder zu schnitzen, wenn Sie einen Raum aus IKEA-Komponenten dekorieren.

Bootstrap ist gut, wenn Sie schnell eine funktionierende Website aus vorgefertigten Komponenten patchen müssen. Ihre Komponenten ragen wie Daumenschmerzen heraus, wenn Sie sie in Websites mit ausgefallenen Designs einfügen, sodass ich normalerweise Bootstrap für diese Art von Projekten verwende.

Wenn ich eines der vorkonfigurierten Front-End-Pakete verwende, muss ich einfach deren Namenskonventionen und Struktur kennen lernen, anstatt mich auf meine eigenen zu verlassen.

Das ist eigentlich ein Vorteil der Verwendung eines beliebten Pakets. Es ist einfacher, ein Projekt an einen anderen Entwickler weiterzugeben, wenn Sie beide wissen, was "btn-group", "btn btn-large" mit persönlichen Rahmenbedingungen macht, die sie benötigen würden, um Ihre Besonderheiten zu erfahren (oder häufiger, sie würden einfach kaskadieren) Ihre CSS mit ihren Änderungen, und nicht die Mühe zu versuchen, Ihren Code zu entschlüsseln oder zu ändern).

Kennen Sie sich nur mit dem System aus, mit dem Sie sich leicht zurechtfinden, oder müssen Sie immer noch nach Gegenständen suchen?

Gängige wie btn, table, row *, span * usw. wären natürlich. Bei HTML für Hauptkomponenten ist es jedoch viel schneller, nur die Beispiele zu kopieren und einzufügen, als sie auszutippen.

Könnten Sie eine Site ohne sie erstellen, wenn Sie müssten?

Ich war schon oft dort.

Sie sind nur gut für:

1. Designer, die nicht mit Codierung vertraut sind, aber eine Lösung suchen, um ihre Entwürfe auf eine Website zu bringen.
2. Eine Möglichkeit, die Serienproduktion für jemanden zu optimieren, der kein eigenes Framework erstellen möchte.

persönlich habe ich meine eigenen Methoden und keine Lust, diesen Weg zu gehen, weil ich bereits gelernt habe, wie man CSS, HTML und jQuery codiert. Ich sehe darin einen Vorteil für Leute, die keine Ahnung haben und versuchen zu lernen, wie man programmiert. Es wäre schön gewesen, so etwas vor etwa fünf Jahren zu sehen. Wie Sie bereits ausgeführt haben, würde die Implementierung in Ihre aktuellen Produktionsmethoden länger dauern.

EDIT: Ich versuche nicht, deinen Thread zu überlisten, aber ich frage mich das gleiche, aber in Bezug auf WordPress. Ich habe WordPress nur leicht benutzt, weiß aber nicht, ob ein Framework von Vorteil ist. Ich habe geplant, den altmodischen Weg zu gehen, bis ich einen großen Nutzen finden kann.

Bootstrap ist ein guter Ausgangspunkt für ein responsives Layout. Aber was das Design angeht, finde ich, dass es ziemlich mangelhaft ist. Es macht seinen einen 'Bootstrappy'-Look, der extrem überstrapaziert ist, weil es eine Vorlage ist.

Aber Sie müssen bedenken, wofür Bootstrap gemacht wurde, es sollte Konsistenz für von Twitter erstellte Inhouse-Apps bringen und wenn Sie es dafür verwenden, oder sogar wenn Sie ein Entwickler sind, der das Web schnell aufpeppen möchte app ohne viel nachzudenken, vielleicht als mvp oder prototyp ein wirklich tolles werkzeug.