Fundacja 6 - 10 niesamowitych nowych funkcji

Twórcy frameworka frontowego Foundation po prostu nie usiedli na laurach, podczas gdy zespół Bootstrap pracuje nad imponującą nową wersją główną. W zeszłym roku udali się na niesamowitą World Tour, aby podzielić się swoją wiedzą z użytkownikami i zapytać ich, jak wykorzystywali Foundation w swojej prawdziwej pracy.

Po powrocie do swoich biur, zebrali potrzeby i życzenia swoich użytkowników i rozpoczęli planowanie nowej głównej wersji frameworku: Foundation 6.

Nadal jest w fazie rozwoju, ale plany są bardzo obiecujące. Nadchodzące funkcje skupiają się na 3 głównych obszarach: wydajność, konfigurowalność i dostępność. Przyjrzyjmy się teraz 10 z tych funkcji.

1. Usprawniony przepływ pracy

W oparciu o doświadczenia użytkowników zespół Fundacji opracował nowe hasło “Prototyp do produkcji”, dla Fundacji 6. Oznacza to nowy, usprawniony przepływ pracy, który pozwoli projektantom i programistom na przejdź od prototypu do produkcji.

Celem nowej Fundacji 6 jest zapewnienie elastycznej i łatwej do dostosowania struktury, która umożliwia napisz czysty i semantyczny kod od samego początku. Obecna wersja Foundation 5 umożliwia również szybkie prototypowanie, ale możemy oczekuj dalszej optymalizacji przepływu pracy w nadchodzącym wydaniu.

2. Uproszczony proces konfiguracji wersji Sass

Jedną z najbardziej niesamowitych rzeczy w ramach Fundacji jest to, że jest ona zbudowana z języka arkusza stylów Sass, więc jest możliwe szybko dostosuj domyślne reguły stylu do naszych rzeczywistych potrzeb.

Proces konfiguracji Sass był dla wielu użytkowników trochę onieśmielający, więc nowa wersja główna będzie uzyskać uproszczony proces konfiguracji wersji Sass. Oznacza to, że konfiguracja Sass będzie wymagają znacznie mniej zależności niż wcześniej. Oczywiście, jeśli wolisz waniliową wersję CSS, nadal możesz to wybrać.

3. Nowy stos Souped Up Setup dla maksymalistów

Oprócz zwykłej wersji Sass, Foundation 6 pojawi się z dodatkiem Wersja Sass, która zapewni programistom zaawansowane opcje dostosowywania.

ZURB, twórca Fundacji, otworzy swój własny zestaw rozwojowy dla publiczności, w tym swój własny statyczny generator witryn, serwer do przeładowania na żywo i mnóstwo wewnętrznych technik optymalizacji w tym integracja UnCSS do usuwania nieużywanych stylów i UglifyJS do kompresji JavaScript.

Zasadniczo będziemy mogli pracować w tym samym środowisku programistycznym, z którego korzysta wewnętrznie ZURB.

4. Zmniejszony czas ładowania strony

Zespół Fundacji musiał zmierzyć się z pewną konstruktywną krytyką, która twierdziła, że ​​w większości projektów Fundacji około 90% kodu CSS pozostaje niezauważone. Dotyczy to nie tylko Fundacji, ale także innych głównych struktur CSS, takich jak Bootstrap i TopCoat. W ramach swojej odpowiedzi Zurb postanowił znacznie zmniejszyć rozmiar pliku wyjściowego CSS, wprowadzając około 40-50% redukcji kodu.

Warto zauważyć, że starają się odróżnić od Bootstrap, mówiąc:Fundacja nie jest ramą, która będzie miała marginesy i wyściółki klas stylistycznych lub okrągłe i promienie„. (Odwołaj się do nowych klas narzędzi Bootstrap 4 w naszym poprzednim poście).

5. Style bazowe działające jako szkielety

Druga część wysiłku na rzecz poprawy wydajności polega na stwórz podstawowy styl, który działa jak szkielet zamiast ostatecznego projektu. Prowadzi to przede wszystkim do lżejszego tematu, ale ma też inną dużą zaletę. Ponieważ więcej reguł stylu zostanie przeniesionych do poszczególnych komponentów, programiści będą mieli okazję łatwiej zaprojektować ich projekt.

Mam nadzieję, że oznacza to, że strony oparte na Fundacji będą mają mniej podobny, standaryzowany wygląd, a projektanci będą mieli więcej miejsca na experiment z pięknym i unikalnym solutjony, które obalą ostatnie obawy o nudną stronę internetową.

6. Ułatwiony import selektywny

Foundation 5 pozwala programistom wybierać tylko te składniki, których chcą używać. Fundacja 6 podejmie ten wysiłek na wyższy poziom przeniesienie funkcji importu selektywnego do pliku _settings.scss Sass.

W ten sposób _settings.scss będzie a prawdziwie uniwersalny plik konfiguracyjny, ponieważ nie tylko będziemy w stanie dostosować funkcje, takie jak szerokość wiersza lub domyślne czcionki, z jego pomocą, ale także łatwo rezygnacja z komponentów, których nie potrzebujemy. Jeśli to zrobimy, możemy osiągnąć dalszą poprawę wydajności.

7. Oparty i czystszy Sass

W procesie przeprojektowania zespół Fundacji ponownie przeanalizował każdy aspekt struktury, więc również zmienił sposób używania języka arkusza stylów Sass. Odkryli, że w niektórych przypadkach nadużywają Sassa, co prowadzi do niepotrzebna nadmierna komplikacja wyjścia CSS. Mając na uwadze chudsze i czystsze podstawy kodu, zracjonalizowali także swoją strukturę Sass.

W Fundacji 6 możemy Oczekują zmniejszonego zagnieżdżania i specyficzności, usprawnione zapytania o media (połączyli powtarzający się kod) i skalowane miksy składników. To ostatnie oznacza, że ​​będzie mniej miksów składowych, a pozostałe będą miały mniej parametrów, co doprowadzi do prostszego i bardziej logicznego kodu

Jeśli lubisz miksy, nie martw się, każdy komponent nadal będzie je posiadał, po prostu będą przeprojektowane, aby były bardziej wydajne i użyteczne niż obecnie.

8. Ulepszone mieszanki siatki

Podczas cięcia miksów składowych pojawi się Foundation 6 ulepszone miksy siatki to pozwoli nam stwórz bardziej dostosowaną siatkę.

Zurbujemy obietnice, które będziemy mogli łatwo zbudować jako skomplikowany system siatki jak chcemy, w tym bardziej wyrafinowane niestandardowe wiersze i zagnieżdżone siatki, oraz umiejętność konwersji klas domyślnych na znaczniki semantyczne. Ulepszone miksy siatkowe spowodują prąd tworzenie sieci jest jeszcze bardziej intuicyjne, elastyczne i szybsze.

9. Bezproblemowa integracja niestandardowych wtyczek JavaScript

Foundation 5 ma obecnie wiele komponentów JavaScript, takich jak fajne dialogi modalne, podpowiedzi, lepki pasek nawigacyjny, lightboxy i wiele innych, których potrzebuje nowoczesna strona internetowa, ale nadchodzące główne wydanie umożliwi nam napisz nasze niestandardowe wtyczki JavaScript wykorzystując rdzeń podstawy. To ogromny krok naprzód w obu łatwość obsługi i wydajność.

W przyszłości będziemy mogli dostęp do wbudowanych metod inicjalizacji, przełącz wyzwalacze i punkty przerwania, i wykorzystaj wszystkie inne funkcje globalnego JavaScript Fundacji.

10. Pełna dostępność

Prawdopodobnie najbardziej zadziwiającą cechą nowej Fundacji 6 jest to, że będzie ona w pełni dostępna. Każdy składnik i fragment kodu będzie zawierał odpowiednie atrybuty WAI-ARIA i ważne role. Ponadto deweloperzy będą nawet dostarczane z instrukcją obsługi o jak korzystać ze standardów internetowych a11y.

Jeśli więc chcemy zapewnić naszemu klientowi w pełni dostępną stronę internetową, nie musimy robić nic innego, jak budować nasz projekt za pomocą Fundacji 6. Należy pamiętać, że nadal będziemy musieli dodaj odpowiednie reguły ARIA do naszych stron HTML na własną rękę, chociaż nadchodzący podręcznik użytkownika Zurb ułatwi proces uczenia się.