Buduj strony internetowe Superszybko z Fundacją 5 [Przewodnik]
Korzystanie z frameworka może usprawnić proces projektowania stron internetowych na wiele sposobów. To może pomóż postępować zgodnie z nowoczesnymi zasadami projektowania takie jak mobilne podejście, znaczniki semantyczne i projektowanie responsywne. Możesz wykorzystaj wiele gotowych do użycia elementów CSS i JavaScript i znacząco przyspieszyć proces rozwoju, uwolnienie więcej czasu na skupienie się na projektowaniu wizualnym i projektowym.
Zurb Foundation 5 to jedna z najmocniejszych struktur frontendowych na rynku. Jest logicznie zbudowany, łatwy w użyciu i całkowicie darmowy. Pozwala na korzystanie z a elastyczna siatka CSS że ułatwia tworzenie czystego, przyjaznego dla użytkownika układu. Ramy Foundation są również mocno testowane, więc dbają o kompatybilność między przeglądarkami i urządzeniami.
W tym samouczku pokażę ci jak zbudować superszybką stronę internetową z Fundacją Zurb 5. Możesz zobaczyć końcowy wynik na stronie demonstracyjnej.
Stworzę układ strony, czeka na ciebie zadanie dodania subtelnych elementów. Witryna, którą stworzymy razem w tym samouczku, spełni marzenie współczesnego projektanta UX: będzie responsywny, mobilny, przyjazny dla użytkownika i semantyczny.
Ze względu na długość tego przewodnika, tutaj są skróty, aby dostać się do sekcji, którą chcesz szybko:
- Pobieranie Fundacji 5
- Zrozumienie siatki
- Kiedy używać klas Large-N, Medium-N i Small-N
- Dodawanie górnego paska menu
- Wypełnianie części głównej
- Dodawanie panelu do popularnych postów
- Dodawanie 3 kolejnych postów do popularnego panelu
- Upiększanie CSS
- Dodawanie większej ilości treści
- Dodawanie paginacji
- Wypełnianie paska bocznego
- Formularz newslettera
- Flex Video
- Menu paska bocznego
- Wniosek
1. Pobieranie Fundacji 5
Możesz pobrać Foundation 5 w 4 różnych formach:
- pełny kod
- lżejsza wersja z tylko podstawowym kodem
- niestandardowa wersja, w której możesz dostosować to, czego potrzebujesz, a co nie
- wersja Sass, jeśli chcesz ustawić zmienne i miksy w SCSS.
W tym samouczku wybiorę kompletny kod z waniliowym CSS, ale oczywiście możesz wybrać dowolne inne wersje, jeśli chcesz usprawnić swoją witrynę i używać tylko tego, czego naprawdę potrzebujesz.
Po pobraniu i rozpakowaniu pliku zip otwórz plik index.html w przeglądarce, a zobaczysz coś takiego:
Tak, devs zawierał przydatne linki w pliku indeksu. Możesz zostawić to w ten sposób i utworzyć nowy plik dla swojego prototypu o nazwie home.html lub coś podobnego, ale tak naprawdę nie musisz go przechowywać, ponieważ możesz łatwo dotrzeć do Dokumentacji Fundacji, kiedy tylko chcesz.
Otwórz plik index.html w ulubionym edytorze kodu i usuń wszystko wewnątrz sekcja, ale przed zamknięciem Reguły stylu, które dodajemy do app.css plik do ładnego naszego prototypu to: Jako Foundation 5 używa jednostek względnych, musimy użyć “em”-s lub “rem”-s zamiast pikseli nadążać za zasadami. (Możesz przeczytać o jednostkach CSS: Piksele vs ems vs% tutaj.) Użyłem rozszerzenia Firebug Firefoksa, aby określić, gdzie muszę zastąpić reguły CSS Foundation 5, możesz użyć dowolnych innych rozszerzeń przeglądarki, jeśli chcesz. W tym krótkim fragmencie kodu CSS musieliśmy tylko zastąpić domyślny CSS Fundacji tylko raz, przy ostatniej regule (.row .row.popular-main). Oto jak wygląda strona demo: Korzystając z tych samych reguł, co przedtem, dodamy trochę więcej treści do głównej sekcji strony. Zawartość, którą teraz dodamy, będzie Najnowsze posty z małymi miniaturkami. Foundation 5 ma naprawdę fajne, wstępnie przygotowane style miniatur, które wykorzystamy w tym kroku. Podstawy Miniatury użyj a predefiniowana klasa CSS o nazwie “th” które musimy dodać do obrazów, które chcemy wyświetlać jako miniatury w taki sposób, jak widać to w poniższym fragmencie kodu. Dla każdego najnowszego postu dodajemy nasz nowy wiersz poniżej panelu Popularnego zwana niestandardową klasą CSS “ostatni post”. Na tablecie i rozmiarze pulpitu pokażemy małą miniaturkę przy użyciu klasy miniatur Fundacji po lewej stronie oraz tytuł i krótki opis po prawej stronie. W przypadku telefonu komórkowego nagłówek i opis znajdą się poniżej miniatury. Teraz użyłem “średnie-3 kolumny” i “średnie-9 kolumn” klasy, aby podzielić ekran na 1: 3, 25% na obraz i 75% na tekst ze średniej wielkości. Wstaw poniższy fragment kodu pod panelem popularnym trzy razy (dla trzech najnowszych postów). Tutaj po prostu dołączam kod jednego wiersza najnowszego wpisu, ponieważ wszystkie używają tego samego znacznika HTML, różni się tylko treść. Treść najnowszego postu… Nasz niestandardowy plik CSS utworzony w kroku 4.3, app.css pobiera również nowe reguły stylu, aby zachować wygląd demo. Uwaga: Jeśli chcesz dodać własny niestandardowy kod CSS do Fundacji, nigdy nie zapomnij sprawdzić za pomocą narzędzia do tworzenia stron internetowych, w którym musisz zastąpić domyślne reguły. W poniższym fragmencie CSS musimy je zastąpić w pierwszej regule (.row .row.latest-post). W drugiej regule wystarczy użyć naszego własnego selektora niestandardowego (.latest-post h4). Nasz prototyp wygląda teraz tak: W tym kroku dodamy fajną paginację poniżej najnowszych postów. Foundation 5 daje nam pomocną dłoń dzięki wygodnym, gotowym do użycia klasom stronicowania. W tym kroku używamy tego samego kodu, który można znaleźć w “zaawansowane” sekcja wewnątrz Dokumentów paginacji. Oto najnowsze posty z nowo dodaną sekcją paginacji: Teraz, gdy jesteśmy gotowi na główną zawartość naszej strony demonstracyjnej, nadszedł czas, aby zapełnić prawy pasek boczny. Prawy pasek boczny przesunie się poniżej głównej zawartości w rozmiarze telefonu komórkowego i tabletu. Musisz wstawić wszystkie fragmenty kodu w tej sekcji wewnątrz Lewy pasek boczny będzie zawierać formularz rejestracji biuletynu (1), najnowsze wideo (2) i menu paska bocznego w stylu akordeonu pod pseudonimem “Nasza książka kucharska” (3). Pod koniec tego kroku będziemy gotowi z naszym demem, które będzie wyglądało tak: Aby zbudować formularz w Foundation 5, nie musisz nic więcej robić, po prostu umieść siatkę wewnątrz Tag HTML. Jeśli spojrzysz na poniższy fragment kodu, zobaczysz, że umieściliśmy formularz w wierszu, w którym ustawiliśmy różne selektory CSS dla wszystkich 3 siatek: “mały-12”, “średni-9”, i “duże-12”. Wybraliśmy to rozwiązanie, ponieważ w 100% szeroki formularz biuletynu wygląda świetnie w rozmiarze mobilnym, ale tak naprawdę staje się bardzo niewygodny jeśli chodzi o rozmiar tabletu bardzo szeroki. Na szczęście Foundation 5 pozwala nam korzystać “Niekompletne rzędy”: musimy tylko dodać “koniec” klasa do definicji klasy CSS niekompletnej kolumny. Oto, co się tutaj wydarzy: w rozmiarze mobilnym pasek boczny zostanie wyświetlony poniżej głównej zawartości z formularzem rejestracji biuletynu, który obejmuje cały ekran. Na średnim rozmiarze pasek boczny pozostanie pod główną treścią, ale formularz biuletynu obejmie 75% ekranu, a pozostałe 25% pozostanie puste. Na pulpicie rozmiar paska bocznego będzie tuż obok głównej zawartości, a formularz biuletynu ponownie pokryje całą szerokość paska bocznego. Zobacz Dokumenty siatki, aby dowiedzieć się więcej o niekompletnych wierszach. Teraz zajrzyj do środka header margin-bottom: 2em; .popular-additional h4 font-size: 1.125em; margin-top: 0,4em; .row .row.popular-main margin-bottom: 1.5em;
4.4 Dodawanie większej ilości treści
Tytuł najnowszego postu
.row .row.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; font-size: 1.125em;
4.5 Dodawanie paginacji
5. Wypełnianie paska bocznego
5.1 Formularz biuletynu
Zapisz się do naszego newslettera
Formularze Fundacji mają wiele innych opcji układu, takich jak Etykieta przedrostka, Etykieta promienia przedrostka, Przycisk Postfix i Etykieta Postfix. Wybraliśmy opcję przycisku Postfix, ponieważ jest ona bardziej przyjazna dla użytkownika: użytkownicy mogą ją kliknąć i wysłać formularz od razu.
Wewnątrz formularza dodamy nowy zagnieżdżony wiersz, który dzieli ekran na 2: 1. Wprowadzony tekst dostanie 8 kolumn, a przycisk postfix dostanie 4. Ponieważ chcemy mieć ten układ nawet na ekranie telefonu komórkowego, ustawimy “małe-8 kolumn” i “małe-4 kolumny” Selektory CSS, mała siatka jest najmniejszym rozmiarem, w którym chcemy zaimplementować ten znacznik.
Możesz zobaczyć kolejną nową rzecz w powyższym kodzie HTML, który jest “upadek rzędu” klasa. To wbudowany styl Foundation 5. Domyślnie między dwiema sąsiednimi kolumnami znajduje się rynna, ale jeśli dodamy “zawalić się” klasa do naszego rzędu, rynna zniknie. Robimy to, ponieważ chcemy, aby przycisk był tuż obok wprowadzania tekstu bez spacji między nimi.
Teraz nadszedł czas, aby wstawić ten fragment kodu do
5.2 Flex Video
Poniżej sekcji biuletynu dodamy codzienny przepis wideo do naszego paska bocznego. Fundacja 5 pomaga nam spraw, by osadzone filmy reagowały i zmuszały je do automatycznego skalowania dzięki funkcji Flex Video.
Filmy Flex korzystają z wbudowanego “flex-video” Klasa CSS. Tworzymy nowy wiersz dla sekcji paska bocznego Daily Video Recipe i umieszczamy w nim jedną szeroką kolumnę za pomocą “małe-12 średnich-9 dużych-12 kolumn zakończone” Selektory CSS z tego samego powodu użyliśmy niekompletnego wiersza w średniej siatce w poprzednim kroku.
Oto kod, który musisz wkleić pod sekcją Newsletter. Możesz użyć dowolnego wideo z Youtube, Vimeo itp.
Codzienny przepis wideo
5.3 Menu paska bocznego
W Menu paska bocznego użyjemy funkcji Akordeon Fundacji 5. Akordeony to elementy internetowe, które rozszerzają i zwijają zawartość w logiczne sekcje.
Na naszej stronie demonstracyjnej te logiczne sekcje to 3 różne grupy żywności (dania główne, dania dodatkowe, desery), a każda grupa zawiera więcej mniejszych grup, takich jak “Drób”, “Wieprzowina”, “Wołowina”, “Wegetariański”.
Cały akordeon paska bocznego umieszczamy w jednej szerokiej kolumnie z taką samą logiką jak w krokach 5.1 i 5.2. Umieszczamy w nim akordeon jako nieuporządkowaną listę z odpowiednimi wbudowanymi klasami CSS, takimi jak “akordeon” i “nawigacja akordeonowa”.
Ponieważ akordeony Foundation działają z JavaScriptem, możesz dostosować jego zachowanie za pomocą gotowych zmiennych JavaScript, jeśli chcesz. Aby to zrobić, spójrz na “Opcjonalna konfiguracja JavaScript” sekcja w Akordeonie Docs. Poniższy fragment kodu znajduje się poniżej sekcji Flex Video w pliku index.html.
Nasza książka kucharska
Wniosek
Teraz, gdy jesteśmy już gotowi na naszą stronę demo, zobaczmy, co jeszcze możesz osiągnąć dzięki Foundation 5. Elementy, których użyliśmy w tym demo, są tylko niewielkim zestawem funkcji ramy Foundation. Jest wiele innych rzeczy, które możesz wykorzystać w swoim projekcie, takich jak konfigurowalne paski ikon, okruchy chleba, paczki, suwaki zakresu, walidacja formularzy i wiele innych. Dokumenty są całkiem dobrze napisane i pomagają programistom w wielu przykładach kodu.
Jeśli znasz Sassa, masz jeszcze więcej opcji, ponieważ każda sekcja w Dokumentach wyjaśnia, w jaki sposób możesz budować własne miksy i które zmienne Sassa możesz wykorzystać do dostosowania swojej witryny. Zanim zaczniesz projektować swoją stronę, nie zapomnij sprawdzić zgodności struktury Foundation, aby upewnić się, że działa ona na wszystkich przeglądarkach, dla których musisz zbudować.
- Wyświetl demo
- Pobierz źródło
