Låt oss börja med en observation: Jag älskar mig några ramar. Som ett alternativ till att helt återuppfinna hjulet, eller om du klipper en knapp från början, är det svårt att slå med en allt-i-ett-lösning till dina grundläggande HTML / CSS / JavaScript-behov.
Problemet är, ja det är vad jag sa där uppe. Ramar är verkligen inte en allt-i-ett-lösning är de? För allt som vi har gjort dem modulära och lätta att anpassa, ibland har de bara inte vad vi behöver.
Det är omöjligt att inkludera alla möjliga HTML-kod, elementstil eller javascript-funktion som man kan behöva. Men då kan det också vara en bra sak.
En ram kan ha många saker som vi inte behöver. Några av mitt mest frustrerande arbete som någonsin varit involverade manuellt söka igenom Bootstraps massiva CSS-filer för att ändra en liten bit kod som orsakade kaos på min design.
Ta bara Bootstraps navigationsfält komponent till exempel. Det är bra, det fungerar felfritt, och det ser bra ut. Men om du försöker ändra hur det ser ut på någon större sätt, måste du byta en hel del stilar, och det tar ett tag att hitta dem alla. Om det bara är en horisontell lista över länkar längst upp på sidan du vill kan det vara enklare att koda en ny från början.
Men hej, de mer populära ramarna där ute, Bootstrap i synnerhet, har många anpassningsverktyg, eller hur? Ja, och det är en bra sak, men standardalternativen ger dig inte tillräckligt med utrymme att arbeta.
Enkelt uttryckt, om du fokuserar på kreativitet, är en massiv ram sannolikt inte vägen att gå. Visst kan du hacka det, men det kommer att ta mycket tid.
Ett annat problem som jag har stött på: JavaScript-inkompatibiliteter. Som en kille som inte är en programmerare var det smärtsamt.
Specifikt var det här en gång när jag försökte integrera ett par jQuery-plugins till en design baserad på Foundation. Det här är inte en avbrottsbrytare på egen hand, men det är mer tid att felsöka.
Självklart var det här någon gång i fjol. Jag vet inte riktigt vad som skulle hända om jag försökte samma sak med de nya versionerna av samma ramar och plugins, men det är fortfarande något att tänka på.
Sammanfattningsvis finns det tillfällen då ramar helt enkelt inte är svaret. Det här är redskapet som kommer in, och du borde ha en.
En verktygslåda, i sammanhanget med den här artikeln, är en självuppsamlad och kuratorisk uppsättning verktyg, utdrag, plugins och resurser som låter dig koda dina projekt så mycket snabbare. Människor hittar ofta dessa resurser över tid och blir knutna till dem. Det är en personlig sak, och du måste verkligen göra din egen.
Likheter
skillnader
Fördelen med en verktygslåda över en ram är dess rena mångsidighet. Som sagt tidigare, i projekt där du tänker trycka gränserna design-vis, är en ram ofta bara för besvärlig.
Samma kvalitet är också rammens fall i små till medelstora projekt. Byggar du en marknadsföringskampanj? En sida på en sida? En enkel blogg? Då är en ram sannolikt bara onödig. Du är bättre att börja från början och göra varje detalj i projektet ditt.
Jag skulle gå så långt som att säga - det här är bara min åsikt - att de flesta innehållsdrivna webbplatser inte behöver en heltäckande ram. Undantaget skulle vara för massiva platser, som ars technica till exempel. För något som är stort bör du använda en ram, men du borde noga utveckla den från början för att möta webbplatsens exakta behov.
Där ramverk som Bootstrap och Foundation verkligen lyser är i webbapplikationsutveckling och appdrivna webbplatser. Det är i dessa projekt att de relativt stela begränsningarna kommer till nytta, istället för att sakta ner dig.
Att skapa din egen verktygslåda är en fråga om tid, tålamod och erfarenhet. Jag menar, du kan bara gå och söka efter "webbdesignresurser". Du skulle få tusentals träffar, och om några timmar kunde du ladda ner fler bitar av kod än du någonsin skulle kunna använda.
Men det är inte en verktygslåda. Det är ett bibliotek som du aldrig kommer att röra, eftersom sortering genom det skulle ta alltför länge. Vi är upptagna med människor, så jag har tagit ett mer organiskt förhållningssätt till det här: När jag stöter på ett problem, jag Google det.
Snippets är ofta för långa för att memorera, så om jag tycker att jag upprepade gånger söker efter samma sak lägger jag till det i min verktygslåda. Detsamma gäller för programvara: om det är något du vet att du kommer att använda mycket, lägger du till det.
Det är inte att säga att du aldrig bör avsätta tid för att bara experimentera med några nya "leksaker" ... du borde. Om du hör om en viss resurs som kan förändra hur du jobbar till det bättre, kontrollerar du på alla sätt. Men kom ihåg att verktygslådor hålls relativt små. Du bör fokusera på att behålla bara vad du behöver för att möta de behov du möter regelbundet.
Återigen ska jag upprepa att verktygsverktygen är något du måste göra för att möta dina egna behov. Ändå kommer jag att lista upp sakerna i min verktygslåda för att ge dig en bättre uppfattning om vad du ska leta efter när du skapar din egen.
CSS förprocessorer som MINDRE och SASS gör två saker:
Om du inte redan har provat att koda CSS med en förprocessor uppmanar jag dig att göra det nu. Just nu. Jag väntar.
En välorganiserad lista med bokmärken kan vara till stor nytta när du behöver något som du inte kan spara på din lokala hårddisk. Jag bokmärke saker som CSS3 generatorer , sprite generatorer , färgschema skapare , och andra verktyg som hjälper mig att snabbt utföra uppgifter som tar så mycket längre tid när du gör dem för hand.
Räcksystem är så 2000-talet. Ända sedan mottaglig webbdesign blev en verklig sak har nätverkssystem blivit alltmer komplexa för att möta behoven hos myriade enheter.
Och vad händer om du behöver ett anpassat rutnät? Du kan slå upp ett av de många online-responsiva nätverksgeneratorerna, men de är begränsade.
Lösningen kommer i form av semantic.gs . Nu, medan en egen författare kallar det ett nätsystem, väljer jag att kalla det en layoutmotor, eftersom det inte är ett rutnät. Det är ett verktyg baserat på CSS-förbehandlingen (du kan använda den med MINDER, SASS och Stylus), och det gör att du kan generera alla rutor du gillar, fast bredd eller lyhörd, på flyg.
Allt du behöver göra är att ändra några siffror i en .less (eller SASS, etc) fil och gå.
Emmet är en samling plugins som förkortar förkortningar till fullständiga rader av kod, både i HTML och CSS.
I grund och botten blir det här:
div>ul>li*3>aIn i detta:
- https://github.com/purplefish32/sublime-text-2-wordpress" class=external rel=nofollow> den här för WordPress . WordPress 'mallfunktioner och alternativ för functions.php kan vara svåra att komma ihåg, så det här är en livsparare.
jQuery-plugins
Som jag sa tidigare är jag inte en riktig programmerare. Så när någon form av avancerad animering eller UI-funktionalitet krävs, men inte så mycket för att skapa en ram som är värt besväret, vänder jag mig till enskilda plugins.
Några av mina favoriter är:
- Scrollto.js : ett smidigt rullningsskript.
- idTabs : för när du behöver någon form av flikad UI.
- supersized : för när du behöver en hel sida bildspel.
- ResponsiveSlides.js : vad namnet säger Det är en lyhörd bildreglage. Vad mer kan du önska?
Det är aldrig för tidigt att ha ditt eget personliga bibliotek med användbara saker.
Vilka verktyg skulle du vilja se i din verktygslåda? Vilka resurser kunde du inte leva utan? Låt oss veta i kommentarerna.
Utvalda bild / miniatyrbild, matematikerens verktygslåda bild via Marc Kjerland.