Beginnen wir mit einer Beobachtung: Ich liebe mich einige Frameworks. Anstatt das Rad komplett neu zu erfinden oder einen Knopf von Grund auf neu zu gestalten, ist es schwer, eine All-in-One-Lösung für Ihre grundlegenden HTML / CSS / JavaScript-Anforderungen zu finden.
Das Problem ist, na ja, genau das habe ich gesagt. Frameworks sind wirklich keine All-in-One-Lösung, oder? Bei all dem haben wir sie modular und einfach anzupassen, manchmal haben sie einfach nicht das, was wir brauchen.
Es ist unmöglich, alle möglichen HTML-Snippets, Element-Styles oder JavaScript-Funktionen zu verwenden, die man möglicherweise benötigt. Aber das kann auch gut sein.
Ein Framework könnte viele Dinge haben, die wir einfach nicht brauchen. Zu meiner frustrierendsten Arbeit gehörte es, die riesigen CSS-Dateien von Bootstrap manuell zu durchsuchen, um ein wenig Code zu ändern, der mein Design zerstörte.
Nehmen Sie zum Beispiel die Navigationsleisten-Komponente von Bootstrap. Es ist großartig, es funktioniert einwandfrei und es sieht gut aus. Aber wenn Sie versuchen, die Art und Weise, wie es aussieht, zu ändern, müssen Sie eine ganze Reihe von Stilen ändern, und es dauert eine Weile, bis Sie alle gefunden haben. Wenn es nur eine horizontale Liste von Links oben auf der Seite ist, die Sie möchten, könnte es einfacher sein, eine neue von Grund auf neu zu programmieren.
Aber hey, die populäreren Frameworks da draußen, insbesondere Bootstrap, haben viele Anpassungswerkzeuge, oder? Ja, und das ist eine großartige Sache, aber die Standardoptionen bieten Ihnen nicht genug Platz zum Arbeiten.
Einfach gesagt, wenn Sie sich auf Kreativität konzentrieren, ist ein massiver Rahmen wahrscheinlich nicht der richtige Weg. Sicher, Sie können es hacken, aber das wird eine Menge Zeit brauchen.
Ein weiteres Problem, auf das ich gestoßen bin: JavaScript Inkompatibilitäten. Als ein Typ, der nicht wirklich ein Programmierer ist, war das schmerzhaft.
Insbesondere gab es dieses eine Mal, als ich versuchte, ein paar jQuery-Plugins in ein auf Foundation basierendes Design zu integrieren. Dies ist kein Deal Breaker für sich allein, aber es ist mehr Zeit für das Debuggen.
Natürlich war das letztes Jahr im letzten Jahr. Ich weiß ehrlich gesagt nicht, was passieren würde, wenn ich dasselbe mit den neuen Versionen des gleichen Frameworks und Plugins versuchen würde, aber es ist immer noch etwas zu beachten.
Zusammenfassend gibt es Zeiten, in denen Frameworks einfach nicht die Antwort sind. Hier kommt das Toolkit ins Spiel, und Sie sollten eines haben.
Ein Toolkit im Kontext dieses Artikels ist ein selbst zusammengestelltes und kuratiertes Set von Tools, Snippets, Plugins und Ressourcen, mit denen Sie Ihre Projekte viel schneller programmieren können. Menschen werden diese Ressourcen oft im Laufe der Zeit finden und an sie gebunden sein. Es ist eine persönliche Sache, und Sie müssen wirklich Ihre eigenen machen.
Ähnlichkeiten
Unterschiede
Der Vorteil eines Toolkits gegenüber einem Framework ist seine Vielseitigkeit. Wie bereits erwähnt, ist ein Rahmen in Projekten, in denen Sie die Grenzen gestalterisch verschieben wollen, oft zu umständlich.
Dieselbe Qualität ist auch der Fall des Rahmens in kleinen bis mittleren Projekten. Erstellen Sie eine Werbe-Zielseite? Eine einseitige Website? Ein einfacher Blog? Dann ist ein Framework wahrscheinlich nur unnötig. Sie sind besser dran, von vorne anzufangen und jedes Detail des Projekts zu machen.
Ich würde so weit gehen, zu sagen - das ist nur meine Meinung -, dass die meisten Content-getriebenen Websites keinen vollwertigen Rahmen benötigen. Die Ausnahme wäre für massive Sites, wie ars technica beispielsweise. Für etwas so Großes sollten Sie ein Framework verwenden, aber Sie sollten es wahrscheinlich selbst entwickeln, um die genauen Bedürfnisse der Website zu erfüllen.
Wo Frameworks wie Bootstrap und Foundation wirklich glänzen, sind Web-Anwendungs-Entwicklung und App-gesteuerte Websites. In diesen Projekten kommen die relativ starren Bedingungen zum Tragen, anstatt sie zu verlangsamen.
Das Erstellen eines eigenen Toolkits ist eine Frage von Zeit, Geduld und Erfahrung. Ich meine, sicher, du könntest einfach eine Suche nach "Webdesign-Ressourcen" machen. Sie würden Tausende und Abertausende von Treffern erhalten und in ein paar Stunden könnten Sie mehr Code herunterladen, als Sie jemals verwenden könnten.
Aber das ist kein Toolkit. Das ist eine Bibliothek, die du nie anfassen wirst, weil das Sortieren viel zu lange dauern würde. Wir sind sehr beschäftigt, also habe ich einen eher organischen Ansatz gewählt: Wenn ich auf ein Problem stoße, google ich es.
Snippets sind oft zu lang, um sie auswendig zu lernen. Wenn ich also immer wieder nach dem gleichen Ding suche, füge ich es meinem Toolkit hinzu. Das gleiche gilt für Software: Wenn Sie wissen, dass Sie viel verwenden werden, fügen Sie es hinzu.
Das soll nicht heißen, dass du dir nie die Zeit nehmen solltest, einfach mit neuen "Spielzeugen" zu experimentieren ... du solltest. Wenn Sie etwas über eine bestimmte Ressource erfahren, die die Art und Weise, wie Sie arbeiten, zum Besseren verändern können, überprüfen Sie es auf jeden Fall. Aber denken Sie daran, dass Toolkits besser relativ klein gehalten werden. Sie sollten sich darauf konzentrieren, nur das zu behalten, was Sie benötigen, um die Bedürfnisse zu erfüllen, denen Sie regelmäßig begegnen.
Auch hier wiederhole ich, dass Toolkits etwas sind, das Sie selbst machen müssen, um Ihre eigenen Bedürfnisse zu erfüllen. Dennoch werde ich die Dinge in meinem Toolkit auflisten, um Ihnen eine bessere Vorstellung davon zu geben, wonach Sie suchen sollten, wenn Sie Ihre eigenen erstellen.
CSS-Pre-Prozessoren wie WENIGER und SASS zwei Dinge tun:
Wenn Sie nicht bereits versucht haben, CSS mit einem Preprozessor zu codieren, bitte ich Sie, dies jetzt zu tun. Jetzt sofort. Ich werde warten.
Eine gut organisierte Liste von Lesezeichen kann sehr nützlich sein, wenn Sie etwas benötigen, das Sie nicht auf Ihrer lokalen Festplatte speichern können. Ich buche Dinge wie CSS3-Generatoren , Sprite-Generatoren , Farbschema-Ersteller und andere Tools, die mir helfen, schnell Aufgaben zu erledigen, die nur noch viel länger dauern, wenn Sie sie manuell ausführen.
Grid-Systeme sind so 2000er Jahre. Seit Responsive Web Design zu einer echten Sache geworden ist, sind Grid-Systeme immer komplexer geworden, um die Bedürfnisse unzähliger Geräte zu erfüllen.
Und was ist, wenn Sie ein benutzerdefiniertes Rastersystem benötigen? Sie könnten einen der vielen Online-Responsive-Grid-System-Generatoren treffen, aber sie sind begrenzt.
Die Lösung kommt in Form von semantische.gs . Jetzt, während der eigene Autor es ein Rastersystem nennt, wähle ich es eine Layout-Engine, weil es kein Raster ist. Es ist ein Werkzeug, das auf der CSS-Vorverarbeitung basiert (Sie können es mit LESS, SASS und Stylus verwenden), und es ermöglicht Ihnen, jedes Raster zu erzeugen, das Sie mögen, fixed-width oder responsive, on the fly.
Sie müssen lediglich einige Zahlen in einer .less- (oder SASS- usw.) Datei ändern und loslegen.
Emmet ist eine Sammlung von Plugins, die Abkürzungen zu vollständigen Codezeilen machen, sowohl in HTML als auch in CSS.
Im Grunde macht es folgendes:
div>ul>li*3>aDas mögen:
- https://github.com/purplefish32/sublime-text-2-wordpress" class=external rel=nofollow> dieses für WordPress . WordPress Vorlagen Funktionen und Optionen für functions.php kann schwer zu merken sein, so ist dies ein Lebensretter.
jQuery-Plugins
Wie ich schon sagte, ich bin kein richtiger Programmierer. Wenn also jede Art von fortgeschrittener Animation oder UI-Funktionalität erforderlich ist, aber nicht so sehr, um ein Framework wert zu sein, wende ich mich an einzelne Plugins.
Einige meiner Favoriten sind:
- Scrollto.js : ein reibungsloses Scroll-Skript.
- IDTabs : wenn Sie irgendeine Art von Benutzeroberfläche mit Tabs benötigen.
- Supersized : wenn Sie eine ganze Seite Diashow benötigen.
- ResponsiveSlides.js : was der Name sagt. Es ist ein reaktionsfähiger Bildschieberegler. Was willst du mehr?
Es ist nie zu früh, um eine eigene persönliche Bibliothek nützlicher Dinge zu haben.
Welche Werkzeuge möchten Sie in Ihrem Toolkit sehen? Auf welche Ressourcen könntest du nicht verzichten? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Mathematiker Toolkit Bild über Marc Kjerland.