Jak modyfikować Bootstrap w prosty i skuteczny sposób
Bootstrap nie jest bynajmniej jedyną strukturą interfejsu HTML / CSS, ale myślę, że można bezpiecznie powiedzieć, że zmieniła grę. Ten stos z kranem z zlewem kuchennym znacznie ułatwił projektowanie i rozwój wielu aplikacji (i strony internetowej) i spopularyzował masywny framework HTML jako produkt uboczny.
Niestety rozmiar samego zestawu funkcji odwołuje się do leniwych aspektów ludzkiej natury, a wiele osób, które zdecydują się go użyć, trzyma się wartości domyślnych. Teraz, domyślam się, domyślne style i układ układu nie są złe przez dowolny odcinek wyobraźni. Są wynikiem ciężkiej pracy i intensywnych testów przeprowadzanych przez zespół Twittera. Stanowią one solidną podstawę, na której można polegać, jak każdy inny.
Ale to wszystko, czym są: fundamentem. Ramy, jak sugeruje ich nazwa, nie powinny być używane jako ostateczne rozwiązanie dla twoich potrzeb UX. Jedyny wyjątek od tej reguły może być, jeśli tworzysz coś wewnętrznego, czego publiczność nigdy nie zobaczy. Ale nawet wtedy ... Cała idea polega na tym, aby je dalej rozwijać, rozszerzać i zmieniać.
Twórcy Bootstrap wykonali bardzo dobrą robotę polegającą na tym, aby było to łatwe: ich kod jest modułowy; i możesz pobrać poszczególne komponenty frameworka do użycia zgodnie z Twoim wyobrażeniem. Dostarczyli nawet podstawowe narzędzie do dostosowywania na ich stronie internetowej, która pozwala na edycję wszystkich zmiennych w razie potrzeby.
Reszta zależy jednak od nas. Poza tym, niektórzy naprawdę imponujący projektanci i programiści przyspieszyli tworzenie modów i narzędzi, które pozostawiają resztę bez żadnych wymówek. Nie ma powodu, aby regulować wartości domyślne.
Oceniaj swoje indywidualne projekty; Być może domyślna typografia Bootstrapa jest dla ciebie odpowiednia, ale schemat kolorów i siatka nie są, może potrzebujesz innych ikon. Zidentyfikuj miejsca, w których Bootstrap nie spełnia Twoich potrzeb, i zapoznaj się z następującymi zasobami.
Modyfikacje Bootstrap
Są to w pełni rozwinięte mody, które pobierają podstawowy interfejs użytkownika do uruchamiania i przekształcają go w coś prawie nie do poznania. Ich zastosowania są dość specyficzne i ograniczone; ale jeśli spełnią twoje potrzeby, mogą zaoszczędzić czas i pieniądze.
Płaski interfejs użytkownika
Pierwszy mod na tej liście jest Płaski interfejs użytkownika. Wydany przez facetów na Designmodo Płaski interfejs użytkownika uzyskał natychmiastową popularność wśród społeczności projektantów i nie bez powodu: jest piękny.
Stworzony dla tych, którzy kochają płaski design - w przeciwieństwie do nieco skomunergicznych tendencji Bootstrapa - każdy element UI został przeprojektowany od podstaw z zupełnie nową estetyką.
Dzięki ikonom wektorowym, nowej czcionce ikony glifu, niestandardowym elementom interfejsu użytkownika (takim jak lista rzeczy do zrobienia) i wielu łatwo zmieniającym się schematom kolorów, interfejs płaski uczynił mnie, i prawdopodobnie wielu innych, ponownie zastanawia się, jak może wyglądać Bootstrap.
Mój jeden ziomek: rozmiar tekstu podstawowego elementu akapitu jest trochę mały dla strony internetowej. Prawdę mówiąc, prawdopodobnie jest to właściwe dla interfejsu aplikacji, w którym możesz umieścić tekst na raczej małych przestrzeniach.
Płaski interfejs użytkownika jest bezpłatny, ale można zapłacić za wersję pro z dodatkowymi elementami, funkcjonalnością i plikami PSD.
Fbootstrapp
Pamiętasz, jak powiedziałem, że niektóre z tych modów miały raczej konkretne przypadki użycia? Cóż, nie żartowałem. Fbootstrapp został całkowicie przerobiony, aby był kompatybilny z elementami interfejsu użytkownika Facebooka.
Dlaczego ktoś miałby to robić? Cóż, własnymi słowami: "Fbootstrapp to zestaw narzędzi zaprojektowany, aby przyspieszyć rozwój aplikacji Facebook iFrame w obu odpowiednich rozmiarach. Zawiera podstawowy kod CSS i HTML dla typografii, formularzy, przycisków, tabel, siatek, nawigacji i innych elementów, stylizowany na typowy wygląd i styl Facebooka. "
Twórcy aplikacji na Facebooku zauważają: twoja praca stała się jeszcze łatwiejsza.
Szablony szablonów administracyjnych Jumpstart UI
Bootstrap może być przeznaczony do użytku w aplikacjach, ale wymaga trochę pracy, jeśli zamierzasz stworzyć klasyczny "interfejs administratora". Interfejs Jumpstart przynosi trzy różne szablony, które robią to doskonale.
Ikony administratorów, style widżetów, wtyczki do wizualizacji danych jQuery i inne są łączone w czyste, konfigurowalne i w pełni responsywne układy.
Te mody różnią się jednak od pozostałych w jeden główny sposób. Nie ma bezpłatnej wersji; musisz zapłacić za nich wprost. Nie są one jednak zbyt drogie: wahają się między 15 a 20 USD. Ze względu na ogromny wysiłek, jaki włożył w to, powiedziałbym, że warto, jeśli spełniają one twoje specyficzne potrzeby.
BootMetro
Niektórzy go uwielbiają, a wielu nienawidzi go z pasją; ale nie można zaprzeczyć, że Windows 8 i jego Metro UI wywołały poruszenie w świecie designu. Ja, na całe życie, nie mogę wymyślić żadnego przypadku użycia (poza jakimś sklepem z oprogramowaniem), w którym ten rodzaj UI byłby szczególnie użyteczny. Ale hej, w BootMetro mamy jeden!
Jest bezpłatny i wydaje się być kompletny, więc sprawdź to. Może to nie być szczególnie przydatne dla większości ludzi, ale jest to interesujący eksperyment kodu. (Mam na myśli naprawdę? Bootstrap i Metro?) Nie widziałem, że nadchodzi.)
Narzędzia do dostosowywania Bootstrap
Dlatego chcesz dostosować konfigurację Bootstrap, aby lepiej spełniać potrzeby interfejsu użytkownika / UX. Gdzie zaczynasz? Cóż, możesz zanurzyć się prosto w kod. To zrobiłem. Powiem ci jednak, że może to być trudne.
Jeśli chcesz zmienić całą typografię, lub kolory przycisków i linków, lub style paska nawigacyjnego ręcznie, będziesz tam przez jakiś czas. Możesz edytować wszystkie zmienne w aplikacji dostosowywania na stronie Bootstrap, ale musisz znać kody HEX dla wszystkich kolorów i nie otrzymasz żadnych wizualnych informacji zwrotnych podczas wprowadzania zmian.
Na szczęście dla nas istnieje sporo twórców Bootstrap stworzonych specjalnie w tym celu. To są dwie najlepsze, jakie do tej pory znalazłem.
StyleBootstrap
Jeśli możesz zignorować niezgrabny interfejs, StyleBootstrap to zaawansowane narzędzie do edycji większości domyślnych elementów interfejsu użytkownika, które można znaleźć w ramach. Jeśli chcesz szybko zacząć, zmieniając tylko najbardziej oczywiste rzeczy, to jest to miejsce, od którego należy zacząć.
Bootstrap Magic
Bootstrap Magic to narzędzie do użycia, jeśli chcesz dokonać dogłębnego rebrandingu frameworka. Ma ładniejszy, prostszy interfejs i daje możliwość modyfikowania o wiele więcej elementów niż StyleBootstrap. Ostrzegam jednak, że to potrwa dłużej. To powiedziawszy, to nie potrwa prawie tak długo, jak będzie wszystko zmienić ręcznie.
Dodatki i snippet
Wystarczy powiedzieć, że istnieją rzeczy, których Bootstrap nie ma, które mogą okazać się przydatne. Na początek mamy ikony.
Czcionka Awesome
Ikony glifów Bootstrapa są fajne, ale ograniczone. Masz ciemne ikony, wtedy masz lekkie ikony, wszystkie ustawione w miłym małym obrazku. Czcionki ikon są jednak znacznie bardziej wszechstronne. Wszystko, co możesz zrobić, aby tekstować w CSS3, możesz zrobić z tymi ikonami. Zmień rozmiar, kolor, daj im cień; to dosłownie tak proste, jak pisanie CSS. Z około 361 ikonami w chwili pisania tego tekstu, Czcionka Awesome warto sprawdzić.
Bootsnipp
Bootsnipp jest biblioteką fragmentów kodu HTML zaprojektowanych do pracy z Bootstrap, prawdopodobnie bez dodawania żadnych dodatkowych bibliotek. Snippety obejmują: rejestrację z kartami i formularze logowania, karuzele, lepsze kalendarze, interfejs e-mail podobny do Gmaila, interfejs odtwarzacza multimediów i wiele innych.
Jeśli utkniesz, próbując dowiedzieć się, jak umieścić elementy w interfejsie użytkownika, zapoznaj się z biblioteką Bootsnipp. Jeśli nie mają dokładnie tego, czego potrzebujesz, przykłady kodu mogą pomóc Ci w ustaleniu, jak to zrobić.
To nie wszystko ...
Dzięki temu, że ulubiony framework Twittera jest tak powszechnie akceptowany, prawdopodobnie więcej informacji o tym, jak dostosować Bootstrap, niż jakakolwiek lista może zawierać.
W końcu po to jest Internet, prawda? To i ... koty.
Czy zmodyfikowałeś Bootstrap? Czy robiłeś to ręcznie, czy korzystałeś z zasobu? Daj nam znać w komentarzach.