Fundacja jest jednym z dwóch znanych frameworków HTML / CSS / JS dla programistów front-end. To się nie stało przez przypadek. Dziś jesteśmy tutaj, aby powiedzieć Ci wszystko, dlaczego powinieneś go używać.

Teraz najpierw dla tych, którzy mogą napisać własny HTML, ale nigdy wcześniej nie pracowali z frameworkiem, oto wyjaśnienie:

Ramy to w zasadzie duże paczki z wcześniej napisanym kodem, które pomogą Ci szybciej rozpocząć realizację projektów. W przypadku kodu front-end, takiego jak HTML i CSS, oznacza to, że znajdziesz takie elementy, jak siatki układów, podstawowe style przycisków i często używane elementy interfejsu. Większe frameworki mogą również zawierać wtyczki jQuery.

Nie są one przeznaczone do wykorzystania jako kompletne szablony lub motywy stron internetowych, ale jako zestaw elementów konstrukcyjnych. Bierzesz to, czego potrzebujesz, modyfikujesz je tak, aby pasował do projektu, i na ogół kontynuujesz swoją pracę (i swoje życie, prawdopodobnie). Są przeznaczone do spersonalizowania i majsterkowania.

Może to być początkowo zniechęcające zadanie, jako ramy takie jak Fundacja i jej główny rywal, Bootstrap, dostałem ogromny. Każda z nich zawiera tysiące linii CSS. Zanim podejmiesz zobowiązanie do skorzystania z jakiejkolwiek struktury dla dowolnego projektu, musisz ocenić jego potencjalne korzyści w stosunku do kosztu czasu.

Mimo to, kiedy już przyzwyczaisz się do architektury, możesz znacznie skrócić czas pisania znaczników i CSS.

Trochę historii

Fundacja rozpoczęła życie jako zwykły przewodnik po stylu i jakiś wspólny kod. Faceci w ZURB zdecydowali się przyspieszyć proces tworzenia prototypów, pobierając trochę kodu HTML i stylów, które mieli skłonić do ponownego wykorzystania, i stworzyli z niego framework. to jest to! Tak naprawdę powstaje większość dobrych rzeczy. Ktoś go potrzebował, więc go zrobili.

Z biegiem czasu zdecydowali, że to, co zrobili, było zbyt dobre, aby utrzymać się w spokoju, więc wypuścili wersję 2.0.0 na cały świat. Sprawili, że wszystko reagowało, polerowało i otwierało dla nas wszystkich. Teraz projektanci i programiści na całym świecie używają kodu ZURB, aby uczynić swoje produkty szybszymi i być może odważę się powiedzieć to lepiej.

Od momentu wydania w dniu 18 października 2011 roku Licencja MIT framework stał się jednym z "wielkich dwóch" i widział zastosowanie na tysiącach stron internetowych.

Jego popularność przemawia zarówno do jej użyteczności, jak i wszechstronności. Jeśli zdecydujesz, że Fundacja jest dla Ciebie odpowiednia, nie zawiedzie Cię to.

cechy

Fundacja jest aktywnie rozwijana już od prawie trzech lat. Nie jest zatem niespodzianką, że lista funkcji jest obszerna.

W jego rdzeniu ramy znajdują się pliki CSS (generowane z plików SASS, również dostępne do pobrania) oraz kilka wtyczek jQuery. W głównym pobieraniu nie ma HTML (z wyjątkiem bardzo prostej strony demo, możesz sam to napisać.

Powiedział, że istnieje szczegółowa dokumentacja na temat każdego komponentu. Każda sekcja dokumentacji zawiera przykładowy kod HTML, który możesz wykorzystać i dostosować w razie potrzeby. Jeśli chcesz zanurkować, sprawdź dokumentacja.

Jeśli chcesz dostosować strukturę od podstaw, możesz zrobić dwie rzeczy:

opcja 1

Możesz pobrać tylko te komponenty, które chcesz główna strona pobierania. Jeśli tylko chcesz, to siatka, nawigacyjny CSS i plugin jQuery lub dwa, to dość łatwe. Po prostu usuń wszystkie rzeczy, których nie chcesz uwzględnić, i gotowe!

Ten "generator ram" zawiera również opcje dostosowywania siatki, głównych kolorów i kilku innych opcji. To jest opcja, którą wybrałbym, powiedzmy, prototypowania lub opracowania wewnętrznej aplikacji firmy. Domyślne style prezentacyjne są na ogół wystarczająco dobre dla tych rzeczy, więc po co je zmieniać i zmieniać, gdy nie trzeba?

Opcja 2

Teraz jest to dla ludzi, którzy wykorzystają ramy dla projektów publicznych. Nie będziesz chciał używać domyślnych stylów prezentacji, ponieważ najprawdopodobniej nie będą one pasować do Twojego brandingu. W celu dogłębnej personalizacji musisz udać się do źródła.

I przez źródło, mam na myśli pliki Sassa. Dzięki nim możesz dostosowywać każdą zmienną do własnych upodobań, dzięki czemu ramy będą naprawdę twoje.

( Uwaga na temat plików Sass: znowu dla tych, którzy mogą nie znać tego terminu, Sass jest preprocesorem CSS, który wprowadza takie elementy jak zmienne, mixiny i inne funkcje programistyczne do zwykłego CSS.

Wyszukaj w Google coś takiego jak "Kompilator Sass dla [twojego systemu operacyjnego]", a znajdziesz to, czego potrzebujesz. Osobiście nie mogę polecić tej platformy Aplikacja Koala dość.)

Gdy twoje pliki Sass zostaną wkompilowane w jeden zwykły plik CSS, po prostu połącz go z sekcją tak, jak każdy inny plik CSS. Na przykład aplikacja Koala będzie kompilować pliki Sass automatycznie za każdym razem, gdy je zapiszesz, aby przeglądarka zawsze widziała najnowsze zmiany.

Struktura

Siatka

Nie mogę powiedzieć na pewno, że wszystkie frameworki HTML mają układ siatki dla układu, ale większość robi. Siatka Fundacji, bez żadnej personalizacji, jest klasyczną dwunastokolumnową, gniazdową i responsywną.

Znaczniki i klasy są proste, w tym klasy umożliwiające dostosowanie układu według rozmiarów ekranu. Jeśli wcześniej pracowałeś z systemami gridowymi, takimi jak 960 Grid System, nie znajdziesz trudnej do opanowania siatki Foundation.

Uwaga: kodowane jest podejście mobilne, dlatego warto o tym pamiętać podczas układania witryny.

Siatka blokowa

Pomyśl o tym jako o "mini-siatce". Został zaprojektowany w taki sposób, aby zachować określoną liczbę przedmiotów równomiernie i niezależnie od wielkości ekranu.

Przykład: masz trzy elementy o identycznych rozmiarach, które chcesz trzymać obok siebie na każdym urządzeniu. Aby to zrobić, użyjesz tego przykładu siatki blokowania, którą bezwstydnie ukradłem z dokumentacji:

Pamiętaj, że jeśli chcesz, możesz określić inną liczbę kolumn dla różnych rozmiarów ekranu. Elementy zachowają równą wielkość. Ten komponent jest idealny do takich rzeczy jak galerie zdjęć.

Responsywne rzeczy

Zapytania o media są proste, ale zostały zaprojektowane z myślą o wielu rozmiarach ekranu, począwszy od smartfonów po absurdalnie duże ekrany iMac.

Zaprojektowanie od podstaw do mobilnego pierwszego to świetny początek. Fundacja idzie o krok dalej, włączając w to konkretne komponenty, które pomogą ci jeszcze bardziej udoskonalić responsywne części twoich stron.

Po pierwsze, istnieją zwykłe klasy służące do ukrywania lub pokazywania różnych elementów w różnych rozmiarach widocznych obszarów. Następnie otrzymasz nieco bardziej zaawansowane rzeczy, takie jak Wymieniać.

Interchange to biblioteka JS, która dynamicznie ładuje różne treści w zależności od zapytań o media. Możesz użyć tej biblioteki, aby zdecydować, czy załadować, na przykład, obraz .JPG mapy, czy osadzić Google Maps. Lub zwykły obraz zamiast obrazu o wielkości ekranu siatkówki.

Korzystając z tej biblioteki, możesz zapisać swoich użytkowników niektóre dane i trochę pamięci RAM. Po prostu pamiętaj, aby wdrożyć fall-back dla tych użytkowników z wyłączoną obsługą JavaScript.

Nawigacja

Opcje nawigacji są bogate w podstawy, począwszy od uniwersalnego paska nawigacyjnego (wraz z menu rozwijanymi), do pasków ikon, nawigacji w menu nawigacyjnym, paginacji, sidebarów i innych.

Istnieją jednak dwa komponenty nawigacyjne, które sprawiają, że Foundation wyróżnia się na tle innych frameworków.

Magellan

Pierwszym z nich jest Magellan Sticky Nav. Umieść ten pasek nawigacji w dowolnym miejscu na stronie, a gdy przewiniesz za jego początkową lokalizacją, pójdzie za tobą. Jeśli używasz go do połączenia z sekcją na bieżącej stronie, możesz podświetlić każdy z nich (w samym pasku) podczas przewijania w dół.

Offcanvas

Drugi to Offcanvas, który jest pionowym paskiem nawigacyjnym, który jest domyślnie ukryty. Naciśnij przycisk menu, a menu przesunie się na stronę dla przyjemności przeglądania.

Należy pamiętać, że podobnie jak wszystkie komponenty Foundation mogą być one implementowane z minimalną ilością znaczników. Chłopaki z ZURB włożyli dużo pracy w sprawienie, aby dość zaawansowane elementy interfejsu użytkownika były łatwe do wdrożenia i to pokazuje.

Głoska bezdźwięczna

Komponenty związane z mediami w każdym frameworku często pojawiają się tam, gdzie twórcy frameworków mają skłonność do popisu, a Foundation nie jest wyjątkiem.

Na przykład domyślnie dołączony jest Czyszczenie Lightbox. To naprawdę martwa prosta galeria obrazów w lightboxie. Wystarczy rzucić kilka miniatur, dołączyć do odpowiednich klas i mieć galerię obrazów obsługujących dotyk, która obsługuje obrazy o zmiennej wysokości bez żadnych problemów.

Kolejna jest Flex Video, który teoretycznie może być użyty dla dowolnego obiektu, który można osadzić. Po prostu umieść element div z klasą flex-video na swoim wideo, elemencie iframe, elemencie osadzonym lub elemencie wideo w serwisie YouTube i możesz kontynuować. Obiekty te nie będą automatycznie skalowane z rozmiarem przeglądarki.

Wreszcie, istnieją style zawarte dla miniatur zdjęć. Nic nadzwyczajnego i specjalnego do zobaczenia tutaj ... po prostu miło je mieć.

Ale co z Orbit?

Osoby, które korzystały z Foundation przed wersją 5, mogą się zastanawiać nad wtyczką ZURB's Orbit. To karuzela, czasami nazywana pokazem slajdów, komponent, który jest responsywny, wyposażony w funkcje i działa całkiem nieźle.

Mimo że wciąż jest w ramach, nie jest już wspierany przez ZURB, ani też nie jest aktywnie rozwijany.

Twórcy Fundacji sami zalecają poszukiwanie alternatyw, takich jak Sowa Karuzela, lub Przysiek.

Formularze

Oczywiście nie zapomniano o podstawowych stylach formularzy. W rzeczywistości przez lata były udoskonalane w dzieła o niezwykle subtelnej urodzie. Możesz myśleć, że przesadzam, ale nie sądzę, żebym był. Lata doświadczeń zostały przekształcone w podstawowe style formularzy, które, jak sądzę, mogą znaleźć zastosowanie w prawie każdym projekcie, z minimalną ilością poprawek.

Potrzeba umiejętności, aby stworzyć coś tak nudnego, jak formy wyglądające jednocześnie na ogólne i ładne. Nic dziwnego, że wiele ram, które wypróbowałem, naśladowało styl Fundacji.

Powiedział, że to nie wszystkie nudne pola tekstowe i przyciski radiowe. Wiesz, że musieli zrobić coś własnego.

Weź komponent suwaka, na przykład: Możesz zaimplementować suwaki zasięgu za pomocą HTML5, ale są one nudne i używają domyślnego wyglądu dowolnego systemu operacyjnego, z którego korzystasz. Z drugiej strony, Fundacja zawiera suwaki, które można stylizować za pomocą CSS dla przyjemności dostosowywania.

Dołączona jest również biblioteka sprawdzania poprawności formularzy (więcej kodu JavaScript tutaj ...), która pozwala upewnić się, że Twoi użytkownicy wprowadzają właściwe dane. Gdy wprowadzą coś nieprawidłowego, na przykład nieprawidłowy adres e-mail, pojawi się powiadomienie i powiadomi je o tym.

guziki

Nie można utworzyć frameworka bez domyślnych stylów przycisków. Mam na myśli, że możesz, ale to po prostu nie byłoby w porządku. Domyślne przyciski Fundacji nie różnią się zbytnio od innych ram. Oznacza to, że są one implementowane z minimalnym znaczeniem i mają różne klasy wielkości i kolorów.

Możesz jednak je pogrupować grupy przycisków do rodzaju rzucania powiązanych działań razem. Te grupy przycisków (w każdym razie poziome) są zaprojektowane tak, aby idealnie działały z siecią. Mają też dodatkowe zajęcia na rozmiar, kolor i zaokrąglone rogi ... wszystkie zwykłe rzeczy.

Zmień nieco marżę, a Fundacja również może ci dać przyciski rozwijane , i tych podzielone przyciski . Wiesz, głównie menu rozwijane z przyciskami?

Te dwa ostatnie komponenty wykorzystują wbudowaną wtyczkę Foundation. Oznacza to między innymi, że są one zależne od JavaScript. Mimo to są łatwe do wdrożenia. Chodzi o zajęcia.

Typografia

Fundacja używa bardzo prostego, typograficznego układu sans-serif, aby zacząć. Jest prosty, łatwy do dostosowania, z pewnymi podstawowymi zmiennymi Sass, a wszystkie są stosunkowo duże. Zgadza się, Fundacja używa rem .

Ponieważ twórcy Fundacji wierzą w użyteczność, wszystko jest na tyle duże, że można je łatwo odczytać na małych ekranach. Czytanie z umiarkowanej odległości na zwykłym laptopie / ekranie komputera również nie sprawia mi problemu.

Dodatkowe funkcje typograficzne obejmują:

Listy wbudowane

Potrzebujesz poziomej listy tekstowej? Wiesz, w rodzaju stopki na stronie internetowej? Jesteś objęty. Według twórców powinieneś:

Oni mają rację.   ssie do kontroli przestrzennej.

Etykiety

Są to w istocie małe fragmenty tekstu z kolorowym tłem. Do czego możesz ich użyć? Tagi i inne metadane lub jak ich nazwa wskazuje, możesz ich użyć do oznaczania rzeczy, np. utwórz pola.

W zestawie znajdują się zwykłe etykiety, etykiety ostrzegawcze i etykiety ostrzegawcze. To tylko jedna z tych drobnych, przydatnych rzeczy, które uwielbiam w Fundacji.

Zobacz też: Klawisze

Objaśnienia i monity

Czasami na stronie internetowej, a znacznie częściej w aplikacji, potrzebujesz sposobów na zwrócenie uwagi użytkownika. Robisz to, aby przedstawić im niezbędne informacje, przyciągnąć ich wzrok do niekompletnego pola formularza lub działania lub nauczyć ich obsługi aplikacji.

Jeśli jesteś zły, możesz to zrobić, aby odtwarzać reklamy ... z dźwiękiem.

Możesz to zrobić za pomocą okna modalnego. Fundacja ma świetne okna modalne z rozbudowanymi opcjami behawioralnymi, opcjami wymiarowania, powiązaniami zdarzeń ... nawet opcją usuwania tła.

Następnie są alerty. Te duże, kolorowe skrzynki ostrzegawcze są ustawione statycznie i rozciągają się do szerokości ich kontenera. Jednak zawsze możesz ustawić je jako stałą pozycję dla alertów dotyczących całej witryny. Czy wspomniałem już o kolorze, zaokrąglonych narożnikach i innych klasach prezentacji? Mam zamiar przestać, ponieważ robią to dla wielu rzeczy.

Następnie mamy podpowiedzi. Można je zastosować do dowolnego elementu i ustawić tylko na dużych ekranach lub na wszystkich ekranach. (Na urządzeniach mobilnych trzeba dotknąć danego elementu, aby wyświetlić etykietkę narzędzia). Można je również umieścić po dowolnej stronie elementu.

Joyride przenosi podpowiedzi do następnego poziomu. Jest to wtyczka, która wykorzystuje etykiety narzędzi (i inne rzeczy), aby umożliwić użytkownikom obejrzenie Twojej witryny lub aplikacji. Idealne dla początkujących użytkowników, jeśli interfejs jest z konieczności skomplikowany.

Zadowolony

Podstawowe struktury HTML / CSS pozwolą Ci uporządkować zawartość na stronie i nadać jej nieco stylu. Jest to jednak jedna z dużych frameworków, co oznacza dodatkowe komponenty, nawet dla zawartości.

Najpierw mamy stoły cenowe: faceci ZURB dobrze znają swoją publiczność. Wiele osób chce łatwych sposobów wyświetlania informacji o cenach dla różnych produktów i usług. Fundacja przekazuje je w dość standardowym formacie.

Następnie, paski postępu . Nie będę się nad nimi rozwodził. Są dokładnie tym, czego można się spodziewać.

Fundacja zawiera także podstawową wtyczkę akordeonową oraz spodziewaną wtyczkę treści z zakładkami. Myślę, że warto zauważyć, że możesz umieścić zawartość z zakładkami w sekcji akordeonu.

Wreszcie, jest to coś, co widziałem w kilku innych frameworkach, i uważam, że jest to niezwykle interesujące: komponent o równej wysokości kolumny. Nazywają to Wyrównywacz , nazwa tylko w połowie tak kiepska jak jego funkcja. Oczywiście wymaga JavaScript, ale jest to bardzo prosty sposób, aby wszystkie kolumny w danej sekcji zachowały jednakową wysokość w sposób responsywny.

Po prostu dodaj kilka atrybutów danych i możesz jechać. Oto, jak wygląda połączenie z komponentem tabeli cenowej:

Jak zacząć

Teraz przejrzałeś obszerną listę funkcji i chcesz ich funkcji! Dobrze? Cóż, jeśli rzeczywiście mam rację, oto jak zacząć.

Zamierzamy stworzyć ładny, prosty, podstawowy szablon w grze Foundation for practice. Możesz śledzić tekst we własnym edytorze tekstu, kopiować i wklejać kod lub po prostu pobrać szablon, który udostępniłem, ponieważ jesteś oszustem.

Po tej sekcji będę wymieniać wiele innych świetnych samouczków i materiałów szkoleniowych, które pomogą ci w drodze do zostania mistrzem Fundacji.

Idź pobierz domyślny pakiet na strona pobierania , i zaczynajmy.

Uwzględnij pliki podstawowe w projekcie

Teraz, po pobraniu pakietu, struktura pliku wewnątrz niego będzie wyglądała mniej więcej tak:

project-folderindex.html (Demo file.)humans.txt (Like a readme file.)robots.txt (Just leave this alone.)/cssfoundation.cssfoundation.min.css *normalize.css */img (Note: Empty)/jsfoundation.min.js */foundationfoundation.abide.jsfoundation.accordion.jsfoundation.alert.js(Etc. Huge list here.You can keep these files to see/playwith the source, but you don't actuallyneed them to use the framework.)/vendorfastclick.jsjquery.cookie.jsjquery.js *modernizr.jsplaceholder.js

Zauważysz, że umieściłem gwiazdkę po niektórych z tych plików. Są to jedyne pliki, których potrzebujesz, aby framework zrobił swoje. Reszta to pliki źródłowe lub ładne dodatkowe narzędzia. Te narzędzia z pewnością pomogą Ci robić niesamowite rzeczy, ale nie są absolutnie konieczne.

Na przykład plik placeholder.js implementuje atrybut zastępczy formularzy HTML5 dla przeglądarek, które go nie obsługują.

Pliki, które zaznaczyłem, są jedynymi, do których absolutnie potrzebujesz łącza w sekcji Twojej strony internetowej / aplikacji. Na potrzeby tego samouczka zamierzam usunąć większość tych plików i zachować tylko te, które są niezbędne. Będę też zaczynać od zera z pustym index.html .

Na początek nasza "strona główna" będzie wyglądać mniej więcej tak:

< !DOCTYPE html>

Być może zauważyłeś tam dodatkowy plik CSS. Będziemy potrzebować tego dla niestandardowych stylów.

Utwórz prosty układ

Ponieważ jest to strona główna, przyjmijmy tę koncepcję dalej. Uczynimy z niego wyjątkowo ogólną stronę docelową dla niektórych lub innych firm. Brak dwu kolumnowego układu tego samouczka! Te są z mody.

Zwróć uwagę, że pomijam, w tym przykładowy pasek nawigacji lub wezwanie do działania. Są to całkowicie rzeczy, które powinieneś robić w prawdziwych projektach.

Nagłówek

Zgodnie z obowiązującymi prawnymi trendami w zakresie projektowania, musimy zrobić ogromny nagłówek z nazwą naszej firmy, hasłem i ogromnym obrazem tła (nie zawartym w tym samouczku).

Kod HTML jest dość prosty:

Our Company Name
Insert a pithy slogan here

Klasa rzędów nie tylko określa zewnętrzne granice naszej siatki, ale centruje ją dla nas. Element nagłówka jest tam zarówno ze względów semantycznych, jak i w celu dodania wskaźnika, aby dodać obraz tła później.

Chcemy, aby nasza kolumna siatki nagłówkowej rozciągała się do stuprocentowej wielkości bez względu na rozmiar ekranu, więc potrzebujemy tylko klasy small-12 . Średnie i duże ekrany będą dziedziczyć te style, chyba że zostaną określone inne.

Mamy nasz nagłówek i nasz wyśrodkowany tekst. To jednak nie daje nam najlepszego nagłówka, jakiego chcemy. W tym celu potrzebujemy kilku niestandardowych stylów:

/*  HEADER STYLES  */header#page-header {height: 500px;background: #cecece;}header#page-header > div.row {position: relative;top: 50%;transform: translateY(-50%);}

Jak widać, nadałem naszemu nagłówkowi kolor tła zamiast rzeczywistego obrazu i wyśrodkowałem pionowo zawartość nagłówka. Całkiem fajnie, co? Oto jak wygląda nasza strona:

Wprowadzenie i usługi

Więc odważnie ogłosiłeś siebie swoim nagłówkiem. Czas powiedzieć swojemu użytkownikowi, kim jesteś i co robisz. Mały opis każdej usługi lub produktu ... tak to robimy w dzisiejszych czasach.

Zacznijmy.

Who We Are
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam. Facer noster usu no, duo sumo maiorum eu. Sea id semper maluisset iracundia.
What We Do
Service Name
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
Service Name
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
Service Name
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
Service Name
Lorem ipsum dolor sit amet. ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.

W porządku, jak widzisz, wszystko, co zrobiłem, to dodać więcej wierszy i kolumn z treścią. Zastosowałem odpowiednie klasy do skalowania kolumn do urządzenia, na którym są wyświetlane.

W sekcji #introduction nie zrobiłem tylko środkowej kolumny pełnej szerokości. Zamiast tego, aby upewnić się, że akapit wprowadzający był czytelny, zmniejszyłem go i nadałem mu odpowiednie klasy odsunięcia dla każdego rozmiaru ekranu.

Pionowe rozmieszczenie sekcji zawartości jest czymś, co musisz zrobić dla siebie w każdym frameworku, więc znowu potrzebowałem niestandardowego CSS:

section#page-content, section#page-content > #services {padding-top: 3em;}section#page-content {padding-bottom: 3em;}

Nic specjalnego. Ponieważ prawie wszystko, łącznie z siatką, jest rozstawione z ems, użyłem ich do wypełnienia, aby zachować spójność wizualną. Pomyśl o rozmieszczeniu elementów w oparciu o em jako wbudowanej linii bazowej, z której możesz łatwo skorzystać.

Oto, jak wygląda teraz cała sprawa:

Stopka

Dajmy sobie pospieszną stopkę z kilkoma linkami nawigacyjnymi i informacją o prawach autorskich, ponieważ dlaczego nie?

Tutaj dodałem listę śródliniową (patrz wyżej) dla tych linków stopki i dwie kolumny, które idą pionowo pod rozmiarem telefonu. Oto używany CSS:

footer#page-footer {padding-top: 3em;padding-bottom: 3em;border-top: 1px solid #cecece;}

I voila! Strona docelowa o niezgodzie, abyś mógł dostosować zawartość do swoich serc. Oto, jak wygląda cała sprawa:

Chwyć plik zip, jeśli chcesz, i graj z kodem, który już tam jest. Zacznij od zera i spójrz na źródło. Możesz też rzucić okiem na materiały szkoleniowe, które inni poczynili ...

Poradniki i trening

Materiały szkoleniowe ZURB

Jak można się było spodziewać, chłopaki z ZURB wykroczyli poza dokumentację, dostarczając nam własne materiały szkoleniowe. Przyjmują one formę Kurs podstawowy i Zaawansowany kurs podstawowy . Te materiały szkoleniowe mają być pobierane i wyświetlane lokalnie.

ZURB oferuje również płatne zajęcia szkoleniowe, które można podjąć online. Możesz znaleźć więcej informacji na ten temat na swojej stronie internetowej .

Screencasty przez Webdesigner Depot

Zgadza się! Przygotowaliśmy własne filmy szkoleniowe, ze szczególnym uwzględnieniem Fundacji 5. Sprawdź je na Youtube: Podstawa 5 Wprowadzenie , i Korzystanie z zaawansowanych funkcji Fundacji

Pierwsze kroki z ZURB Foundation 5 Grid

To zestaw screencastów James Stone obejmuje wszystkie podstawy. Tematy obejmują: Konfigurowanie projektu, Zaczynając od Siatki pulpitu, Rozmieszczone siatki pulpitu, Dodawanie obrazów zastępczych, Tworzenie mobilnego doświadczenia i Udoskonalanie obsługi tabletu.

ZURB Foundation 5 tutoriali ramowych

Faceci w ieatcss.com poszedł i napisał cały e-book o Fundacji 5. Możesz znaleźć tutoriale dla początkujących tutaj. Jeśli chcesz czegoś bardziej zaawansowanego, możesz pobrać ich ebook za 29 USD.

Dlaczego miałbyś to zapłacić? Ponieważ zamiast po prostu mówić ci, jak używać ram, tłumaczą, jak wszystko działa. I mam na myśli wszystko, łącznie z wtyczkami JavaScript.

Mastering Foundation Zurb. samouczki od A do Z

To jest kolejne zestaw samouczków, a następnie opcjonalny ebook. Są one dostarczane przez MonsterPost, blog TemplateMonster.

Wyjaśniane są jasne style Fundacji

Jeśli masz ochotę na nieco bardziej zaawansowany, dogłębny samouczek, tu masz ! W tym poście nasi przyjaciele Tuts + opisz szczegółowo, jak spersonalizować FOUNDation z plików Sass.

Jeśli wcześniej nie pracowałeś z plikami Sass, zacznij tutaj.

Jak tworzyć responsywne tabele w Fundacji

Wreszcie, świetni faceci z Sitepoint pokazują nam, jak tworzyć elastyczne tabele . Pamiętaj, że jest to rozwiązanie, które Fundacja implementuje domyślnie. W tym samouczku możesz dowiedzieć się, jak wziąć jeden konkretny komponent Foundation i zintegrować go z innym projektem.

(Jeśli jesteś początkującym projektantem stron internetowych, być może słyszałeś coś o tabelach jako "złych".) Cóż, jeśli używasz ich do układania strony, jest to absolutnie prawdą, ale czasami dane najlepiej przedstawiają tabelę, więc dobrze jest nauczyć się, jak tworzyć tabele czytelne na urządzeniach mobilnych).

Widły

Gumby - widelec Fundacji

Jedną z najpiękniejszych rzeczy na temat struktur Open Source, takich jak Fundacja, jest to, że ich licencje pozwalają ludziom je wykorzystywać, zmieniać, a nawet nazywać je własnymi. Projektanci i programiści w Chirurdzy cyfrowi właśnie to zrobiłem.

Zachowali części strukturalne Fundacji, a następnie dodali kilka interesujących nowych komponentów interfejsu użytkownika i wtyczek jQuery. Wynik został nazwany Gumby i jest to fantastyczna struktura sama w sobie.

Tam, gdzie Fundacja została zaprojektowana tak, aby była elastyczna i pasowała zarówno do stron internetowych, jak i do treści internetowych, Gumby jest bardziej wyspecjalizowana. Skupia się na jednej rzeczy: witrynach opartych na treści i łatwym ich tworzeniu.

Prawie płaski interfejs

Zmiany w Fundacji w ten widelec są tak subtelne, że nie jestem pewien, czy nazwać to widelcem, czy motywem. Jest to w gruncie rzeczy podstawa 5.2.2 z kilkoma niewielkimi zmianami estetycznymi.

To, co mnie interesuje, to fakt, że zmiany te podważają trend "płaskiej konstrukcji" na bardzo mały sposób. Rozumowanie wydaje się takie, że niektóre elementy interfejsu użytkownika, takie jak przyciski, powinny zachować subtelne odniesienie do trzeciego wymiaru.

Jest to nieco skandomorficzny projekt i myślę, że może poprawić użyteczność. Cóż, w każdym razie dla niektórych użytkowników.

Różne zasoby i narzędzia

Oto kilka interesujących narzędzi związanych z Fundacją i rzeczy, które nie pasowały do ​​żadnej innej kategorii:

Building Blocks by ZURB

The Cegiełki są fragmentami kodu zbudowanymi z i / lub dla Fundacji. Należą do nich nowe składniki interfejsu użytkownika, układy treści do ponownego wykorzystania i wiele innych.

Sublime Text snippets

Wysublimowany tekst to fantastyczny edytor tekstu używany przez programistów na całym świecie. Te fragmenty (Fragmenty kodu przeznaczone do łatwego wstawiania do dowolnego pliku) mają na celu sprawienie, aby układy budowlane z Fundacją przebiegały o wiele szybciej. Są one zgodne zarówno z Sublime Text 2 i 3.

Eksperymentalny generator siatki

Czy domyślna siatka z dwunastoma kolumnami nie odpowiada twoim potrzebom, czy też nie pasuje do twojego projektu? Potem zrób nowy! Po prostu przejdź do tego generator siatki , wprowadź swoje wartości i chwyć swój CSS.

Zauważcie, że CSS wydaje się być oparty na starszej wersji Fundacji, więc może być konieczne dostosowanie jej do nowszych nazw klas i responsywnych klas. Mimo to wykonuje wszystkie trudne obliczenia.

Bookmarklety

Bookmarklety to niewielkie narzędzia, zwykle zbudowane za pomocą JavaScript, które można umieścić na pasku zakładek. Po ich uruchomieniu mogą udostępniać bieżącą stronę, wyświetlać przydatne informacje w nakładce i wiele innych przydatnych drobiazgów.

The Grid Displayer Bookmarklet Antoine'a Lefeuvre'a można użyć do nałożenia siatki wizualnej na dowolną stronę, nad którą aktualnie pracujesz. Siatka jest konfigurowalna, ale możesz ją łatwo ustawić na domyślne ustawienia Fundacji.

The Pionowa siatka rytmiczna Bookmarklet Kevin Altman robi to samo, co Grid Displayer. Różnica polega na tym, że zamiast pionowych linii dostajesz pęczek linii poziomych, które pomagają w zarządzaniu pionową przestrzenią między elementami.

[Reakcja na reklamę] Victor Coulon przeładuje bieżącą stronę, na której znajduje się narzędzie pozwalające szybko przejrzeć projekty w różnych rozdzielczościach.

Spojrzenie na to, co nadchodzi

Lepiej uwierz, że ZURB nie siedzi nieruchomo. Wraz z wszystkimi innymi rzeczami, które robią, ciężko pracują. Mają kilka fajnych rzeczy, takich jak:

Podstawa dla aplikacji

ZURB tworzy zupełnie nową wersję Fundacji, która nie zastąpi Fundacji 5, ale działa razem z nią. Będzie zawierał funkcje przeznaczone specjalnie do projektowania, tworzenia prototypów i tworzenia aplikacji internetowych.

Funkcje obejmą nową siatkę, integrację z Angular.js, nowe funkcje zaprojektowane specjalnie do prototypowania i wiele innych. Aby dowiedzieć się więcej o tym, co robią, zobacz, co mają do powiedzenia: Next Foundation .

Interfejs Motion

Technicznie, Motion UI będzie częścią tej nowej, zorientowanej na aplikacje wersji Foundation, ale wyobrażam sobie, że będzie ona dostępna jako osobny komponent do użycia w dowolnym miejscu. (To jest wykształcone przypuszczenie, nic więcej ...) Co to jest? To biblioteka animacji.

Nowoczesne aplikacje intensywnie wykorzystują animację, nie tylko po to, by przekonać użytkowników, ale także w celu poprawy użyteczności. Interfejs Motion został zaprojektowany, aby ułatwić tym użytkownikom budowanie złożonych interfejsów.

Według samych ZURB:

I chociaż myślę, że celowe, całkowite wyeliminowanie skeomomorfizmu mogło być w pierwszej kolejności lekkim przesadzeniem (zobacz, co powiedziałem wcześniej o "Almost Flat UI"), cieszę się, że proponujemy alternatywy . Potrzebujemy nowych sposobów, aby poinformować naszych użytkowników, jak najlepiej wykorzystać nasze produkty, a animacja to świetny sposób na zarządzanie tym produktem.

Wniosek

Fundacja jest właśnie tym, co sugeruje jej nazwa. To punkt wyjścia, i to jest świetne. To nie jedyne świetne ramy, ale jest to dobry wybór dla każdego, kto chce szybciej tworzyć piękne produkty.

Czy jest to właściwe dla Ciebie i Twoich projektów? Zajrzyj do środka i dowiedz się.