Laten we beginnen met een opmerking: ik hou van me een aantal kaders. Als een alternatief voor het volledig opnieuw uitvinden van het wiel of het opnieuw stylen van een knop, is het opnieuw moeilijk te verslaan met een alles-in-een oplossing voor uw standaard HTML / CSS / JavaScript-behoeften.
Het probleem is, nou, het is wat ik daarnet zei. Frameworks zijn echt geen alles-in-één oplossing, toch? Voor al dat we ze modulair hebben gemaakt en eenvoudig aan te passen, hebben ze soms niet wat we nodig hebben.
Het is onmogelijk om alle mogelijke HTML-fragmenten, elementenstijlen of javascript-functies op te nemen die u mogelijk nodig zou kunnen hebben. Maar dat kan ook een goede zaak zijn.
Een raamwerk kan veel dingen hebben die we gewoon niet nodig hebben. Een van mijn meest frustrerende werk was ooit het handmatig doorzoeken van de enorme CSS-bestanden van Bootstrap om een klein beetje code te veranderen dat grote schade aan mijn ontwerp toebracht.
Neem gewoon de navigatiebalkcomponent van Bootstrap, bijvoorbeeld. Het is geweldig, het werkt perfect, en het ziet er goed uit. Maar als je de manier waarop het eruit ziet op grote schaal probeert te veranderen, moet je heel wat stijlen wijzigen en duurt het een tijdje om ze allemaal te vinden. Als het slechts een horizontale lijst met koppelingen boven aan de gewenste pagina is, is het misschien eenvoudiger om een nieuwe vanaf nul te coderen.
Maar goed, de meer populaire frameworks die er zijn, in het bijzonder Bootstrap, hebben veel aanpassingsgereedschap, toch? Ja, en dat is een goede zaak, maar de standaardopties geven je niet voldoende ruimte om te werken.
Simpel gezegd, als je je focust op creativiteit, is een enorm framework waarschijnlijk niet de juiste keuze. Natuurlijk kun je het hacken, maar dat kost veel tijd.
Nog een probleem dat ik tegenkwam: JavaScript-compatibiliteitsproblemen. Als een man die niet echt een programmeur is, was dit pijnlijk.
In het bijzonder was er deze keer dat ik probeerde een paar jQuery-plug-ins te integreren in een ontwerp op basis van Foundation. Dit is niet alleen een dealbreaker, maar het is meer tijd om te debuggen.
Natuurlijk was dit vorig jaar enige tijd. Ik weet eerlijk gezegd niet wat er zou gebeuren als ik hetzelfde zou proberen met de nieuwe versies van hetzelfde framework en plug-ins, maar het is nog steeds iets om over na te denken.
Kortom, er zijn momenten waarop frameworks simpelweg niet het antwoord zijn. Hier komt de toolkit binnen, en je zou er een moeten hebben.
Een toolkit is, in de context van dit artikel, een zelfverzamelde en samengestelde set gereedschappen, fragmenten, plug-ins en bronnen waarmee u uw projecten sneller kunt coderen. Mensen zullen deze middelen vaak na verloop van tijd vinden en eraan gehecht raken. Het is een persoonlijk iets en je moet het echt zelf maken.
overeenkomsten
verschillen
Het voordeel van een toolkit boven een raamwerk is de enorme veelzijdigheid. Zoals eerder vermeld, in projecten waar je ontwerpsgewijs de grenzen wilt verleggen, is een raamwerk vaak gewoon te omslachtig.
Diezelfde kwaliteit is ook de ondergang van het framework in kleine tot middelgrote projecten. Bouwt u een promotie-bestemmingspagina? Een website van één pagina? Een eenvoudige blog? Dan is een raamwerk waarschijnlijk gewoon niet nodig. Je bent beter af te beginnen vanaf nul, en elk detail van het project van jezelf te maken.
Ik zou zo ver willen gaan om te zeggen - dit is gewoon mijn mening - dat de meeste inhoudgestuurde websites geen volledig kader behoeven. De uitzondering zou zijn voor enorme sites, zoals ars technica bijvoorbeeld. Voor zoiets groots zou je een framework moeten gebruiken, maar je zou het waarschijnlijk zelf moeten ontwikkelen om aan de exacte behoeften van de website te voldoen.
Waar frameworks als Bootstrap en Foundation echt schijnen, is in webapplicatieontwikkeling en app-gestuurde websites. Het is in deze projecten dat de relatief rigide beperkingen van pas komen, in plaats van je te vertragen.
Het maken van je eigen toolkit is een kwestie van tijd, geduld en ervaring. Ik bedoel, natuurlijk kun je gewoon gaan zoeken naar 'webontwerpmiddelen'. Je krijgt duizenden en duizenden hits en binnen een paar uur kun je meer stukjes code downloaden dan je ooit zou kunnen gebruiken.
Maar dat is geen toolkit. Dat is een bibliotheek die je nooit zult aanraken, omdat het doorzoeken ervan veel te lang zou duren. We zijn drukbezette mensen, dus ik heb hier een meer organische benadering gekozen: als ik een probleem tegenkom, google ik het.
Fragmenten zijn vaak te lang om te onthouden, dus als ik merk dat ik herhaaldelijk op zoek ben naar hetzelfde, dan voeg ik het toe aan mijn toolkit. Hetzelfde geldt voor software: als u iets weet dat u veel gaat gebruiken, voegt u het toe.
Dat wil niet zeggen dat je nooit tijd moet reserveren om gewoon te experimenteren met een paar nieuwe "speeltjes" ... je zou het moeten doen. Als je hoort over een bepaalde hulpbron die de manier waarop je werkt ten goede kunt veranderen, kijk er dan vooral naar. Maar vergeet niet dat toolkits beter relatief klein gehouden kunnen worden. U moet zich concentreren op het houden van alleen wat u nodig heeft om aan de behoeften te voldoen die u regelmatig tegenkomt.
Nogmaals, ik herhaal dat toolkits iets zijn dat je zelf moet maken om aan je eigen behoeften te voldoen. Toch ga ik de dingen in mijn toolkit opnoemen om u een beter idee te geven van waar u naar moet zoeken terwijl u uw eigen maakt.
CSS-pre-processors zoals MINDER en SASS twee dingen doen:
Als je nog geen coderings-CSS hebt geprobeerd met een pre-processor, dan verzoek ik je dat nu te doen. Direct. Ik zal wachten.
Een goed georganiseerde lijst met bladwijzers kan zeer nuttig zijn wanneer u iets nodig hebt dat u niet op uw lokale harde schijf kunt opslaan. Ik bladwijzer dingen zoals CSS3-generatoren , sprite-generators , makers van kleurenschema's en andere hulpmiddelen waarmee ik snel taken kan uitvoeren die net zo veel langer in beslag nemen als u ze met de hand doet.
Rastersystemen zijn zo 2000s. Sinds het responsieve webontwerp een feit is geworden, zijn roostersystemen steeds complexer geworden om aan de behoeften van talloze apparaten te voldoen.
En wat als u een aangepast rastersysteem nodig heeft? Je kunt een van de vele online reactieve generators voor het rastersysteem raken, maar ze zijn beperkt.
De oplossing komt in de vorm van semantic.gs . Nu, terwijl de eigen auteur het een rastersysteem noemt, kies ik ervoor om het een lay-outmachine te noemen, omdat het niet één raster is. Het is een tool die is gebaseerd op CSS-voorbewerking (je kunt het gebruiken met LESS, SASS en Stylus) en het stelt je in staat om elk gewenst rooster, vaste breedte of snel reagerend te genereren.
Het enige wat u hoeft te doen is enkele getallen in een .less (of SASS, etc) bestand te veranderen en te gaan.
mier is een verzameling plug-ins die afkortingen in volledige coderegels veranderen, zowel in HTML als in CSS.
Kortom, het wordt dit:
div>ul>li*3>aIn dit:
- https://github.com/purplefish32/sublime-text-2-wordpress" class=external rel=nofollow> deze voor WordPress . De sjablonen en opties van WordPress voor functions.php kunnen moeilijk te onthouden zijn, dus dit is een reddingsboei.
jQuery-plug-ins
Zoals ik al eerder zei, ben ik geen echte programmeur. Dus als er enige vorm van geavanceerde animatie of UI-functionaliteit vereist is, maar niet zozeer om een raamwerk de moeite waard te maken, ga ik naar individuele plug-ins.
Sommige van mijn favorieten zijn:
- Scrollto.js : een soepel scrollen script.
- idTabs : voor wanneer u een gebruikersinterface met tabbladen nodig heeft.
- supersized : voor als u een diavoorstelling van een hele pagina nodig heeft.
- ResponsiveSlides.js : wat de naam zegt. Het is een responsieve beeldschuifregelaar. Wat wil je nog meer?
Het is nooit te vroeg om je eigen persoonlijke bibliotheek met nuttige dingen te hebben.
Welke hulpmiddelen zou u graag in uw toolkit zien? Met welke middelen zou je niet kunnen leven zonder? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, wiskundige toolkit afbeelding via Marc Kjerland.