Kilka tygodni temu sławny Struktura fundacji wydała czwartą wersję. Jeśli nigdy nie słyszałeś o Fundacji, poprowadzimy Cię przez używanie tego responsywnego frameworka.

Ponieważ wersja 3 Fundacji została zbudowana od podstaw za pomocą SASS - wstępnego procesora CSS, który pomaga w pisaniu bardziej wydajnego CSS - ta nowa wersja jest również przyjazna dla urządzeń mobilnych i zapewnia wiele funkcji w swojej sieci, której nie t uzyskać z innych frameworków.

Zanurzmy się w Fundacji i zobaczmy, dlaczego jest tak popularny ...

Siatka

Fundacja używa 12-kolumnowej siatki, która dostosuje się do ekranu o dowolnym rozmiarze, jeśli już używałeś siatki, to wszystko powinno być ci bardzo dobrze znane. Wszystkie divy w Foundation używają box-sizing: border-box, tak aby granice i dopełnienie nie wpływały na szerokość i wysokość elementu, czyniąc matematykę nieco łatwiejszym dla nas. Ale niesamowitą rzeczą w sieci Fundacji jest to, że dostajesz 2 siatki, dużą siatkę, gdy ekran jest większy niż 768 pikseli i mniejszą siatkę, którą możesz kontrolować tak samo prosto. W tym celu Fundacja używa małych- # i dużych- # klas, takich jak:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

W tym kodzie stworzyliśmy wiersz, w którym są 3 divy, które mają dokładnie taką samą szerokość, gdy przeglądarka jest szersza niż 768px, ale gdy jest mniejsza, jak widać przez tę małą klasę w div, ostatnia zajmie połowę ekran, podczas gdy pozostałe dwa zajmują po 25%, to daje ci ogromną kontrolę nad tym, jak nasza strona będzie wyglądać na wszystkich ekranach.

Fundament pozwala również na przesunięcie kolumny, przez co rozumiem, że możesz mieć wiersz z 2 kolumnami, które mają tylko 3 kolumny szerokości, ale możesz zrównoważyć drugi, który płynie w prawo, a do tego używamy dużego klasa offset lub klasa small-offset:

3, offset 6

Blokuj siatkę

Siatka blokowa to tylko mały dodatkowy element, jest to sposób na podzielenie zawartości listy w siatce, przydaje się wtedy, gdy chcesz, aby ta konkretna część witryny była równo rozłożona, bez względu na wielkość przeglądarka. Ten typ siatki używa siatek o małych blokach i klasach o dużych blokach, jeśli ustawisz tylko pierwszą, siatka zachowa żądaną odległość niezależnie od widoku ekranu, ale jeśli użyjesz tylko dużego bloku. klasa grid, gdy okno robocze osiągnie punkt przerwania 768 pikseli, elementy siatki będą układać się jeden na drugim, zawsze możesz przejąć większą kontrolę, używając obu tych klas, na przykład:

Dzięki temu obrazy będą równomiernie rozmieszczone niezależnie od rozmiaru. Gdy rzutnia jest większa niż 768px, zajmują one tylko jeden wiersz, a gdy są mniejsze, zajmują dwa rzędy po 2 obrazy każdy.

Główna nawigacja

Teraz, gdy już omówiliśmy kratkę w Fundacji i jak zapewnia ona pełną kontrolę we wszystkich środowiskach, porozmawiamy o czymś, czego prawie zawsze używamy na naszych stronach: górnym pasku nawigacyjnym. Oczywiście ta nawigacja może być elastyczna przy niewielkiej lub zerowej ilości pracy przy użyciu tego środowiska. Aby utworzyć prostą, elastyczną nawigację za pomocą Fundacji, skorzystaj z:

Ten fragment HTML tworzy prosty pasek nawigacji, który ma tytuł strony po lewej stronie, a po prawej stronie ma cztery pozycje menu. Zwróć też uwagę, że gdy okno robocze jest mniejsze niż 768px, to menu zostanie zastąpione ikoną listy, dzięki czemu to menu będzie responsywne. Jeśli chcesz, aby ta siatka miała stałą pozycję podczas przewijania strony, wystarczy zawinąć ją w div z klasą ustaloną. Aby dodać listy rozwijane do nawigacji, wystarczy dodać coś takiego do miejsca, w którym ma się pojawić rozwijane menu:

#">  Podmenu Pozycja 1
Podmenu Pozycja 1
Podmenu Pozycja 3

Istnieje również możliwość dodania dzielnika do elementu listy, dodając małą szarą pionową linię, aby to zrobić wystarczy umieścić element listy z klasą dzielnika między dwoma elementami listy, które chcesz podzielić.

guziki

Żadna struktura nie byłaby kompletna bez niektórych wstępnie zdefiniowanych przycisków, a Fundacja ma wstępnie zdefiniowany więcej niż jeden styl przycisku, ma domyślny, który używa niebieskiego koloru, a następnie dodaje style sukcesów, alertów i drugorzędnych. Dodając klasę promienia , nadajesz temu przyciskowi trochę promienia obramowania i nadając mu klasę rundy , przycisk staje się niemal całkowicie okrągły. Możesz także dodać klasę wyłączoną do przycisku i istnieją 4 klasy wielkości, aby przycisk był tak duży, jak tego potrzebujesz.

Domyślny przyciskTiny ButtonMały przyciskDuży przyciskDrugi przyciskPrzycisk sukcesuPrzycisk alarmuPromień przyciskuOkrągły przyciskWyłączony przycisk

Aby utworzyć prosty przycisk rozwijany, wystarczy dodać klasę dropdown po ostatniej klasie, na przykład:

  h1 
  h1.  Mniejszy 
  Element listy 
  Element listy 
  Link 1
Link 2

Jak widać, jeśli chodzi o typografię, Fundacja zapewnia nam podstawową pomoc, a następnie dodatkowe zajęcia, aby zaspokoić wszystkie nasze potrzeby.

Inne składniki

Jeśli ta demonstracja struktury Fundacji zwiększy twój apetyt na naukę i zacznie budować z Fundacją, powinieneś zajrzeć do dokumentacji, ponieważ Fundacja oferuje również dodatkowe komponenty CSS, takie jak:

• Skrzynki ostrzeżeń
• Panele
• Tabele cenowe
• Paski postępu
• Tabele
• Miniatury
• Flex Video

A także niektóre pomocnicze skrypty JavaScript, takie jak:

• Clearing
• Upuścić
• Joyride
• Magellan
• Orbita
• Odsłonić
• Sekcja
• Etykietki narzędzi

Jak widać, istnieje wiele podstaw do zbadania i radzę przyjrzeć się wszystkim jego właściwościom CSS i JavaScript.

Wniosek

Omówiliśmy w tym artykule tylko tyle, aby dowiedzieć się, w jaki sposób Fundacja może pomóc w budowaniu szybszych i bardziej responsywnych stron internetowych, korzystając z jej sieci, uzyskujesz większą kontrolę nad strukturą swojej witryny internetowej, niż przy użyciu zwykłej elastycznej siatki, a Fundacja zapewnia także mnóstwo pomocników. stworzyć swoją stronę. Mam nadzieję, że ten artykuł dał ci impuls, by nauczyć się i korzystać z Fundacji do następnego projektu.

Czy wykorzystałeś Fundację do projektu? Jakie funkcje najbardziej Ci się przydały? Daj nam znać w komentarzach.