Jak modifikovat Bootstrap jednoduše a efektivně
Bootstrap není v žádném případě jediným rozhraním rozhraní HTML / CSS tam, ale myslím, že je bezpečné říci, že změnila hru. Tato kuchyňská dřezová hromada kódů dělala design a vývoj mnoha aplikací (a webových stránek) mnohem jednodušší a popularizovala masivní HTML rámec jako vedlejší produkt.
Je smutné, že rozsah jeho sady funkcí se odvolává na nejasné aspekty lidské přirozenosti a mnozí z těch, kteří se rozhodnou používat, se drželi předvoleb. Nyní, myslíte, výchozí styly a rozvržení mřížky nejsou špatné v žádném úseku představivosti. Jsou výsledkem velkého úsilí a rozsáhlého testování týmem Twitter. Jsou tak pevným základem, na kterém lze budovat jakoukoli.
Ale to jsou všechny: nadace. Rámec, jak naznačuje jejich název, není určen k tomu, aby byl použit jako konečné řešení pro vaše potřeby UX. Jedinou výjimkou z tohoto pravidla může být, pokud vyvíjíte něco vnitřního, které veřejnost nikdy neuvidí. Ale i tak ... Celá myšlenka je je dále rozšiřovat, rozšiřovat a měnit.
Vývojáři společnosti Bootstrap skutečně udělali velice dobrou práci, protože to bylo jednoduché: jejich kód je modulární; a můžete si stáhnout jednotlivé komponenty rámce, které chcete použít, jak uznáte za vhodné. Oni dokonce poskytli a základní nástroj pro přizpůsobení na svých webových stránkách, které vám umožní upravit všechny proměnné podle potřeby.
Zbytek je však na nás. A člověk, někteří skutečně impozantní návrháři a vývojáři se zintenzivnili tím, že vytvářeli mody a nástroje, které nám nezbyly žádné výmluvy. Není důvod se vypořádat s nesplácením.
Vyhodnoťte své individuální projekty; možná Bootstrap je standardní typografie je pro vás to pravé, ale barevné schéma a mřížka nejsou, možná budete potřebovat různé ikony. Určete místa, kde Bootstrap nesplňuje vaše potřeby, a podívejte se na následující zdroje.
Bootstrap mody
Jedná se o plnohodnotné mody, které přebírají základní uživatelské rozhraní pro bootstrap a přeměňují ho na něco téměř nerozpoznatelného. Jejich použití je poněkud specifické a omezené; ale pokud splní vaše potřeby, mohou vám ušetřit čas a peníze.
Plošné uživatelské rozhraní
Prvním modelem tohoto seznamu je Plošné uživatelské rozhraní. Vydáváni kluci na adrese Designmodo , Flat UI dosáhl okamžité popularity v designové komunitě a z dobrého důvodu: je to krásné.
Vytvořeno pro ty, kteří milují plochý design - na rozdíl od Bootstrapových poněkud skejomorfních tendencí - každý prvek UI byl znovu navržen od základů s úplně novou estetikou.
Díky vektorovým ikonám, novému písmu s ikonami glyfů, uživatelským prvkům UI (jako seznam úkolů) a několika snadno změněným barevným schémám mě Ploché uživatelské rozhraní učinilo a pravděpodobně mnoho dalších přehodnotilo, jak může vypadat Bootstrap.
Můj jeden mazlíček zlobí: velikost textu pro váš základní prvek odstavce je pro web malý. Abyste byli spravedliví, pravděpodobně je to správné pro rozhraní aplikace, kde můžete umístit text do poměrně malých prostorů.
Plošné uživatelské rozhraní je zdarma, ale můžete zaplatit za profesionální verzi s dalšími prvky, funkčností a soubory PSD.
Fbootstrapp
Pamatujte si, jak jsem řekl, že některé z těchto modů měly spíše specifické případy použití? No, že jsem si nemyslela. Fbootstrapp byl kompletně přepracován, aby byl kompatibilní s prvky uživatelského rozhraní Facebooku.
Proč by to někdo dělal? Podle vlastních slov "Fbootstrapp je sada nástrojů navržená tak, aby spustila vývoj aplikací Facebook iFrame v obou příslušných velikostech. Zahrnuje základní CSS a HTML pro typografii, formuláře, tlačítka, tabulky, mřížky, navigaci a další, stylizované v typickém vzhledu a vzhledu ve Facebooku. "
Vývojáři aplikací na Facebooku berte na vědomí: vaše práce je jednodušší.
Jumpstart UI admin šablony
Bootstrap může být určen k použití v aplikacích, ale potřebuje trochu práce, pokud chcete s ním vytvořit klasické "admin rozhraní". Jumpstart UI vám přináší tři různé šablony, které to dělají obdivuhodně.
Ikony uživatelského rozhraní, widgety, pluginy pro vizualizaci dat založené na jQuery a další jsou spojeny v čistých, přizpůsobitelných a plně reagujících rozloženích.
Tyto mody se však odlišují od ostatních v jednom hlavním směru. Neexistuje žádná volná verze; musíte za ně platit úplně. Nejsou však příliš drahé: pohybují se mezi 15 až 20 USD. Jelikož se do nich dostalo značné úsilí, řekla bych, že to stojí za to, pokud splní vaše specifické potřeby.
BootMetro
Někteří lidé ji milují a mnozí ho vášejí; ale není popření, že Windows 8 a jeho Metro UI vyvolaly rozruch v designovém světě. Já, kvůli mému životu, si opravdu nemůžu uvědomit žádný případ použití (mimo nějaký druh softwarového obchodu), kde by tento druh uživatelského rozhraní byl obzvláště užitečný. Ale hej, v BootMetro máme jeden!
Je to zdarma a zdá se, že je docela plnohodnotné, takže se podívejte na to. Nemusí to být zvlášť užitečné pro většinu lidí, ale je to zajímavý experiment s kódem. (Myslím to vážně? Bootstrap a Metro?) Neviděl jsem to.
Nástroje pro přizpůsobení spouštěcího modulu
Takže chcete nastavit nastavení Bootstrap tak, aby lépe odpovídalo vašim potřebám UI / UX. Kde začínáte? No, mohli byste se ponořit přímo do kódu. Udělal jsem to. Řeknu vám, že to může být drsné.
Chcete-li změnit celou typografii, tlačítko a odkazy na barvy, nebo navbar stylů ručně, budete tam být chvíli. Veškeré proměnné můžete upravit v aplikaci pro úpravy na webu Bootstrap, ale potřebujete znát HEX kódy pro všechny barvy a při provádění změn nedostáváte žádnou vizuální zpětnou vazbu.
Naštěstí pro nás existuje spousta motivátorů Bootstrap vytvořených pro tento účel konkrétně. To jsou dva nejlepší, které jsem dosud našel.
StyleBootstrap
Pokud můžete ignorovat rozhraní bez ohledu na to, StyleBootstrap je výkonný nástroj pro úpravu většiny výchozích prvků uživatelského rozhraní, které naleznete v rámci. Pokud chcete začít rychle, změníte jen ty nejzřetelnější věci, pak je to místo, kde můžete začít.
Bootstrap Magic
Bootstrap Magic je nástroj, který chcete použít, pokud chcete provést hluboké rebrandování rámce. Má lepší a jednodušší rozhraní a umožňuje vám vylepšit mnohem více prvků než StyleBootstrap. Být varován, i když ... to bude trvat déle. To znamená, že to ještě nebude trvat tak dlouho, dokud to všechno změní ručně.
Doplňky a úryvky
Stačí, když říkáte, že některé věci, které Bootstrap nemají, byste mohli považovat za užitečné. Za prvé, máme ikony.
Font Awesome
Bootstrapové glyfové ikony jsou cool, ale jsou omezené. Máte tmavé ikony, pak máte světelné ikony, všechny nastavené v pěkném malém obrazu sprite. Ikonové písma jsou však mnohem univerzálnější. Cokoliv, co můžete udělat s textem pomocí CSS3, můžete udělat s těmito ikonami. Změňte velikost, barvu, dejte jim stín; je to doslova stejně snadné jako psaní CSS. S přibližně 361 ikonami v době tohoto psaní, Font Awesome stojí za check-out.
Bootsnipp
Bootsnipp je knihovna úryvků HTML určených pro práci s Bootstrap, pravděpodobně bez přidání dalších knihoven. Úryvky zahrnují: registrační formulář a přihlašovací formulář, karusely, lepší kalendáře, e-mailové rozhraní, které se podobá službě Gmail, uživatelské rozhraní pro přehrávače médií a další.
Pokud jste uvízli a snažili jste se zjistit, jak dát dohromady prvky ve vašem uživatelském rozhraní, podívejte se do knihovny Bootsnipp. Pokud nemají přesně to, co potřebujete, příklady kódu vám mohou pomoci zjistit, jak to udělat.
To není všechno ...
Díky tomu, že oblíbený rámec Twitteru je tak široce přijatý, je pravděpodobně více informací o tom, jak přizpůsobit Bootstrap, než jakýkoli seznam může obsahovat.
Koneckonců, to je to, na čem je internet, správně? To a ... kočky.
Upravili jste Bootstrap? Udělali jste to ručně nebo jste použili nějaký zdroj? Dejte nám vědět v komentářích.