Innan det fanns Twitter Bootstrap var det (och är) ZURB Foundation, ett ramverk som låter dig lägga till knappar, blockgränser, framstegsfält, prissättningstabeller och mycket mer med några välplacerade CSS-klasser. Med ZURB Foundation-temat för Drupal kan du släppa lös all denna bling på din Drupal-webbplats med dödlig lätthet.
Vad är ZURB Foundation Framework?
ZURB Foundation Framework är en samling av CSS och Javascript-kod för en massa saker som du säkert vill ha på din webbplats. Detta inkluderar inte bara klickbart ögonljus som de ovannämnda knapparna utan också en del riktigt fantastisk responsiv kraft.
Du använder de flesta av dessa funktioner genom att lägga till speciella CSS-klasser. Till exempel:
Här är en .
Och här är en liten knapp.
ZURB Foundation Framework är helt separat från Drupal. Människor använder det på WordPress, Joomla, och till och med statiska HTML-sidor.
Vad är ZURB Foundation Drupal Theme?
Drupal ZURB Foundation tema låter dig släppa ut all denna ZURBish-kraft bara genom att ladda ner och aktivera ett tema (och läsa dokumentationen och ta några extra steg, förstås).
Till exempel bygger ZURB Foundation på jQuery Javascript-biblioteket, så du måste nog installera jQuery Update. Kontrollera om du använder andra moduler som är beroende av jQuery. Om du använder för ny en version av jQuery, kan dessa moduler sluta fungera.
Du kommer också nog att använda detta tema som ett bastema för ditt eget anpassade tema. Anpassning är där ZURB Foundation verkligen lyser.
Behöver du det här temat att använda ZURB Foundation i Drupal?
Det gör du inte behöver detta tema för att använda ZURB Foundation Framework. På det enklaste sättet lägger det här temat bara till ZURB Foundation CSS och Javascript till din webbplats, och du kan göra det manuellt.
Men det här temat gör det enklare, och det innehåller också en del ytterligare integration med Drupal.
Dessutom kan du lägga till mindre extra moduler för vidare integration. Exempelvis kan ZURB Orbit-modulen bygga ett Orbit-bildspel med bildfält. Med ZURB Clearing-modulen kan du skapa responsiva ljuslådor med Media-bilder.
Obs! Jag har inte använt dessa små moduler än mig själv, så de kan vara farliga med fara. Som det här skrivet kräver ZURB Clearing
Media-2.x-dev, vilket kan vara en farlig uppgradering om du använder Media 1.x för närvarande. Och ett krav på en utvecklingsversion av en modul ska alltid ge en paus. Ändå är dessa och andra ZURB-moduler värda att titta på.
Välj vilken version av ZURB Foundation som ska användas
Innan du laddar ner ZURB Foundation-temat, kolla vilken version du ska använda. Det finns olika stora versioner av ZURB Foundation-ramverket, och huvudversionsnumret för temat motsvarar ramverket som det samarbetar med. Så, den
7.x-3.x versioner av temat arbete med stiftelsen 3, den
7.x-4.x versioner arbetar med Foundation 4, och den
7.x-5.x Versioner arbetar med Foundation 5.
Med den här skrivningen är den senaste stabila versionen av temat 7.x-4.x, som fungerar med Foundation 4. 7.x-5.x-versionen är fortfarande i utveckling. Så, även om Foundation Framework-webbplatsen förutsätter att du använder Foundation 5, kanske du vill hålla fast med Foundation 4 för nu.
Observera också att stiftelsen 5 har extra krav, speciellt jQuery
1.10. Stiftelsen 4 behöver bara jQuery
1.7+.
Var medveten om vilken version av Foundation du använder när du läser online dokumentationen. Detta gäller särskilt om du inte använder den senaste versionen av ramverket. Det är oerhört lätt att gå in i läsning av docs för att säga Stiftelse 5, då bli frustrerad när en ny funktion inte fungerar på din Foundation 4-sida.
Stiftelsen 5 innehåller till exempel en hel uppsättning
medium klasser för medelstora skärmar. I Stiftelse 4, kommer dessa att gå mystiskt om du inte tar extra steg.
Använd SASS, Kompass och "_variables.scss"!
Om du kommer att justera CSS för det här temat alls, se till att du:
- Använd ZURB Foundation-temat som ett bastema för ditt eget anpassade underområde
- Generera detta subteem med hjälp av
drush kommando som tillhandahålls av temat. Så här:
drush fst your_theme_name
- Lyssna igenom det utmärkta
_variables.scss fil
De
_variables.scss filen skapas automatiskt av
drush fst. Denna enda fil innehåller variabler för nästan något du kanske vill tweak i ditt tema CSS. Det är fantastiskt! Allt på ett ställe kan du ställa allt från standardfonten till skärmens bredd till gränsen på brödsmulorna.
Naturligtvis kan du alltid ställa in ytterligare filer också. Men
_variables.scss är ett utmärkt ställe att börja.
Observera filtillägget:
SCSS, inte
css. Att använda
_variables.scss, måste du konfigurera SASS (ett CSS-förlängningsspråk) och Compass (ett ramverk byggt med SASS). När du kör
kompass kompilera, din
SCSS filer kommer att bli till underbara CSS i separata filer. (Jag föredrar
kompassklocka - detta fortsätter att köra och uppdatera CSS när du klickar på
SCSS filer.)
Om du verkligen inte vill störa SASS kan du skriva CSS-filer som vanligt och lista dem i ditt temas
.info fil. Men lita på mig - den lilla tiden investeringen att lära sig nog att kompilera
_variables.scss kommer att betalas tillbaka nästan omedelbart.
Innan du använder ZURB Foundation
ZURB Foundation är mest utmärkt, men det är inte det enda front-end-ramverket som har integrerats med Drupal. Du kanske vill överväga Bootstrap, en liknande ram som också har ett Drupal-tema. För tillfället använder jag själv ZURB Foundation, men det beror på att min forskning tyder på att det var lättare att anpassa än Bootstrap.
Joyride-komponenten är också ganska söt.
Och om du använder ZURB Foundation, Bootstrap eller någon annan ram, se till att du får de här tipsen om att använda en ram med Drupal.
