Fundacja 6 jest prawie gotowa do wyjścia z beta i jest lepsza niż jej poprzednicy w niemal każdym możliwym sposobie: jest bardziej usprawniona, jest prostsza, a jednak jakoś bardziej wyrafinowana. Zurb przeszli samych siebie.

Jak sam się przekonasz, kiedy w końcu go zainstalujesz - na OSX lub Linux, ale na Windowsie, Node może być łatwy - Fundament 6 można teraz zainstalować tylko za pośrednictwem menadżera pakietów. Czuję się jakbym się starzał, marząc o starych dobrych czasach, gdy frameworki CSS pojawiły się w plikach .zip, a nie z polecenia terminalu.

Mimo to nie kłamałem, gdy mówiłem, że Fundacja 6 jest niesamowita. Cóż, powinienem powiedzieć "Fundacja dla stron", ponieważ Fundacja nie jest już tylko jedną strukturą. Poza Fundacją dla aplikacji, Zurb jest również zajęty wprowadzaniem kilku narzędzi do przyspieszenia rozwoju.

To wydanie dotyczyło wydajności ... możesz szybciej budować witryny, witryny będą pobierać szybciej, a JavaScript będzie działał szybciej.

Po pierwsze, istnieje Fundacja CLI , który może zainstalować dowolną wersję Foundation dla ciebie, wraz z projektami startowymi. Wstępnie skompilowany CSS w Fundacji dla Witryn będzie dostępny do pobrania osobno po ostatecznym wydaniu. Na razie jednak CLI jest sposobem na uzyskanie tego i pozostanie na bieżąco z wszelkimi zmianami przed ostatecznym wydaniem.

Potem jest Panini , statyczny kompilator stron z szablonami do kierowania i kilka innych funkcji, które pomagają szybko budować statyczne prototypy i / lub witryny. Kompiluje Sass, umieszcza wszystkie JavaScript w jednym pliku, może skompresować cały kod i więcej.

Funkcje Foundation 6

Nie wyobrażaj sobie, że ta wersja Fundacji jest mniej wypełniona funkcjami - wciąż ma wszystko, czego potrzebujesz i więcej - ale należy zauważyć, że niektóre elementy, które lepiej pasowały do ​​aplikacji niż witryn, zostały usunięte. Te elementy są teraz częścią Podstawa dla aplikacji .

Reszta pracy w tej wersji polegała na pozbyciu się zbędnego kodu i usprawnieniu wszystkiego, co pozostało.

Na przykład zamiast tworzyć trzy różne komponenty menu dla trzech różnych projektów menu, istnieje tylko jeden komponent menu z kilkoma odmianami. Dla osoby piszącej kod HTML jest niewielka różnica: dodaj klasę i masz menu; zmień kilka klas i masz menu, które wygląda zupełnie inaczej.

W rzeczywistości, dla wszystkich różnic, wiele klas i znaczników będzie wyglądać bardzo znajomo, jeśli nie tak samo. Wszystko opiera się na Sassie, więc możesz go jak zawsze dostosować.

To wydanie dotyczyło wydajności. Gdy nauczysz się, jak tworzyć witryny szybciej, witryny będą pobierać szybciej, a JavaScript będzie działał szybciej. Założenie było teraz o połowę tak ciężkie, jak pod względem rozmiaru pliku. Połowa .

Nowe funkcje

Jawne wsparcie dla języków RTL

Starsze wersje obsługiwały języki RTL (od prawej do lewej) takie jak arabski w pewnym zakresie; ale potrzebowali kilku poprawek. Fundacja 6 ma wbudowane wsparcie.

Flex grid

Siatka Flex to dokładnie to, o czym myślisz: jest to komponent Grid ponownie wykonany przy pomocy Flexbox. Z jednej strony daje to szereg funkcji i opcji, z którymi nie może sobie poradzić zwykła siatka oparta na float. Z drugiej strony prawdopodobnie nie jest tak dobrze obsługiwany, szczególnie przez IE. To kompromis.

Typowe klasy pomocnicze

Wprowadzono kilka fajnych ulepszeń dla typografii strony internetowej. W szczególności istnieją klasy pomocnicze zaprojektowane w taki sposób, aby uprościć nieco układy typograficzne:

  • Klasy wyrównania tekstu
  • Subheader classes - stosuje jaśniejszy kolor do dowolnego nagłówka z klasą .subheader .
  • Prowadzić style akapitów
  • Listy bez wypunktowania
  • Statystyki - stosuje większy rozmiar czcionki do ważnych liczb

Jak wspomniano powyżej, wszystkie poprzednie komponenty nawigacyjne zostały scalone w jeden duży elastyczny komponent. Oznacza to, że wszystkie typy nawigacji będą dobrze się ze sobą bawić. Oznacza to również, że możesz wybrać różne rodzaje nawigacji dla różnych rozmiarów ekranu.

Chcesz nawigować po wyskrobaniu na smartfonie i poziomym pasku na pulpicie? Łatwo zrobić z klasami o rozmiarze ekranu. Chcesz odzyskać swój "Top bar"? Wystarczy dodać dzielnik opakowania wokół domyślnych składników menu.

Ale chociaż jest łatwiejszy w użyciu, wciąż jest pełen funkcji. Koniecznie sprawdź dokumentację o menu i nawigacji .

Odznaka

Znasz te małe kółka lub kwadraty - zwykle umieszczone na ikonach lub w ich pobliżu - z małymi cyframi w nich? Podobnie jak w przypadku powiadomień na Facebooku? Są to tak zwane odznaki.

Każdego dnia uczysz się czegoś nowego. Fundacja ma je teraz.

Lepki

Chcesz, aby coś pozostało na ekranie, gdy użytkownik przewija? Chcesz, żeby to się zatrzymało w pewnym momencie? Sticky to Twoja wtyczka! Jest to również przydatne, jeśli chcesz, aby menu Magellan działało tak, jak w Fundacji 5.

Toggler

W przypadku dropdunków akordeony, drążenia w dół, podpowiedzi i modemy nie są dla ciebie wystarczające, oto ogólny sposób na pojawianie się lub znikanie rzeczy. Jest to proste przełączanie oparte na języku JavaScript, które można zastosować praktycznie do wszystkiego.

Wyobrażam sobie, że dzieje się tak w tamtych czasach, kiedy żaden z pozostałych składników nie pasuje do celu, lub byłby przesadą. Integruje bibliotekę Motion UI, dzięki czemu możesz animować znikającą czynność w dowolny sposób.

Obiekt multimedialny

Cóż, nazwa brzmi, jakby to był element, w którym można osadzić wideo lub obiekt Flash (fuj) i możesz to zrobić, jak sądzę. To, na co naprawdę ma służyć, to wyświetlanie dowolnego obiektu multimedialnego, takiego jak obraz, obok informacji tekstowych.

Na przykład możesz umieścić awatar użytkownika obok jego nazwy użytkownika i komentarza w sekcji komentarzy. Możesz też użyć go do umieszczenia daty premiery filmu, głównych aktorów i innych danych meta obok przeglądu filmu. Sprawdź dokumentację dla przykładów.

Funkcje, które są w zasadzie takie same jak wcześniej

Każda funkcja została zaktualizowana lub przepisana. Jednak wiele z nich funkcjonalnie pozostaje niezmienionych. Dokładnie sprawdź dokumentację, aby upewnić się, że masz odpowiednie zajęcia, sprawdź niektóre z ulepszeń i idź. Oto te mniej lub więcej takie same funkcje, w kolejności alfabetycznej:

  • Pozostań - walidacja formularza
  • Akordeony
  • Podstawowe style globalne
  • Ścieżka nawigacyjna
  • guziki
  • Objaśnienia
  • Mieszanki kolorów
  • Menu rozwijane
  • Korektor - wyrównanie kolumny
  • Flex Video
  • Formularze
  • Zamień responsywną treść
  • Etykieta
  • Magellan - domyślnie nie jest już lepki
  • Zapytania o media (należy zauważyć, że punkty przełamania uległy zmianie)
  • Poza płótnem
  • Paginacja
  • Paski postępu
  • Odsłonić
  • Suwaki
  • Przełączniki
  • Tabele
  • Tabulatory
  • Siatka
  • Miniatury
  • Etykietka
  • Style typograficzne
  • Widoczność i klasy użytkowe

Czy to naprawdę dobre?

Tak. Ponowne skoncentrowanie się na budowaniu witryn (w przeciwieństwie do ram, które starają się zaspokajać potrzeby zarówno witryn, jak i aplikacji) jest odświeżające, a zmniejszony rozmiar jest zawsze dodatkowym atutem.

Oczekujcie, że wkrótce zacznie działać.