Začněme s pozorováním: Miluju mi nějaké rámce. Jako alternativa k úplnému objevení kola nebo stylování tlačítka od začátku je opět těžké porazit řešení všeho v jednom k vašim základním potřebám pro HTML / CSS / JavaScript.
Problém je, že je to to, co jsem tam řekl. Rámečky skutečně nejsou řešením all-in-one, že? Protože jsme je modulární a snadno přizpůsobili, někdy prostě nemají to, co potřebujeme.
Není možné zahrnout všechny možné fragmenty HTML, styl prvku nebo funkci javascript, kterou byste mohli potřebovat. Ale pak to může být také dobrá věc.
Rámec může mít spoustu věcí, které nepotřebujeme. Některé z mých nejvíce frustrující práce někdy zahrnovaly ruční vyhledávání v masivních systémech CSS Bootstrapu, aby změnili nějaký malý kousek kódu, který na můj design způsobil zmatek.
Použijte například komponent navigační lišty Bootstrapu. Je to skvělé, funguje bezchybně a vypadá to dobře. Pokud se ale pokusíte změnit způsob, jakým vypadá nějakým velkým způsobem, musíte změnit spoustu stylů a chvíli trvá, než je najdete. Pokud je to jen horizontální seznam odkazů v horní části stránky, které chcete, mohlo by být jednodušší kódovat nový od začátku.
Ale hej, populárnější rámce tam, zejména Bootstrap, mají spoustu nástrojů pro přizpůsobení, že jo? Ano, a to je skvělá věc, ale výchozí volby vám nedávají dost prostoru pro práci.
Jednoduše řečeno, pokud se zaměřujete na kreativitu, masivní rámec pravděpodobně není způsob, jak jít. Jistě, můžete to hackovat, ale to bude trvat hodně času.
Další problém, který jsem narazil: Nesrovnalosti v jazyce JavaScript. Jako člověk, který není opravdu programátor, bylo to bolestné.
Konkrétně to bylo jedno, když jsem se snažil integrovat několik pluginů jQuery do návrhu založeného na nadaci. To není samo o sobě problém, ale je to víc času stráveného ladění.
Samozřejmě, minulý rok to byl nějaký čas. Upřímně nevím, co se stane, kdybych se pokusil stejnou věc s novými verzemi stejného rámce a pluginy, ale je to ještě něco, co byste měli zvážit.
Stručně řečeno, existují chvíle, kdy rámce prostě nejsou odpovědí. Zde přichází sada nástrojů a měli byste mít jednu.
Nástrojová sada v kontextu tohoto článku je samoobsazená a vyčíslená sada nástrojů, úryvek, pluginy a prostředky, které vám umožňují rychleji kódovat své projekty. Lidé často naleznou tyto zdroje v průběhu času a stanou se k nim připojeni. Je to osobní věc, a opravdu musíte udělat svůj vlastní.
Podobnosti
Rozdíly
Výhodou sady nástrojů nad rámem je jeho naprostá všestrannost. Jak bylo uvedeno výše, v rámci projektů, u kterých máte v úmyslu posunout hranice podle návrhu, je rámec často příliš těžkopádný.
Stejnou kvalitou je i pád rámce v malých až středně velkých projektech. Vytváříte reklamní vstupní stránku? Stránky na jedné stránce? Jednoduchý blog? Potom je rámec pravděpodobně jen zbytečný. Jste lepší než začínáte od nuly a děláte všechny detaily vašeho projektu.
Já bych šel tak daleko, abych řekl - je to jen můj názor -, že většina webových stránek založených na obsahu nepotřebuje plnohodnotný rámec. Výjimka by byla pro masivní stránky, jako ars technica například. Pro něco takového byste měli použít rámec, ale pravděpodobně byste ho měli rozvíjet od nuly, abyste splnili přesné potřeby webu.
Kde rámce jako Bootstrap a Foundation skutečně lesknou, je ve vývoji webových aplikací a aplikacích řízených webových stránkách. Právě v těchto projektech poměrně rigidní omezení přicházejí v pořádku, namísto zpomalení.
Vytvoření vlastního souboru nástrojů je otázkou času, trpělivosti a zkušeností. Myslím, určitě, můžete jít a hledat "zdroje webového designu". Dostanete tisíce a tisíce zásahů a během několika hodin si můžete stáhnout více bitů kódu, než jste kdy mohli použít.
Ale to není sada nástrojů. To je knihovna, na kterou se nikdy nedotknete, protože třídění přes to bude trvat příliš dlouho. Jsme zaneprázdněni lidmi, a proto jsem se k tomuto choval lépe: když se s tím setkávám s nějakým problémem, tak to Google Google.
Úryvky jsou často příliš dlouhé na to, aby se zapamatovaly, takže pokud se najdu opakovaně hledat stejnou věc, přidám ji do mého sady nástrojů. Totéž platí pro software: pokud je to něco, co víte, že hodláte hodně používat, přidáte to.
To neznamená, že byste nikdy neměli odkládat čas jen experimentovat s novými "hračky" ... měli byste. Pokud slyšíte o konkrétním zdroji, který by mohl změnit způsob, jakým pracujete k lepšímu, vyčistěte ho. Nezapomeňte ale, že sady nástrojů jsou lépe udržovány relativně malé. Měli byste se soustředit na udržování toho, co potřebujete k tomu, abyste uspokojili potřeby, s nimiž se setkáváte pravidelně.
Znovu připomínám, že sady nástrojů jsou něco, co musíte udělat, abyste uspokojili své vlastní potřeby. Přesto budu vypsat věci v mém toolkitu, abych vám dal lepší představu o tom, co hledat při vytváření vlastních.
CSS předprocesory jako MÉNĚ a SASS dělat dvě věci:
Pokud jste ještě nezkoušeli kódování CSS pomocí předprocesoru, vyzývám vás, abyste tak učinili. Právě teď. Počkám.
Dobře uspořádaný seznam záložek může být velmi užitečný, když potřebujete něco, co nemůžete uložit na lokální pevný disk. Záložní věci se mi líbí Generátory CSS3 , generátory spiritu , tvůrci barevných schémat , a další nástroje, které mi pomáhají rychle vykonávat úkoly, které trvají mnohem déle, když je děláte ručně.
Gridové systémy jsou tak 2000s. Od okamžiku, kdy se citlivý webový design stal skutečnou věcí, síťové systémy se staly stále složitějšími, aby vyhovovaly potřebám nesčetných zařízení.
A co když potřebujete vlastní systém mřížky? Mohli byste narazit na jeden z mnoha generátorů systému reagujících na síť, ale jsou omezené.
Řešení přichází v podobě semantic.gs . Nyní, zatímco jeho vlastní autor nazývá systém mřížky, rozhodl jsem se jej nazvat motorem rozložení, protože to není jedna mřížka. Jedná se o nástroj založený na předběžném zpracování CSS (můžete jej použít s nástroji LESS, SASS a Stylus) a umožňuje generovat libovolnou mřížku, která se vám líbí, pevná nebo citlivá.
Jediné, co musíte udělat, je změnit některé čísla v souboru .less (nebo SASS atd.) A jít.
Mravenec je sada pluginů, které zkracují zkratky do plných řádků kódu, a to jak v HTML, tak v CSS.
V podstatě to změní:
div>ul>li*3>aDo toho:
- https://github.com/purplefish32/sublime-text-2-wordpress" class=external rel=nofollow> tento pro WordPress . WordPress 'šablony a možnosti pro funkce.php mohou být obtížně zapamatovatelné, takže je to šetřič života.
jQuery pluginy
Jak jsem již řekl, nejsem skutečný programátor. Takže když je zapotřebí jakýkoli druh pokročilé animace nebo funkčnosti uživatelského rozhraní, ale ne tolik, aby vytvořila rámec, který stojí za problémy, obrátil jsem se na jednotlivé pluginy.
Některé z mých oblíbených jsou:
- Scrollto.js : hladký scrolling skript.
- idTabs : pro když potřebujete jakékoliv uživatelské rozhraní.
- Nadměrné : pro, když potřebujete prezentaci celé stránky.
- ResponsiveSlides.js : co říká název. Je to posuvník citlivý na obraz. Co víc můžete chtít?
Nikdy není příliš brzy mít svou vlastní knihovnu užitečných věcí.
Jaké nástroje byste chtěli vidět ve vašem souboru nástrojů? Jaké prostředky byste nemohli žít bez? Dejte nám vědět v komentářích.
Doporučený snímek / náhled, matematický obrázek sady nástrojů přes Marc Kjerland.