La oss starte med en observasjon: Jeg elsker meg noen rammer. Som et alternativ til å fullstendig gjenoppfinne hjulet, eller å trykke på en knapp fra begynnelsen, er det vanskelig å slå å ha en alt-i-ett-løsning på grunnleggende HTML / CSS / JavaScript-behov.
Problemet er vel, det er det jeg sa rett opp der. Rammer er egentlig ikke en alt-i-ett-løsning, er de? For alt som vi har gjort dem modulære og enkle å tilpasse, noen ganger har de bare ikke det vi trenger.
Det er umulig å inkludere alle mulige HTML-kodestykker, elementstil eller javascript-funksjon som man kan trenge. Men da kan det også være en god ting.
Et rammeverk kan ha mange ting vi ikke trenger. Noen av mine mest frustrerende arbeid som noen gang var involvert i å manuelt søke gjennom Bootstraps massive CSS-filer for å endre litt liten kode som forårsaket ødeleggelse på mitt design.
Bare ta Bootstraps navigasjonslinjekomponent for eksempel. Det er flott, det fungerer feilfritt, og det ser bra ut. Men hvis du prøver å endre måten det ser ut på, må du endre mange stilarter, og det tar litt tid å finne dem alle. Hvis det bare er en horisontal liste over koblinger øverst på siden du vil, kan det være lettere å kode en ny fra begynnelsen.
Men hei, de mer populære rammene der ute, spesielt Bootstrap, har mange tilpasningsverktøy, ikke sant? Ja, og det er bra, men standardalternativene gir deg ikke nok plass til å jobbe.
Enkelt sagt, hvis fokuset er på kreativitet, er et massivt rammeverk sannsynligvis ikke veien å gå. Jo, du kan hacke det, men det vil ta mye tid.
Et annet problem som jeg har opplevd: JavaScript-inkompatibiliteter. Som en fyr som egentlig ikke er programmerer, var dette vondt.
Spesielt var det denne gangen da jeg prøvde å integrere et par jQuery-plugins i et design basert på Foundation. Dette er ikke en avtalebryter alt på egen hånd, men det er mer tid brukt feilsøking.
Selvfølgelig var dette en gang i fjor. Jeg vet ærlig ikke hva som ville skje hvis jeg prøvde det samme med de nye versjonene av samme rammeverk og plugins, men det er fortsatt noe å vurdere.
Sammendrag, det er tider når rammer ikke er svaret. Det er her verktøysettet kommer inn, og du bør ha en.
En verktøykasse, i sammenheng med denne artikkelen, er et selvopptatt og kurert sett med verktøy, utdrag, plugins og ressurser som gjør det mulig å kode dine prosjekter så mye raskere. Folk vil ofte finne disse ressursene over tid og bli knyttet til dem. Det er en personlig ting, og du må virkelig lage din egen.
likheter
forskjeller
Fordelen med en verktøykasse over et rammeverk er den rene allsidigheten. Som nevnt tidligere, i prosjekter hvor du har tenkt å skyve grensene designmessig, er et rammeverk ofte bare for tungt.
Den samme kvaliteten er også rammens fall i små til mellomstore prosjekter. Bygger du en salgsfremmende destinasjonsside? En nettside nettsted? En enkel blogg? Deretter er et rammeverk sannsynligvis bare unødvendig. Du er bedre i å starte fra bunnen av, og gjør alle detaljer i prosjektet ditt.
Jeg ville gå så langt som å si - dette er bare min mening - at de fleste innholdsdrevne nettstedene ikke trenger et fullverdig rammeverk. Unntaket ville være for massive steder, som ars technica for eksempel. For noe som er stort, bør du bruke et rammeverk, men du bør nok utvikle det fra grunnen til å møte nettstedets eksakte behov.
Hvor rammer som Bootstrap og Foundation virkelig skinner er i webapplikasjonsutvikling og app-drevne nettsteder. Det er i disse prosjektene at de relativt stive begrensningene kommer til nytte, i stedet for å bremse deg ned.
Å lage din egen verktøykasse er et spørsmål om tid, tålmodighet og erfaring. Jeg mener sikkert, du kan bare gå og gjøre et søk på "webdesign ressurser". Du vil få tusenvis av treff, og om et par timer kan du laste ned flere koden med kode enn du muligens kunne bruke.
Men det er ikke en verktøykasse. Det er et bibliotek som du aldri kommer til å berøre, fordi sortering gjennom det ville ta altfor lang tid. Vi er opptatt av folk, så jeg har tatt en mer organisk tilnærming til dette: Når jeg støter på et problem, gjør jeg det til Google.
Utdrag er ofte for lange til å huske, så hvis jeg finner meg gjentatte ganger på jakt etter det samme, legger jeg det til min verktøykasse. Det samme gjelder for programvare: Hvis det er noe du vet at du skal bruke mye, legger du til det.
Det er ikke å si at du aldri bør sette av tid for bare å eksperimentere med noen nye "leker" ... du burde. Hvis du hører om en bestemt ressurs som kan forandre måten du jobber til, må du sjekke det ut. Men husk at toolkits bedre holdes relativt små. Du bør fokusere på å holde bare det du trenger for å møte behovene du møter regelmessig.
Igjen, vil jeg gjenta at verktøy er noe du må gjøre for å møte dine egne behov. Likevel skal jeg liste opp tingene i min toolkit for å gi deg en bedre ide om hva du skal se etter når du lager din egen.
CSS preprosessorer som MINDRE og SASS gjør to ting:
Hvis du ikke allerede har prøvd å kode CSS med en forprosessor, oppfordrer jeg deg til å gjøre det nå. Akkurat nå. Jeg venter.
En velorganisert liste over bokmerker kan være svært nyttig når du trenger noe du ikke kan lagre på din lokale harddisk. Jeg bokmerker ting som CSS3 generatorer , sprite generatorer , fargerike skaperne , og andre verktøy som hjelper meg å raskt utføre oppgaver som tar bare så mye lenger når du gjør dem for hånd.
Gittersystemer er så 2000-tallet. Helt siden mottakelig webdesign ble en faktisk ting, har nettverkssystemer blitt stadig mer komplekse for å møte behovene til utallige enheter.
Og hva om du trenger et tilpasset rutenett? Du kan slå opp en av de mange nettleserene som er på nettet, men de er begrensede.
Løsningen kommer i form av semantic.gs . Nå, mens sin egen forfatter kaller det et rutenettverk, velger jeg å kalle det en layoutmotor, fordi det ikke er et rutenett. Det er et verktøy basert på CSS forhåndsbehandling (du kan bruke den med mindre, SASS og Stylus), og det lar deg generere et rutenett du liker, fast bredde eller lydhør, på fly.
Alt du trenger å gjøre er å endre noen tall i en .less (eller SASS, etc) -fil, og gå.
Emmet er en samling av plugins som forkorter forkortelser til hele kodelinjene, både i HTML og CSS.
I utgangspunktet blir det dette:
div>ul>li*3>aInn i dette
- https://github.com/purplefish32/sublime-text-2-wordpress" class=external rel=nofollow> dette for WordPress . WordPress 'malfunksjoner og alternativer for functions.php kan være vanskelig å huske, så dette er en livredder.
jQuery-plugins
Som jeg sa før, er jeg ikke en ekte programmerer. Så når noen form for avansert animasjon eller brukergrensesnittfunksjonalitet kreves, men ikke så mye for å gjøre et rammeverk verdt bryet, blir jeg til individuelle plugins.
Noen av mine favoritter er:
- Scrollto.js : et jevnt rulleskript
- idTabs : for når du trenger noen form for UI-faner.
- supersized : for når du trenger en hel side lysbildefremvisning.
- ResponsiveSlides.js : hva navnet sier Det er en lydhør bildegjenger. Hva mer kan du ønske deg?
Det er aldri for tidlig å ha ditt eget personlige bibliotek med nyttige ting.
Hvilke verktøy vil du se i verktøykassen din? Hvilke ressurser kan du ikke leve uten? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, matematikerens verktøykasse bilde via Marc Kjerland.