Zbliżać się

Podczas gdy strony wprowadzające zawierają wprowadzenie do projektu i jego oferty, ten dokument koncentruje się na tym, dlaczego robimy to, co robimy w Bootstrap. Wyjaśnia naszą filozofię budowania w sieci, aby inni mogli się od nas uczyć, wnosić z nami swój wkład i pomagać nam się doskonalić.

Widzisz coś, co nie brzmi dobrze, a może można by zrobić lepiej? Otwórz numer — z przyjemnością omówimy go z Tobą.

Streszczenie

Zagłębimy się w każdym z nich bardziej w całym tekście, ale na wysokim poziomie, oto co kieruje naszym podejściem.

• Komponenty powinny być responsywne i zorientowane na urządzenia mobilne
• Komponenty powinny być budowane z klasą bazową i rozszerzane za pomocą klas modyfikatorów
• Stany składowe powinny być zgodne ze wspólną skalą z-index
• Jeśli to możliwe, preferuj implementację HTML i CSS niż JavaScript
• Jeśli to możliwe, używaj narzędzi zamiast stylów niestandardowych
• Jeśli to możliwe, unikaj egzekwowania ścisłych wymagań HTML (selektory podrzędne)

Czuły

Responsywne style Bootstrap są zbudowane tak, aby były responsywne, co jest często określane jako mobile-first . Używamy tego terminu w naszych dokumentach i w dużej mierze się z nim zgadzamy, ale czasami może być zbyt szeroki. Chociaż nie każdy komponent musi być w pełni responsywny w Bootstrap, to podejście responsywne polega na zmniejszeniu nadpisań CSS poprzez zachęcanie do dodawania stylów w miarę powiększania się obszaru roboczego.

W całym Bootstrap widać to najwyraźniej w naszych zapytaniach medialnych. W większości przypadków używamy min-widthzapytań, które zaczynają obowiązywać w określonym punkcie przerwania i przechodzą przez wyższe punkty przerwania. Na przykład a .d-nonedotyczy od min-width: 0do nieskończoności. Z drugiej strony .d-md-nonestosuje się od średniego punktu przerwania w górę.

Czasami będziemy używać max-width, gdy wymaga tego wrodzona złożoność komponentu. Czasami te nadpisania są funkcjonalnie i mentalnie jaśniejsze do wdrożenia i obsługi niż przepisywanie podstawowych funkcji z naszych komponentów. Staramy się ograniczać to podejście, ale będziemy z niego korzystać od czasu do czasu.

Klasy

Oprócz naszego Reboot, arkusza stylów normalizacji dla różnych przeglądarek, wszystkie nasze style mają na celu używanie klas jako selektorów. Oznacza to unikanie selektorów typu (np. input[type="text"]) i zbędnych klas nadrzędnych (np. .parent .child), które sprawiają, że style są zbyt specyficzne, aby można je było łatwo przesłonić.

W związku z tym komponenty powinny być budowane z klasą bazową, która zawiera wspólne, nie do zastąpienia pary właściwość-wartość. Na przykład .btni .btn-primary. Używamy .btndo wszystkich popularnych stylów, takich jak display, paddingi border-width. Następnie używamy modyfikatorów, takich jak .btn-primarydodawanie koloru, koloru tła, koloru obramowania itp.

Klas modyfikatorów należy używać tylko wtedy, gdy istnieje wiele właściwości lub wartości do zmiany w wielu wariantach. Modyfikatory nie zawsze są konieczne, więc upewnij się, że faktycznie zapisujesz wiersze kodu i zapobiegasz niepotrzebnym nadpisaniom podczas ich tworzenia. Dobrymi przykładami modyfikatorów są nasze tematyczne klasy kolorów i warianty rozmiarów.

Z-index skale

W Bootstrap są dwie z-indexskale — elementy w komponencie i komponenty nakładki.

Elementy składowe

• Niektóre komponenty w Bootstrap są zbudowane z nakładających się elementów, aby zapobiec podwójnym obramowaniu bez modyfikowania borderwłaściwości. Na przykład grupy przycisków, grupy wejściowe i paginacja.
• Te składniki mają wspólną standardową z-indexskalę 0od 3.
• 0jest domyślny (początkowy), 1jest :hover, 2jest :active/ .activei 3jest :focus.
• Takie podejście odpowiada naszym oczekiwaniom dotyczącym najwyższego priorytetu użytkownika. Jeśli element jest skupiony, jest widoczny i przyciąga uwagę użytkownika. Elementy aktywne są na drugim miejscu, ponieważ wskazują stan. Hover jest trzeci najwyższy, ponieważ wskazuje na zamiary użytkownika, ale prawie wszystko można najechać.

Komponenty nakładkowe

Bootstrap zawiera kilka komponentów, które działają jako swego rodzaju nakładka. Obejmuje to, w kolejności od najwyższej z-index, listy rozwijane, stałe i przyklejone paski nawigacyjne, modalne, podpowiedzi i okienka popover. Te komponenty mają swoją własną z-indexskalę, która zaczyna się od 1000. Ten numer startowy został wybrany arbitralnie i służy jako mały bufor między naszymi stylami a niestandardowymi stylami Twojego projektu.

Każdy składnik nakładki z-indexnieznacznie zwiększa swoją wartość w taki sposób, że wspólne zasady interfejsu użytkownika pozwalają na stałe wyświetlanie elementów skoncentrowanych na użytkowniku lub najechanych na niego. Na przykład, modalny blokuje dokument (np. nie możesz wykonać żadnej innej akcji oprócz akcji modalnej), więc umieściliśmy to nad naszymi paskami nawigacyjnymi.

Dowiedz się więcej na ten temat na naszej z-indexstronie z układem .

HTML i CSS przez JS

W miarę możliwości wolimy pisać HTML i CSS zamiast JavaScript. Ogólnie rzecz biorąc, HTML i CSS są bardziej płodne i dostępne dla większej liczby osób na różnych poziomach doświadczenia. HTML i CSS są również szybsze w Twojej przeglądarce niż JavaScript, a Twoja przeglądarka zazwyczaj zapewnia Ci wiele funkcji.

Ta zasada jest naszym pierwszorzędnym API JavaScript używającym dataatrybutów. Nie musisz pisać prawie żadnego JavaScript, aby korzystać z naszych wtyczek JavaScript; zamiast tego napisz HTML. Przeczytaj więcej na ten temat na naszej stronie przeglądu JavaScript .

Wreszcie, nasze style opierają się na podstawowych zachowaniach popularnych elementów internetowych. W miarę możliwości wolimy korzystać z tego, co zapewnia przeglądarka. Na przykład możesz umieścić .btnklasę na prawie każdym elemencie, ale większość elementów nie zapewnia żadnej wartości semantycznej ani funkcji przeglądarki. Więc zamiast tego używamy <button>s i <a>s.

To samo dotyczy bardziej złożonych komponentów. Chociaż moglibyśmy napisać własną wtyczkę do walidacji formularzy, aby dodać klasy do elementu nadrzędnego na podstawie stanu danych wejściowych, co pozwoliłoby nam stylizować tekst, powiedzmy na czerwono, wolimy używać pseudoelementów :valid/ , które zapewnia nam każda przeglądarka.:invalid

Narzędzia

Klasy użytkowe — dawniej pomocnicy w Bootstrap 3 — są potężnym sprzymierzeńcem w walce z rozrostem CSS i słabą wydajnością strony. Klasa użyteczności to zazwyczaj pojedyncza, niezmienna para właściwość-wartość wyrażona jako klasa (np. .d-blockreprezentuje display: block;). Ich główną zaletą jest szybkość użycia podczas pisania HTML i ograniczenie ilości niestandardowego CSS, który musisz napisać.

W szczególności w odniesieniu do niestandardowego CSS narzędzia mogą pomóc w walce ze zwiększaniem rozmiaru pliku, redukując najczęściej powtarzane pary właściwość-wartość do pojedynczych klas. Może to mieć dramatyczny wpływ na dużą skalę w twoich projektach.

Elastyczny HTML

Chociaż nie zawsze jest to możliwe, staramy się unikać zbytniego dogmatu w naszych wymaganiach HTML dla komponentów. Dlatego skupiamy się na pojedynczych klasach w naszych selektorach CSS i staramy się unikać bezpośrednich selektorów potomnych ( >). Daje to większą elastyczność we wdrażaniu i pomaga zachować prostszy i mniej szczegółowy kod CSS.

Konwencje kodowe

Przewodnik po kodzie (od współtwórcy Bootstrap, @mdo) dokumentuje, w jaki sposób piszemy nasz kod HTML i CSS w Bootstrap. Określa wytyczne dotyczące ogólnego formatowania, zdroworozsądkowych wartości domyślnych, kolejności właściwości i atrybutów i nie tylko.

Używamy Stylelint do egzekwowania tych standardów i innych w naszym Sass/CSS. Nasza niestandardowa konfiguracja Stylelint jest otwarta i dostępna dla innych do użytku i rozszerzania.

Używamy vnu-jar do wymuszania standardowego i semantycznego HTML, a także wykrywania typowych błędów.