Voordat er een Twitter Bootstrap was, was er (en is) ZURB Foundation, een raamwerk waarmee je mooie knoppen, blokrasters, voortgangsbalken, prijstabellen en nog veel meer kunt toevoegen met een paar goedgeplaatste CSS-klassen. Met het ZURB Foundation-thema voor Drupal kunt u al deze bling op uw Drupal-site met dodelijk gemak ontketenen.
Wat is het ZURB Foundation Framework?
Het ZURB Foundation-framework is een verzameling CSS en Javascript-code voor een heleboel dingen die je waarschijnlijk op je website wilt hebben. Dit omvat niet alleen aanklikbare eye-candy zoals de eerder genoemde knoppen, maar ook een aantal echt verbazingwekkende responsieve kracht.
U gebruikt de meeste van deze functies door speciale CSS-klassen toe te voegen. Bijvoorbeeld:
Hier is een .
En hier is een kleine knop.
Het ZURB Foundation-raamwerk is volledig gescheiden van Drupal. Mensen gebruiken het op WordPress, Joomla en zelfs statische HTML-sites.
Wat is het Drupal-thema van de ZURB Foundation?
De Drupal ZURB Foundation thema laat je toe om al deze ZURbish kracht te ontketenen door een thema te downloaden en in te schakelen (en de documentatie te lezen en natuurlijk een paar extra stappen te nemen).
ZURB Foundation vertrouwt bijvoorbeeld op de JavaScript-bibliotheek jQuery, dus u moet waarschijnlijk jQuery-update installeren. Controleer of u andere modules gebruikt die afhankelijk zijn van jQuery. Als u een te nieuwe versie van jQuery gebruikt, werken deze modules mogelijk niet meer.
U wilt dit thema waarschijnlijk ook gebruiken als basisthema voor uw eigen thema. Maatwerk is waar ZURB Foundation echt schittert.
Hebt u dit thema nodig om Stichting ZURB in Drupal te gebruiken?
Jij niet nodig hebben dit thema om het ZURB Foundation-raamwerk te gebruiken. In het eenvoudigste geval voegt dit thema alleen de CSS en Javascript van ZURB Foundation toe aan uw site, en u zou dat handmatig kunnen doen.
Maar dit thema maakt dat gemakkelijker, en het bevat ook enige verdere integratie met Drupal.
Bovendien kunt u kleinere extra modules toevoegen voor verdere integratie. Met de ZURB Orbit-module kunt u bijvoorbeeld een Orbit-diavoorstelling met afbeeldingsvelden maken. Met de ZURB Clearing-module kunt u responsieve lichtbakken maken met Media-afbeeldingen.
Opmerking: ik heb deze kleine modules nog niet zelf gebruikt, dus ze kunnen vol gevaar zitten. Vanaf dit schrijven vereist ZURB Clearing
Media-2.x-dev, wat een gevaarlijke upgrade zou kunnen zijn als u momenteel Media 1.x gebruikt. En een vereiste voor een ontwikkelversie van een module zou altijd één pauze moeten zijn. Toch zijn deze en andere ZURB-modules de moeite van het bekijken waard.
Kies welke versie van ZURB Foundation moet worden gebruikt
Voordat je het ZURB Foundation-thema download, moet je controleren welke versie je moet gebruiken. Er zijn verschillende hoofdversies van het ZURB Foundation-raamwerk en het hoofdversienummer voor het thema komt overeen met het kader waarmee het werkt. Dus de
7.x-3.X versies van het thema werken met Foundation 3, de
7.x-4.X versies werken met Foundation 4, en de
7.x-5.X Versies werken met Foundation 5.
Vanaf dit schrijven is de nieuwste stabiele versie van het thema 7.x-4.x, die werkt met Stichting 4. De versie 7.x-5.x is nog in ontwikkeling. Dus, hoewel de Foundation framework-website aanneemt dat je Foundation 5 gaat gebruiken, wil je misschien voorlopig bij Foundation 4 blijven.
Merk ook op dat Foundation 5 extra vereisten heeft, vooral jQuery
1.10. Foundation 4 heeft alleen jQuery nodig
1.7+.
Houd er rekening mee welke versie van de Foundation u gebruikt wanneer u de online documentatie leest. Dit geldt vooral als u de laatste versie van het framework niet gebruikt. Het is dodelijk gemakkelijk om de documenten voor bijvoorbeeld Stichting 5 in te lezen en gefrustreerd te raken wanneer een nieuwe functie niet werkt op uw Foundation 4-site.
Stichting 5 bevat bijvoorbeeld een hele reeks
medium klassen voor middelgrote schermen. In Stichting 4 zullen deze op mysterieuze wijze mislukken, tenzij je extra stappen neemt.
Gebruik SASS, Compass en "_variables.scss"!
Als je de CSS voor dit thema helemaal wilt aanpassen, zorg dan dat je:
- Gebruik het ZURB Foundation-thema als basisthema voor uw eigen aangepaste subthema
- Genereer dit subthema met behulp van de
drush commando geleverd door het thema. Zoals dit:
drush fst your_theme_name
- Bekijk rustig het uitstekende
_variables.scss het dossier
De
_variables.scss bestand wordt automatisch gemaakt door
drush fst. Dit enkele bestand bevat variabelen voor bijna iets je zou je thema-CSS misschien willen aanpassen. Het is geweldig! Alles op één plaats kunt u alles instellen, van het standaardlettertype tot de breedte van het scherm tot de rand op de broodkruimels.
Natuurlijk kunt u ook altijd extra bestanden instellen. Maar
_variables.scss is een prachtige plek om te beginnen.
Let op de bestandsextensie:
SCSS, niet
css. Gebruiken
_variables.scss, u moet SASS (een taal voor CSS-extensie) en Compass (een framework gebouwd met SASS) instellen. Wanneer je rent
kompas compileren, jouw
SCSS bestanden zullen veranderen in mooie CSS in afzonderlijke bestanden. (Ik geef de voorkeur aan
kompas kijken - dit blijft draaien en het updaten van de CSS terwijl je de
SCSS bestanden.)
Als je je echt echt niet wilt storen aan SASS, kun je zoals gewoonlijk CSS-bestanden schrijven en deze in je thema's opnemen
.info het dossier. Maar geloof me - de kleine tijdinvestering om genoeg te leren om te compileren
_variables.scss wordt vrijwel onmiddellijk terugbetaald.
Voordat u ZURB Foundation gaat gebruiken
ZURB Foundation is uitstekend, maar het is niet het enige front-end framework dat is geïntegreerd met Drupal. Misschien wilt u Bootstrap overwegen, een vergelijkbaar framework dat ook een Drupal-thema heeft. Voorlopig gebruik ik ZURB Foundation zelf, maar dat komt omdat mijn onderzoek aangaf dat het gemakkelijker was om aan te passen dan Bootstrap.
Ook is de Joyride-component best wel lief.
En of u ZURB Foundation, Bootstrap of een ander framework gebruikt, zorg ervoor dat u deze tips over het gebruik van een framework met Drupal krijgt.
