Inne

Szybkie prototypowanie z Zurb Foundation

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.

<body>
    <div>
    <nav>
     <ul>
        <li><h1><a href="#nazwa">Nazwa</a></h1></li>
        <li><a href="#mozliwosci">Możliwości</a></li>
        <li><a href="#pomoc">Pomoc</a></li>
        <li><a href="#kontakt">Kontakt</a></li>
     </ul>
    </nav>
    </div>

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:

...
    <script src="javascripts/jquery.js"></script>
    <script src="javascripts/foundation.min.js"></script>
    <script src="javascripts/app.js"></script>
</body>

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

<nav class="top-bar">

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.

<nav class="top-bar">
    <ul>
    <li class="name"><h1><a href="#nazwa">Nazwa</a></h1></li>
    <li class="toggle-topbar"><a href="#></a></li>
    <section>
     <ul class="right">
        <li><a href="#mozliwosci">Możliwości</a></li>
        <li><a href="#pomoc">Pomoc</a></li>
        <li><a href="#kontakt">Kontakt</a></li>
     </ul>
    </section>
    </ul>
</nav>

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:

<div class="row">
    <div class="four columns">
    <img src="http://placehold.it/320x480&text=Aplikacja" class="hide-for-small" />
    </div>
    <div class="eight mobile-four columns">
    <h1><a id="nazwa">Nazwa</a></h1>
    <h4 class="subheader">Lorem ipsum ... </h4>
    <a href="#" class="button radius large">Pobierz</a>
    </div>
</div>

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:

<div class="row">
    <div class="twelve columns">
    <h2><a id="mozliwosci">Możliwości</a></h2>
    <div id="slider">
     <img src="http://placehold.it/960x320&text=Slajd+pierwszy" />
     <img src="http://placehold.it/960x320&text=Slajd+drugi" />
     <img src="http://placehold.it/960x320&text=Slajd+trzeci" />
    </div>
    <div class="row">
     <div class="four mobile-four columns">
        <h3>Synchronizacja danych</h3>
        <p>Lorem ipsum ... </p>
     </div>
     <div class="four mobile-four columns">
        <h3>Integracja z systemem</h3>
        <p>Lorem ipsum ... </p>
     </div>
     <div class="four mobile-four columns">
        <h3>Intuicyjna obsługa</h3>
        <p>Lorem ipsum ... </p>
     </div>
    </div>
    </div>
</div>

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

<script type="text/javascript">
    $(window).load(function() {
    $("#slider").orbit();
    });
</script>

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”.

<div class="row">
    <div class="twelve columns">
    <h2><a id="pomoc">Pomoc</a></h2>
    <ul class="accordion">
     <li class="active">
        <div class="title">Temat 1</div>
        <div class="content">Lorem ipsum ... </div>
     </li>
     <li class="active">
        <div class="title">Temat 2</div>
        <div class="content">Lorem ipsum ... </div>
     </li>
     ...
    </ul>
    </div>
</div>

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”.

<div class="row">
    <div class="twelve columns">
    <h2><a id="kontakt">Kontakt</a></h2>
    <div class="alert-box alert">
     Nie udało się wysłać wiadomości
     <a href="" class="close">×</a>
    </div>
    <form>
     <div class="row">
        <div class="six mobile-four columns">
         <label>Imię i nazwisko</label>
         <input type="text" />
        </div>
        <div class="six mobile-four columns">
         <label>Adres e-mail</label>
         <input type="email" />
        </div>
     </div>
     <label>Temat</label>
     <input type="text" />
     <label class="error">Wiadomość</label>
     <textarea>

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…

komentarze 4

  • Awatar
    Mr.Mr

    13 listopada 2012 22:29

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

    Odpowiedz
  • Awatar
    KORONA

    29 marca 2014 23:56

    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

    Odpowiedz
  • Awatar
    mercs600

    20 czerwca 2014 14:21

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

    Odpowiedz
    • Awatar
      hub33k

      21 czerwca 2014 12:36

      Po migracji pojawił się ten błąd. Można to prosto objeść:
      Wchodzisz na stronę http://mothereff.in/html-entities i wklejasz kod do dolnego okienka. Poprawny kod wyświetli się w górnym okienku.

      Odpowiedz

Zostaw odpowiedź