Pierwsze kroki z Foundation for Apps
Jest więc nowa wersja Fundacji ...
Niedawno powiedzieliśmy ci wszystko, jak zacząć Fundacja 5 . Teraz jest nowa wersja; nie "Fundacja 6", ale Podstawa dla aplikacji i będzie ogromny.
Ta podstawa 5 to potężne i elastyczne ramy, nie ma wątpliwości. Może być używany na stronach internetowych, w aplikacjach, prawie wszystko, co możesz wymyślić, choć może to zająć trochę pracy i dostosowania. Istnieją jednak konwencje dotyczące układu i projektu specyficzne dla aplikacji. Ponadto aplikacje często są opracowywane dla przeglądarek mobilnych, które obsługują nowsze technologie.
Krótko mówiąc, klasyczna struktura Foundation, wystarczająco elastyczna, aby tworzyć aplikacje, została stworzona jako narzędzie do wielu celów. Twórcy aplikacji mogą chcieć czegoś, co bardziej odpowiada ich potrzebom, a Zurb to właśnie zapewnia.
Instalacja i funkcje
Fundacja dla aplikacji to nie stara Fundacja z dodatkowymi funkcjami. To zupełnie inny produkt. Zaprojektowany od podstaw jest przyjazny dla programistów. Rzeczywiście, choć nie trzeba być programistą, aby z niego korzystać, warto wiedzieć trochę o konfigurowaniu środowisk programistycznych.
Dzieje się tak, ponieważ nie rozpakowujesz tego frameworka i nie umieszczasz go w folderze aplikacji. Opiera się na narzędziach takich jak Angular.js] ( https://angularjs.org/ ) i Sass ; dostarczany jest z własnym mini-serwerem, który skompiluje i obsłuży Twoje projekty w locie. Oznacza to, że musisz mieć Node.js,Rubin, i kilka innych rzeczy zainstalowanych. Trzeba też zainstalować całą rzecz z wiersza poleceń. Programiści pracujący nad systemem Linux i OSX nie będą mieli problemów z konfiguracją. To trochę bardziej kłopotliwe dla aspirujących frajerów takich jak ja, którzy używają Windowsa.
Gdy przejdziesz przez te początkowe hurd ... ahem , obejmuję ten nowy sposób robienia rzeczy, zobaczysz kilka niesamowitych rzeczy pod przykryciem, w tym:
- Siatka oparta na systemie Flexbox i przeznaczona dla aplikacji. Obejmuje obsługę układania "ekranów" w pionie i poziomie, przewijanie wewnątrz każdej sekcji i wiele więcej;
- tony komponentów interfejsu użytkownika;
- Angular.js; teraz to wszystko jest wściekłość;
- szablon i struktura plików oparta na komponentach;
- Motion UI: nowa biblioteka animacji Zurb zaprojektowana specjalnie dla interfejsów użytkownika aplikacji.
Pierwsze kroki
Jedną z zalet frameworków jest to, że są idealne do tworzenia szybkich prototypów. Po zainstalowaniu tej rzeczy i uruchomieniu mini-serwera nadszedł czas, aby połączyć swoje pomysły w interaktywny interfejs na żywo, który nic nie robi. Jeszcze.
W tym artykule stworzyłem nieumarłą "stronę zarządzania kontaktami", w której każdy klient prosiłby o więcej szczegółów, a może o zmianę układu:
W katalogu Twojej aplikacji znajdziesz kilka folderów i plików. Dla celów czysto front-endowego rozwoju, musisz tylko martwić się o folder "client". Tam trafiają wszystkie twoje pliki źródłowe. Tam domyślnie ustawione są następujące foldery i pliki:
assets- js- - app.js- scss- - _settings.scss- - app.css- templates- - home.htmlindex.htmlPliki app.scss i app.js to miejsca, w których umieszczasz wszystkie niestandardowe pliki Sass i JS. _settings.scss to po prostu: plik, w którym można nadpisać wiele domyślnych stylów. Kod jest poprawnie komentowany i łatwo znaleźć potrzebne informacje. Możesz również użyć tego pliku, aby całkowicie wyłączyć różne części środowiska CSS, aby nie były uwzględniane podczas budowania aplikacji.
index.html to plik, który "sprawi, że wszystko się wydarzy", przyciągając inne komponenty, ekrany aplikacji i tak dalej. home.html to treści, które zobaczysz, kiedy po raz pierwszy wejdziesz http://localhost: 8080 , gdy mini-serwer jest uruchomiony. Tam też zacząłem pracować.
Siatka
Pierwszą rzeczą, do której musisz się przyzwyczaić, jest sama siatka. Używa Flexbox, więc wszystko działa trochę inaczej , ale zajęcia będą znajome. Aby utworzyć dwa bloki / kolumny o jednakowej szerokości, wszystko to musisz zrobić:
Tak. to jest to! Jeśli chcesz umieścić rzeczywistą treść w tych dwóch kolumnach, musisz zrobić to inaczej. Tak wyglądają kolumny w moim prototypie:
Zauważysz, że zawsze wydaje się, że potrzebujesz dwóch elementów z blokiem siatki jako klas, aby dopasować je poprawnie. Możesz również zauważyć, że ręcznie określam szerokości kolumn. Jeśli nie, wszystkie bloki zostaną rozwinięte, aby wypełnić całą dostępną przestrzeń, pozostając równie szeroką.
składniki
Dołączona jest również duża liczba elementów z klasycznej Fundacji. Masz klasyczne objaśnienia i okna modalne, pola alertów, style formularzy, style przycisków, karty i inne. Typografia jest solidna, a ponadto dostępny jest ograniczony zestaw ikon (wszystkie pliki SVG) do wykorzystania w przyciskach, menu i tak dalej.
Szczególnie podoba mi się panele, które są w zasadzie blokami treści ukrytymi poza płótnem, które można wywołać na ekranie z dowolnej strony.
Lubię też "karty". Karty są po prostu prostymi prostokątnymi przedmiotami przeznaczonymi do oddzielania treści. Użyłem ich do listy kontaktów na powyższym zrzucie ekranu. Aby uzyskać pełną listę, patrz dokumentacja .
Idź po to.
Na co czekasz? Włącz linię poleceń i zacznij grać z tym. Nawet jeśli nie jesteś programistą aplikacji, dobrze jest wiedzieć, jak pracować w tym środowisku, zwłaszcza jeśli pracujesz z prawdziwymi programistami.