Zanim pojawił się Twitter Bootstrap, istniała (i jest) Fundacja ZURB, która pozwala dodawać ładne przyciski, siatki bloków, paski postępu, tabele cenowe i wiele więcej dzięki kilku dobrze rozmieszczonym klasom CSS. Z motywem ZURB Foundation dla Drupala, możesz uwolnić wszystkie te bling na swojej stronie Drupala z fatalną łatwością.
Czym jest struktura Foundation ZURB?
Struktura Fundacji ZURB to zbiór kodu CSS i kodu JavaScript dla wielu rzeczy, które prawdopodobnie chcesz w swojej witrynie. Obejmuje to nie tylko klikalne cukierki do oczu, takie jak wyżej wymienione przyciski, ale także naprawdę niesamowitą moc reagowania.
Większość tych funkcji jest używana przez dodanie specjalnych klas CSS. Na przykład:
Tutaj jest .
A tutaj jest mały przycisk.
Struktura Fundacji ZURB jest całkowicie oddzielona od Drupala. Ludzie używają go na WordPress, Joomla, a nawet na statycznych stronach HTML.
Czym jest motyw Drupal Fundacji ZURB?
Fundacja Drupal ZURB motyw pozwala uwolnić całą tę moc ZURBish, pobierając i włączając motyw (i czytając dokumentację i wykonując kilka dodatkowych kroków, oczywiście).
Na przykład ZURB Foundation bazuje na bibliotece JavaScript jQuery, więc prawdopodobnie będziesz musiał zainstalować aktualizację jQuery. Sprawdź, czy korzystasz z innych modułów opartych na jQuery. Jeśli użyjesz zbyt nowej wersji jQuery, te moduły mogą przestać działać.
Ponadto prawdopodobnie będziesz chciał użyć tego motywu jako motywu bazowego dla własnego niestandardowego motywu. Personalizacja to miejsce, w którym Fundacja ZURB naprawdę błyszczy.
Czy potrzebujesz tego tematu do korzystania z Fundacji ZURB w Drupal?
Ty nie potrzeba ten temat wykorzystuje strukturę Fundacji ZURB. W najprostszym przypadku ten motyw dodaje do swojej strony CSS i JavaScript ZURB Foundation i możesz to zrobić ręcznie.
Ale ten motyw sprawia, że jest to łatwiejsze i obejmuje również dalszą integrację z Drupalem.
Dodatkowo możesz dodać mniejsze dodatkowe moduły do dalszej integracji. Na przykład moduł ZURB Orbit pozwala zbudować pokaz slajdów Orbity z polami obrazu. Moduł ZURB Clearing pozwala tworzyć responsywne lightboxy z obrazami Media.
Uwaga: Nie korzystałem jeszcze z tych maleńkich modułów, więc mogą być najeżone niebezpieczeństwem. W chwili pisania tego artykułu ZURB Clearing wymaga
Media-2.x-dev, które może być niebezpieczne, jeśli używasz Media 1.x. I wymóg dotyczący wersji rozwojowej modułu powinien zawsze dawać jedną pauzę. Mimo to warto zaglądać do tych i innych modułów ZURB.
Wybierz wersję ZURB Foundation do użycia
Przed pobraniem motywu ZURB Foundation sprawdź, której wersji powinieneś użyć. Istnieją różne główne wersje struktury ZURB Foundation, a główny numer wersji tematu odpowiada ramie, z którą współpracuje. Tak więc
7.x-3.x wersje tematu współpracują z Fundacją 3,
7.x-4.x wersje współpracują z Fundacją 4i
7.x-5.x Wersje współpracują z Fundacją 5.
W chwili pisania tego tekstu najnowszą stabilną wersją tematu jest 7.x-4.x, który działa z Fundacją 4. Wersja 7.x-5.x jest nadal w fazie rozwoju. Tak więc, chociaż strona internetowa Fundacji zakłada, że będziesz korzystać z Fundacji 5, możesz na razie pozostać przy fundacji 4.
Należy również pamiętać, że Fundacja 5 ma dodatkowe wymagania, szczególnie jQuery
1.10. Fundacja 4 wymaga tylko jQuery
1.7+.
Bądź świadomy, z której wersji Fundacji korzystasz, czytając dokumentację online. Jest to szczególnie ważne, jeśli nie używasz najnowszej wersji frameworka. Łatwo jest wślizgnąć się do czytania dokumentów, powiedzmy, do Fundacji 5, a potem frustrować się, gdy nowa funkcja nie działa na twojej stronie Fundacji 4.
Na przykład Fundacja 5 zawiera cały zestaw
średni klasy dla średnich ekranów. W Fundacji 4, będą one w tajemniczy sposób zawieść, chyba że podejmiesz dodatkowe kroki.
Użyj SASS, Compass i "_variables.scss"!
Jeśli zamierzasz zmodyfikować styl CSS dla tego motywu, upewnij się, że:
- Użyj motywu ZURB Foundation jako motywu bazowego dla własnego niestandardowego podtematu
- Wygeneruj ten podtemat za pomocą
zasusz polecenie dostarczone przez temat. Lubię to:
drush fst your_theme_name
- Spokojnie spoglądaj na to, co doskonałe
_variables.scss plik
The
_variables.scss plik jest tworzony automatycznie przez
drush fst. Ten pojedynczy plik zawiera zmienne dla prawie byle co możesz zmodyfikować swój CSS kompozycji. To niesamowite! Wszystko w jednym miejscu, możesz ustawić wszystko od domyślnej czcionki do szerokości ekranu do granicy w okruszkach.
Oczywiście zawsze możesz także skonfigurować dodatkowe pliki. Ale
_variables.scss jest wspaniałym miejscem do rozpoczęcia.
Zwróć uwagę na rozszerzenie pliku:
scss, nie
css. Używać
_variables.scss, musisz ustawić SASS (język rozszerzenia CSS) i Compass (framework zbudowany z SASS). Kiedy uciekasz
kompas kompilacja, Twój
scss pliki staną się uroczymi CSS w osobnych plikach. (Wolę
zegarek kompasu - to działa i aktualizuje CSS w miarę dostrajania
scss pliki.)
Jeśli naprawdę, naprawdę nie chcesz zawracać sobie głowy SASS, możesz normalnie pisać pliki CSS i wyświetlać je w swoim motywie
.info plik. Ale zaufaj mi - ta niewielka inwestycja, aby nauczyć się wystarczająco dużo, aby się skompilować
_variables.scss zostaną zwrócone niemal natychmiast.
Przed użyciem Fundacji ZURB
Fundacja ZURB jest najdoskonalsza, ale nie jest to jedyna platforma front-end zintegrowana z Drupalem. Warto rozważyć Bootstrap, podobny framework, który również ma motyw Drupala. Na razie sam korzystam z Fundacji ZURB, ale to dlatego, że moje badania wykazały, że łatwiej było ją spersonalizować niż Bootstrap.
Również komponent Joyride jest całkiem słodki.
Niezależnie od tego, czy korzystasz z ZURB Foundation, Bootstrap, czy z innego frameworka, zapoznaj się z tymi poradami na temat korzystania z frameworka Drupala.
