Przyspieszenie tworzenia aplikacji dzięki Bootstrap

Bootstrap to jeden z najlepszych i najczęściej używanych frameworków front-endowych HTML/CSS/JS. Prawie każdy programista, który stworzył jedną lub dwie strony internetowe, słyszał o tym popularnym frameworku. Oferuje tak wiele gotowych komponentów i zasobów, że Bootstrap może znacznie przyspieszyć tworzenie aplikacji.

Każdy dobry programista dba o zaoszczędzenie każdej sekundy w procesie tworzenia. Efektywność oznacza szybsze wdrożenie – im szybciej i częściej wdrażamy, tym szybciej nasi użytkownicy końcowi otrzymują lepszy produkt. Dlatego poświęcenie kilku godzin lub dni na planowanie procesu i strategii może zaoszczędzić nam nie tylko kilka minut, ale wiele godzin.

Osobiście pracowałem z tym frameworkiem przez ostatnie 4 lata przy 90% moich projektów. W tym artykule chciałbym podzielić się z wami kilkoma wskazówkami, które pomogą przyspieszyć tworzenie aplikacji bez utraty niektórych niesamowitych możliwości Bootstrapa.

Zrozumienie Bootstrapa

Mimo że jest to framework, od którego bardzo łatwo zacząć, nie daj się zwieść jego prostocie na pierwszy rzut oka. Przed przystąpieniem do projektu poświęć trochę czasu na zabawę z frameworkiem i zapoznanie się z kluczowymi elementami jego infrastruktury i ekscytującymi komponentami. Pomoże to uniknąć 10 najczęstszych błędów Bootstrap.

Poświęć godzinę na przeczytanie dokumentacji na stronie Bootstrap lub dowiedz się więcej ze świetnego posta na blogu Toptal, Co to jest Bootstrap? Krótki samouczek na temat tego, co, dlaczego i jak. I świetny artykuł Bootstrap 3 Tips and Tricks, których możesz nie znać na scotch.io.

Jeśli czytanie dokumentacji jest dla Ciebie nudne i wolisz zamiast tego przeczytać jakiś kod, najlepszym miejscem do rozpoczęcia jest strona internetowa Bootstrap. Otwórz swojego inspektora sieci, przeskanuj kod źródłowy witryny i sprawdź każdy blok kodu i jego elementy. Jest to prawdopodobnie jeden z najlepszych i najszybszych sposobów na opanowanie podstaw.

Zagłęb się w strukturę strony i dowiedz się, jak zbudowane są układy.

 <div class="container"> <div class="row"> ... </div> </div>

... zmień rozmiar okna przeglądarki lub użyj narzędzia Viewport Resizer w przeglądarce Chrome, aby dowiedzieć się więcej o narzędziach do zapytań o media.

 /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

… oraz jak i kiedy ich używać, zapoznaj się z klasami kolumn, aby uzyskać najlepsze wyniki projektowania responsywnego.

 <div class="row"> <div class="col-sm-7 col-md-9 col-xs-6">Left column</div> <div class="col-sm-5 col-md-3 col-xs-6">Right column</div> </div>

Zajrzyj do W3Schools, gdzie znajdziesz pełną dokumentację Bootstrap wszystkich klas CSS, komponentów i wtyczek JavaScript – wszystko z przykładami „Spróbuj sam”:

• Wyjaśnienie systemu grid Bootstrap: plansze w Bootstrap
• Podstawowe klasy CSS: typografia, przyciski, formularze i elementy formularzy, klasy pomocnicze, obrazy, tabele
• Poszczególne komponenty: glify, listy rozwijane, navs.

Sprawdź kod źródłowy i spróbuj zapoznać się z jak największą liczbą nazw klas. Dowiedz się o ich przypadkach użycia — jak, kiedy i dlaczego. Pomoże Ci to szybciej przejść do przodu podczas pisania HTML i stylizacji elementów interfejsu użytkownika. Dowiedzenie się więcej o tych komponentach pomoże ci uniknąć rozdęcia arkuszy stylów dużą ilością niepotrzebnego zduplikowanego kodu. Zachowaj szczupłość i czystość, używając i ponownie wykorzystując istniejące komponenty, zamiast tworzyć zbyt wiele nowych, które robią to samo, co te, które już istnieją w ramach.

Jest to szczególnie ważne przy pracy w zespole kilku programistów. Upewnij się, że nie skończysz na pisaniu tony zduplikowanego kodu, tworząc zbyt wiele stylów dla tego samego przypadku za każdym razem, gdy tłumaczysz nowe projekty do kodu. Utrzymywanie spójnego i dobrze udokumentowanego rozwoju interfejsu użytkownika za pomocą przewodników po stylu interfejsu użytkownika może również dodać kilka węzłów do produktywnej pracy zespołowej. Ponadto zauważysz, że dodając nowe funkcje lub strony do swojej aplikacji, posuwasz się naprzód z mniejszą frustracją. Byłem zaangażowany w kilkanaście dużych projektów iw porównaniu widziałem wiele przypadków, w których framework został dosłownie zhakowany i za każdym razem, gdy dodawany był nowy kod CSS, łamał UI na innych stronach. Przechodzenie przez całą stronę i naprawianie tego typu błędów byłoby dość wyczerpujące. Nie tylko to, pomyśl o kosztach i wszystkich pieniądzach wydanych na dodatkowy czas programisty i pomoc w QA.

7 najczęstszych błędów stylizacyjnych związanych z marnowaniem czasu

1. Podczas centrowania tekstu lub elementów div

Jeśli potrzebujesz wyśrodkować div i/lub zawartość, możesz użyć jednej z tych klas:

Użyj centrum tekstowego

 <p class="text-center">I am centered text</p>

… lub centralny blok

 <div class="center-block">I am centered text</div>

nie .center lub <center>

2. Podczas zmiany rozmiaru czcionki

Jeśli potrzebujesz mniejszych lub większych czcionek, możesz użyć jednej z tych klas:

 <p class="lead">I'm bigger paragraph text.</p>

 <p class="small">I'm smaller paragraph text.</p>

Jeśli potrzebujesz większych lub mniejszych nagłówków, nie zapomnij o .h1 , .h2 , .h3 , .h4 , .h5 , .h6 , .small . Użyj go w ten sposób:

 <h1 class="h2">Smaller Title with .h2</h1>

 <h3 class="h1">Bigger Title with .h1</h3>

 <h4 class="small">Smaller Title with .small</h4>

3. Podczas czyszczenia pływaków lub zmuszania elementów do samooczyszczania swoich dzieci

Nie musisz tworzyć klas takich jak .clear, zawsze możesz użyć .clearfix Bootstrapa.

 <div class="clearfix">...</div>

4. Podczas zabijania marginesów klasy .row

Po prostu użyj .clearfix zamiast definiować własne style (lub, co gorsza, używając stylów inline):

 <div class="clearfix">...</div>

5. Podczas usuwania stylizacji lub wstawiania nieuporządkowanych list i innych elementów

Usuń domyślny styl listy i lewy margines na elementach listy. Dotyczy to tylko elementów list podrzędnych. Jeśli musisz zastosować to samo dla list zagnieżdżonych, będziesz musiał dodać nazwę klasy również do nich.

 <ul class="list-unstyled"> <li>...</li> </ul> <ul class="list-inline"> <li>...</li> </ul>

Podobnie dla pól wyboru lub przycisków radiowych mamy .checkbox-inline i .radio-inline .

I zawsze możesz dodać .form-inline do swoich formularzy (który nie musi być <form> ) dla kontrolek wyrównanych do lewej i blokowych.

6. Podczas dopasowywania przycisków

Masz ochotę na większe czy mniejsze guziki? Dodaj .btn-lg , .btn-sm lub .btn-xs , aby uzyskać dodatkowe rozmiary.

7. Podczas pływania i wyrównywania przedmiotów w prawo lub w lewo

Przesuń element w lewo lub w prawo za pomocą klasy. !Ważne jest zawarte, aby uniknąć problemów ze specyficznością. Klasy mogą być również używane jako mixiny z dowolnym preprocesorem CSS.

Użyj .pull-right , .pull-left , .text-right , .text-left zamiast .right , .left , .left -float , .right-float .

 <div class="pull-left">...</div> <div class="pull-right">...</div>

Łatwo wyrównuj tekst do komponentów dzięki klasom wyrównania tekstu.

 <p class="text-left">Left aligned text.</p> <p class="text-right">Right aligned text.</p>

Nie dostosowuj bezpośrednio plików Framework Core

Podczas pracy nad dużymi projektami odkryłem, że najlepszym sposobem na efektywne wykorzystanie frameworka jest budowanie na jego bazie, a nie bezpośrednie dostosowywanie jego podstawowych plików. Ta koncepcja jest podobna do innych platform i bibliotek, których możesz użyć w projekcie.

Chociaż, jeśli budujesz małą witrynę i masz makiety projektu, które mogą nie wymagać wielu zmian lub aktualizacji, może się okazać, że dostosowanie struktury do swoich potrzeb jest lepszą opcją. Na przykład możesz chcieć usunąć wszystkie niepotrzebne rzeczy bezpośrednio w plikach frameworka lub możesz przejść do sekcji dostosowywania witryny Bootstrap, gdzie możesz łatwo skonfigurować wszystkie komponenty, zmienne i wtyczki jQuery, aby uzyskać bardzo własna wersja. W takim przypadku możesz przyspieszyć tworzenie witryny i skrócić czas stylizacji lub radzenia sobie z nadpisaniami.

Jeśli jednak zaczynasz lub pracujesz nad dużą witryną z kilkoma programistami lub większą liczbą - najlepiej jest zachować odrębność i dobrą organizację. Przenieś pliki frameworka poza główny niestandardowy folder CSS i trzymaj je w nieedytowanym folderze bez wersji i usuń nieużywane CSS, korzystając z wtyczek Grunt lub Gulp grunt-uncss lub gulp-uncss. Inną alternatywą dla oddzielenia go jest serwowanie go przez CDN. Posiadanie oddzielnego i nienaruszonego kodu frameworka daje lepszą i szybszą opcję podczas aktualizacji do najnowszej wersji. Pomaga również zminimalizować szereg problemów ze skalowalnością i stylizacją lub spowolnienia podczas tworzenia dodatków z szybkimi ciągłymi zmianami interfejsu użytkownika.

Korzystaj z narzędzi szkieletowych, takich jak Yeoman lub Slush, oraz menedżerów pakietów, takich jak Bower, pip Pythona, Node's NPM lub Ruby Gems, ponieważ robią znacznie więcej niż dodawanie plików do ścieżki aplikacji. Naprawdę doceniam moc Bower - zdecydowanie może zrobić trochę więcej niż tylko pobrać plik lub dwa. Korzystanie z menedżera pakietów jest dobrym pomysłem, ponieważ najprawdopodobniej złożoność twojego projektu wzrośnie, a liczba wtyczek innych firm i sposób ich utrzymania staną się szalone i czasochłonne. Bower pomoże Ci śledzić każdą wtyczkę i jej zależności, w tym wszystko związane z Bootstrapem.

Wykorzystaj dostępne zasoby Bootstrap do tworzenia aplikacji

Wraz z popularnością Bootstrap pojawia się mnóstwo pomocnych zasobów: artykuły, samouczki, wtyczki i rozszerzenia innych firm, szablony, narzędzia do tworzenia motywów i tak dalej. Niezależnie od tego, czy szukasz inspiracji, czy fragmentów kodu, będziesz mieć wszystko, czego potrzebujesz, aby przyspieszyć swoje postępy.

Można by pomyśleć, że mając tak wiele dostępnych zasobów, każdy wykorzystałby je i wykorzystał w swoich projektach, ale wierzcie lub nie – tak nie jest. Niektórzy programiści marnują czas i spowalniają postęp projektu, pomijając kilka świetnych fragmentów kodu lub zasobów. Chociaż nie powinieneś po prostu kopiować i wklejać na ślepo, musisz zrozumieć dobre części i dostosować je do swojego stylu kodowania i potrzeb technicznych. Umiejętność wyszukiwania i porządkowania dobrych zasobów oraz umiejętność ich efektywnego wykorzystania jest również umiejętnością i wymaga wieloletniego doświadczenia i wiedzy.

Poniżej znajdziesz listę przydatnych zasobów na początek:

Szablony, motywy i wtyczki

Oficjalne motywy twórców Bootstrap: themes.getbootstrap.com.

Giełdy z motywami i szablonami premium Bootstrap: wrapbootstrap.com, themeforest.net, creativemarket.com/themes/bootstrap.

Darmowe motywy i szablony Bootstrap: startbootstrap.com, www.bootstrapzero.com, shapebootstrap.net/free-templates.

„The Big Badass List” – lista 319 przydatnych zasobów Bootstrap: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

AngularJS

BootstrapUI napisany w czystym AngularJS przez zespół AngularUI.

ReactJS

React-Bootstrap to biblioteka komponentów front-endowych wielokrotnego użytku. Dzięki frameworkowi Facebook React.js uzyskasz wygląd i działanie Twitter Bootstrap, ale ze znacznie czystszym kodem.

Django

Integracja Bootstrap 3 z Django: https://github.com/dyve/django-bootstrap3

Jekyll

Jekyll-Bootstrap to pełne rusztowanie blogowe dla blogów opartych na Jekyll.

WordPress

Motyw startowy WordPress Sage z nowoczesnym przepływem pracy w zakresie programowania front-end. Oparte na HTML5 Boilerplate, gulp, Bower i Bootstrap.

Wygląd materiału

Material Design for Bootstrap to motyw dla Bootstrap 3, który umożliwia korzystanie z nowego Google Material Design w ulubionej strukturze front-endu.

Wniosek

Bootstrap to jeden z najlepszych dostępnych frameworków, który oferuje wiele wspaniałych narzędzi i zasobów w celu przyspieszenia i przyspieszenia procesu tworzenia aplikacji.

Oszczędza wiele godzin/dni pracy podczas projektowania i kodowania niesamowitego interfejsu użytkownika. Każdy komponent i wtyczka są dokładnie udokumentowane przykładami na żywo i blokami kodu, co ułatwia użytkowanie i dostosowywanie. Jest wysoce zalecany przez wielu programistów i bardzo popularny zarówno w przypadku prototypowania, jak i produkcji. Jest to bardzo dobre narzędzie do tworzenia responsywnych stron internetowych dostosowanych do urządzeń mobilnych. Bootstrap daje Ci świetny punkt wyjścia do wielu rodzajów projektów, możliwość przekazania go projektantowi i powiedzenia „spraw, żeby to wyglądało fantazyjnie!” bez konieczności włamywania się do kodu. Co najważniejsze, pozwala najpierw opracować strukturę, a później zająć się czcionkami, kolorami i fantazyjnymi stylami. Poświęć trochę czasu, aby przestudiować, co może zrobić i sprytnie, jak z niego korzystać w najlepszy sposób, aby szybciej dotrzeć tam, gdzie chcesz.