Podstawa (rama)
| Deweloperzy | ZURB |
|---|---|
| Pierwsze wydanie | wrzesień 2011 |
| Wersja stabilna | 6.7.5 / 12 lipca 2022
|
| Magazyn | Repozytorium Fundacji |
| Napisane w | HTML , CSS , Sass i JavaScript |
| Typ | tworzenie stron internetowych |
| Licencja | Licencja MIT |
| Strona internetowa |
Foundation to bezpłatna responsywna struktura front-end o otwartym kodzie źródłowym , zapewniająca responsywną siatkę oraz komponenty interfejsu użytkownika HTML i CSS , szablony i fragmenty kodu, w tym typografię, formularze, przyciski, nawigację i inne elementy interfejsu, a także opcjonalne funkcje przez rozszerzenia JavaScript . Foundation to projekt typu open source , wcześniej utrzymywany przez firmę ZURB. Od 2019 roku Fundacja jest utrzymywana przez wolontariuszy.
Pochodzenie
Fundacja powstała jako projekt ZURB, aby szybciej i lepiej rozwijać kod front-end. W październiku 2011 ZURB udostępnił Foundation 2.0 jako open source na licencji MIT . ZURB wypuścił Foundation 3.0 w czerwcu 2012, 4.0 w lutym 2013, 5.0 w listopadzie 2013 i 6.0 w listopadzie 2015. Zespół rozpoczął prace nad kolejną wersją Foundation for Sites 7, która najprawdopodobniej zrezygnuje ze wsparcia dla starszych przeglądarek i zaimplementuje nowsze technologie jak flexbox lub może obliczony system siatki.
Foundation for Emails, wcześniej znana jako ZURB Ink, została wydana we wrześniu 2013 roku.
Foundation for Apps została wydana w grudniu 2014 r.
Cechy
Foundation została zaprojektowana i przetestowana na wielu przeglądarkach i urządzeniach. Jest to responsywny framework zbudowany z Sass/SCSS . Framework zawiera najczęstsze wzorce potrzebne do prototypowania responsywnej witryny. Dzięki zastosowaniu domieszek Sass, komponenty Foundation są łatwo stylizowane i proste do rozszerzenia. [ pawia proza ]
Od wersji 2.0 obsługuje również projektowanie responsywne . Oznacza to, że szata graficzna stron internetowych dopasowuje się dynamicznie, uwzględniając charakterystykę używanego urządzenia (PC, tablet, telefon komórkowy). Ponadto od wersji 4.0 przyjęło podejście mobile-first, projektując i rozwijając najpierw dla urządzeń mobilnych oraz ulepszając strony internetowe i aplikacje na większe ekrany.
Foundation jest open source i jest dostępna na GitHub . Programistów zachęca się do udziału w projekcie i wnoszenia własnego wkładu w platformę.
Struktura i funkcja
Foundation jest modułowa i składa się zasadniczo z serii arkuszy stylów Sass , które implementują różne komponenty zestawu narzędzi. Arkusze stylów komponentów można dołączyć za pośrednictwem Sass lub dostosowując początkowe pobieranie Foundation. Deweloperzy mogą dostosować sam plik Foundation, wybierając komponenty, których chcą użyć w swoim projekcie.
Dostosowania są możliwe za pomocą centralnego arkusza stylów konfiguracji. Głębsze zmiany są możliwe dzięki zmianie zmiennych Sass.
Wykorzystanie języka arkuszy stylów Sass pozwala na wykorzystanie zmiennych, funkcji i operatorów, zagnieżdżonych selektorów, a także tzw. miksów.
Od wersji 3.0 konfiguracja Foundation posiada również specjalną opcję „Dostosuj” w dokumentacji. Ponadto programiści na formularzu wybierają pożądane komponenty iw razie potrzeby dostosowują wartości poszczególnych opcji do swoich potrzeb. Wygenerowany później pakiet zawiera już gotowy arkusz stylów CSS.
System siatki i responsywny projekt
Foundation jest standardowo wyposażony w elastyczny układ siatki o szerokości 940 pikseli. Zestaw narzędzi jest w pełni responsywny, aby korzystać z różnych rozdzielczości i typów urządzeń: telefonów komórkowych, formatu pionowego i poziomego, tabletów i komputerów PC o niskiej i wysokiej rozdzielczości (panoramiczny). Spowoduje to automatyczne dostosowanie szerokości kolumn.
Zrozumienie arkusza stylów CSS
Foundation udostępnia zestaw arkuszy stylów, które zawierają podstawowe definicje stylów dla wszystkich kluczowych komponentów HTML. Zapewniają one spójny, nowoczesny wygląd w całej przeglądarce i systemie do formatowania tekstu, tabel i elementów formularzy.
Komponenty wielokrotnego użytku
Oprócz zwykłych elementów HTML, Foundation zawiera inne często używane elementy interfejsu. Należą do nich przyciski z zaawansowanymi funkcjami (na przykład grupowanie przycisków lub przycisków z opcją rozwijania, listy tworzenia i nawigacji, zakładki poziome i pionowe, nawigacja, nawigacja po nawigacji, paginacja itp.), etykiety, zaawansowane możliwości typograficzne i formatowanie w przypadku komunikatów, takich jak ostrzeżenia.
Komponenty i wtyczki JavaScript
Komponenty JavaScript Foundation 4 zostały przeniesione z biblioteki jQuery JavaScript do Zepto, przy założeniu, że fizycznie mniejsza, ale kompatybilna z API alternatywa dla JQuery okaże się szybsza dla użytkownika. Jednak Foundation 5 wróciło do nowszej wersji JQuery-2. „jQuery 2.x ma ten sam interfejs API co jQuery 1.x, ale nie obsługuje przeglądarki Internet Explorer 6, 7 ani 8”. oficjalny blog ZURB wyjaśnia, a niepodpisany autor twierdzi, że powrót był spowodowany problemami ze zgodnością z niestandardowymi działaniami; i stwierdzono, że wydajność nie jest tak dobra w testach użytkowania z nowszym jQuery-2.
Podstawowe komponenty jQuery zapewniają ogólne elementy interfejsu użytkownika i markowe rozszerzenia. Lista zawiera: okno dialogowe, podpowiedzi, karuzele, alerty, czyszczenie, pliki cookie, menu rozwijane, formularze, przejażdżkę, magellan, orbitę, symbol zastępczy, ujawnienie, sekcję, pasek górny, elastyczne wideo i wiele innych. W ramach Foundation można zainstalować dodatkowe wtyczki jQuery, aby zapewnić zaawansowane funkcje w dowolnym obszarze interfejsu użytkownika, w tym animacje i elementy „poza płótnem”, takie jak wysuwane menu.
Używać
Istnieją trzy poziomy integracji Foundation: CSS, SASS i Ruby on Rails z klejnotem Foundation Rails.
CSS
Aby korzystać z Foundation CSS, można pobrać domyślne lub niestandardowe pakiety CSS ze strony pobierania i zainstalować je w odpowiednich folderach serwera WWW. Podstawa jest następnie integrowana ze znacznikami strony HTML.
SASS
Foundation SASS używa Ruby, Node.js i Git do instalowania źródeł Foundation. Następnie Foundation zapewnia interfejs wiersza poleceń do modyfikowania i kompilowania kodu źródłowego do CSS w celu użycia w znacznikach strony HTML.
Klejnot Foundation Rails
Klejnot Foundation Rails można zainstalować, dodając „gem 'foundation-rails'” do pliku Gemfile aplikacji Rails.
