Szybkie prototypowanie z Zurb Foundation


12 listopada 2012 / Michał Kortas


Wraz z rosnącymi możliwościami CSS, pisanie stylów stało się męczącym zadaniem. Możliwości języka znacznie się zwiększyły, a w dodatku część funkcjonalności musimy deklarować osobno dla każdego silnika przeglądarki. Do tego dochodzi problem graficznego projektowania układów responsywnych. Zamiast wykonywać kilka projektów, zakres prac można zmniejszyć projektując w przeglądarce oraz wykorzystując framework dla front-endu. Rozwiązanie zaprezentuję na przykładzie prototypu prostej strony dla aplikacji mobilnej.

Instalacja

Archiwum z plikami oferującymi wszystkie możliwości można pobrać bezpośrednio ze strony Foundation. Istnieje także możliwość pobrania jedynie interesujących nas komponentów lub instalacji jako gem w Ruby on Rails. Do celów edukacyjnych wykorzystamy domyślne archiwum ze zmodyfikowanym plikiem index.html. Archiwum można pobrać przez poniższy link. W przypadku oficjalnego archiwum, należy usunąć całą treść znajdującą się w znaczniku <body> pliku index.html.

Pobierz pliki do projektu

Zobacz co będziemy tworzyć

Tworzenie responsywnej nawigacji

Ponieważ tworzymy stronę o aplikacji mobilnej, warto ją dostosować do urządzeń przenośnych. Całą nawigację (także nagłówek strony) umieścimy w jednym kontenerze, aby jak najefektywniej wykorzystać powierzchnię ekranu.

Nawigacja do działania wymaga jQuery oraz skryptów serwowanych wraz z frameworkiem. Plik app.js to plik inicjalizujący wtyczki jQuery. Skrypty dołączamy na końcu pliku:

Teraz musimy powiadomić framework o naszych zamiarach. Cała zabawa polega na dodawaniu odpowiednich klas do elementów. Zacznijmy od utworzenia paska nawigacyjnego:

Tytuł strony nie powinien być ukrywany przy niskiej rozdzielczości, dlatego odseparujemy go od pozostałych linków nawigacyjnych. Aby został potraktowany z należytym szacunkiem, należy zawierającemu go elementowi nadać klasę „name”. Pozostałe linki możemy wyrównać do lewej lub prawej strony nadając liście klasę „left” lub „right”. Lista ukrywanych elementów powinna znajdować się wewnątrz elementu <section>. Ostatnią ważną rzeczą jest dodanie przycisku rozwijającego menu. Foundation oczekuje go w postaci elementu <li> z klasą „toggle-topbar” oraz pustym odnośnikiem w środku.

Siatka i typografia

Do tej pory rozmieszczanie elementów na stronach było czasochłonnym zajęciem. Obecnie możemy zrobić to szybko, sporo przy tym eksperymentując z różnymi możliwościami, nie obawiając się przy tym o kompatybilność.

Zanim przejdziemy do osadzania naszej treści w kolumnach musimy jednak zrozumieć pewną rzecz. W Foundation możemy stworzyć dwa układy: jeden dla komputerów, drugi dla urządzeń mobilnych. Układ desktopowy ma szerokość 12 kolumn, a mobilny 4 (są to wartości domyślne, które można modyfikować). Kolumny muszą znajdować się w rzędach (ang. row). Wykorzystamy te właściwości do przedstawienia użytkownikom naszej fikcyjnej aplikacji:

W wierszu umieściliśmy dwie kolumny: jedną z obrazkiem, który w przyszłości będzie przedstawiać aplikację i drugą opisującą produkt. Szerokości zostały ustawione na 4 dla obrazu oraz 8 dla opisu. Na urządzeniach mobilnych treść będzie zajmować całą szerokość (klasa „mobile-four”), a obraz smartfona nie zostanie wyświetlony, dzięki klasie „hide-for-small”. Zastosowanie klasy „subheader” do nagłówka spowodowało zmianę jego koloru na jaśniejszy. Przy okazji warto wspomnieć, że domyślne rozmiary nagłówków oparto o regułę złotego podziału. Przycisk uzyskaliśmy dzięki klasie „button”, klasy „radius” oraz „large” są opcjonalne. „Radius” odpowiada za zaokrąglenie przycisku (można też użyć klasy „round”, aby uzyskać całkowite zaokrąglenie), natomiast „large” to określenie rozmiaru (duży).

Responsywny pokaz slajdów

Foundation zawiera kilka przydatnych wtyczek jQuery. Jedną z nich jest Orbit. Ta wtyczka umożliwia stworzenie responsywnego slajdera w kilku wierszach kodu. Wykorzystamy tę możliwość do zaprezentowania głównych cech naszego produktu:

Do poprawnego działania wtyczki wystarczy element <div> z unikalnym identyfikatorem, zawierający kilka obrazów oraz poniższy fragment kodu:

Kod należy umieścić na końcu pliku, po dołączeniu plików ze skryptami. Chociaż Orbit umożliwia dodawanie treści oraz przycisków na slajdach, to przestrzegam przed tym rozwiązaniem (szczególnie przed zbyt długimi zdaniami), ponieważ treść może zostać odcięta, gdy okno przeglądarki stanie się zbyt wąskie. Zachęcam do zapoznania się z dokumentacją Orbit, ponieważ wtyczka oferuje ciekawe możliwości, a przy tym jest dziecinnie prosta w konfiguracji.

Lista rozwijana

Do podzielenia tematów pomocy użyjemy prostego akordeonu. Wystarczy stworzyć nieuporządkowaną listę elementów, w której umieścimy kolejne zakładki. Lista musi mieć klasę „accordion”. Zakładka składa się z elementów <div> z klasą „title” oraz „content”. Jak można się domyślić treść elementu z klasą „content” będzie ukryta, dopuki nie klikniemy na odpowiedni tytuł. Rozwinięty element oznaczamy klasą „active”.

Formularze oraz walidacja

Rozmieszczanie elementów formularza na stronie wygląda identycznie, jak rozmieszczanie dowolnych innych elementów. Możemy więc łatwo wpływać na to, jak rozbudowane formularze wyglądają na urządzeniach mobilnych. Wykorzystamy tę możliwość, do umieszczenia pól na dane kontaktowe w jednym wierszu. Dodatkowo możemy wykorzystać klasy do tworzenia komunikatów o błędach oraz innych powiadomień. W przykładzie wyświetlimy błąd podczas wysyłania formularza oraz oznaczymy pole, w którym błąd wysąpił. Powiadomienia wyświetlamy korzystając z klasy „alert-box”. W połączeniu z klasą „alert” uzyskamy powiadomienie w kolorze czerwonym. W treści powiadomienia, oprócz komunikatu o błędzie, umieścimy krzyżyk, który zamknie powiadomienie. Odnośnik musi mieć klasę „close”.

W celu oznaczenia konkretnego pola w formularzu, korzystamy z klasy „error” bezpośrednio pod elementem i podajemy treść błędu.

Podsumowanie

Zachęcam do zapoznania się z oficjalną dokumentacją Foundation. Znajdziecie tam wiele innych ułatwień do wykorzystania w swoich projektach, np. zakładki, okna modalne, galerię, a nawet responsywne tabelki z cenami. Dokumentacja jest bardzo czytelna, a framework prosty w konfiguracji. Kod opublikowano na licencji MIT, co oznacza możliwość dowolnej modyfikacji i wykorzystania w projektach komercyjnych. Pamiętajcie jednak, że prototyp to dopiero początek pracy. Zwracam na to uwagę, ponieważ coraz częściej trafiam na całe strony stworzone wyłącznie przy pomocy frameworków…



4 odpowiedzi na “Szybkie prototypowanie z Zurb Foundation”

  1. Mr.Mr pisze:

    Projektowaniu w przeglądarcie mówię zdecydowanie TAK! i daję gwiazdkę za ciekawy artykuł ;)

  2. KORONA pisze:

    jednak stara szkola jest o wiele lepsza niz programowanie przegladarkowe. patrz twiterr i powrot do korzeni co owocuje 5 krotnym zwiekszeniem szybkosci ladowania sie strony.
    js jako dodatek ZAWSZE I WSZEDZIE

  3. mercs600 pisze:

    Zróbcie coś z wyświetlaniem kodu, bo nie da się tego czytać

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.