Før der var Twitter Bootstrap, var der (og er) ZURB Foundation, en ramme, der giver dig mulighed for at tilføje smukke knapper, blokker, progressionslinier, prisborde og meget mere med et par velplacerede CSS-klasser. Med ZURB Foundation-temaet for Drupal kan du frigøre alt dette bling på dit Drupal-websted med dødelig lethed.
Hvad er ZURB Foundation Framework?
ZURB Foundation Framework er en samling af CSS og Javascript kode for en masse ting, som du sandsynligvis vil have på din hjemmeside. Dette omfatter ikke kun klikbart øjenlys som de ovennævnte knapper, men også nogle virkelig fantastiske lydhør.
Du bruger de fleste af disse funktioner ved at tilføje særlige CSS-klasser. For eksempel:
Her er en .
Og her er en lille knap.
ZURB Foundation Framework er helt adskilt fra Drupal. Folk bruger det på WordPress, Joomla, og endda statiske HTML-websteder.
Hvad er ZURB Foundation Drupal Theme?
Drupal ZURB Foundation tema giver dig mulighed for at frigøre alle disse ZURBish-strøm ved blot at downloade og aktivere et tema (og læse dokumentationen og tage nogle ekstra trin selvfølgelig).
For eksempel baserer ZURB Foundation på jQuery Javascript-biblioteket, så du skal nok installere jQuery Update. Kontroller, om du bruger andre moduler, der er afhængige af jQuery. Hvis du bruger for ny en version af jQuery, kan disse moduler ophøre med at fungere.
Du vil sikkert også bruge dette tema som et grundlæggende tema til dit eget brugerdefinerede tema. Tilpasning er, hvor ZURB Foundation virkelig skinner.
Har du brug for dette tema for at bruge ZURB Foundation i Drupal?
Det gør du ikke brug for dette tema for at bruge ZURB Foundation Framework. På det enkleste måde tilføjer dette tema blot ZURB Foundation CSS og Javascript til dit websted, og du kan gøre det manuelt.
Men dette tema gør det lettere, og det indeholder også en yderligere integration med Drupal.
Plus, du kan tilføje mindre ekstra moduler til yderligere integration. For eksempel kan ZURB Orbit-modulet opbygge et Orbit-diasshow med billedfelter. ZURB Clearing-modulet giver dig mulighed for at oprette responsive lysbokse med mediebilleder.
Bemærk: Jeg har ikke brugt disse små moduler endnu mig selv, så de kan være fyldt med fare. Som af denne skrivelse kræver ZURB Clearing
Medier-2.x-dev, hvilket kan være en farlig opgradering, hvis du i øjeblikket bruger Media 1.x. Og et krav til en udviklingsversion af et modul skal altid give en pause. Alligevel er disse og andre ZURB-moduler værd at kigge på.
Vælg hvilken version af ZURB Foundation, der skal bruges
Inden du downloader ZURB Foundation-temaet, skal du kontrollere, hvilken version du skal bruge. Der er forskellige store versioner af ZURB Foundation-rammen, og hovedversionsnummeret for temaet svarer til rammen det virker sammen med. Så
7.x-3.x Versioner af temaarbejdet med Foundation 3, det
7.x-4.x Versioner arbejder med Foundation 4, og
7.x-5.x Versioner arbejder med Foundation 5.
Med denne skrivning er den seneste stabile version af temaet 7.x-4.x, som arbejder med Foundation 4. 7.x-5.x-versionen er stadig i udvikling. Så selvom Foundation Framework-webstedet forudsætter at du bruger Foundation 5, vil du måske holde fast med Foundation 4 for nu.
Bemærk også, at Foundation 5 har ekstra krav, især jQuery
1.10. Foundation 4 har kun brug for jQuery
1.7+.
Vær opmærksom på, hvilken version af Foundation du bruger, når du læser online dokumentationen. Dette gælder især, hvis du ikke bruger den nyeste version af rammen. Det er dårligt nemt at glide i læsning af doksene for f.eks. Foundation 5, så blive frustreret, når en ny funktion ikke virker på dit Foundation 4-websted.
F.eks. Indeholder Foundation 5 et helt sæt af
medium klasser til mellemstore skærme. I Foundation 4 vil disse mystisk mislykkes, medmindre du tager ekstra skridt.
Brug SASS, Kompas og "_variables.scss"!
Hvis du vil tilpasse CSS til dette tema overhovedet, skal du sørge for at:
- Brug ZURB Foundation-temaet som et grundlæggende tema for dit eget brugerdefinerede subtheme
- Generer dette subtheme ved hjælp af
drush kommando fra temaet. Sådan her:
drush fst your_theme_name
- Nyd den fremragende udmærkede
_variables.scss fil
Det
_variables.scss filen oprettes automatisk af
drush fst. Denne enkelt fil indeholder variabler for næsten hvad som helst Du kan måske tilpasse dit tema CSS. Det er fantastisk! Alt på ét sted kan du indstille alt fra standard skrifttypen til skærmens bredde til grænsen på breadcrumbs.
Selvfølgelig kan du altid opsætte yderligere filer. Men
_variables.scss er et glimrende sted at starte.
Bemærk filtypen:
SCSS, ikke
css. At bruge
_variables.scss, skal du oprette SASS (et CSS-udvidelsessprog) og Compass (en ramme bygget med SASS). Når du kører
kompas kompilere, dine
SCSS filer vil blive til dejlige CSS i separate filer. (Jeg foretrækker
kompas ur - Dette fortsætter med at køre og ajourføre CSS som du tilpasser
SCSS filer.)
Hvis du virkelig ikke virkelig vil forstyrre SASS, kan du skrive CSS-filer som sædvanlig og liste dem i dit tema
.info fil. Men stol på mig - den lille tid investering for at lære nok at kompilere
_variables.scss vil blive betalt tilbage næsten øjeblikkeligt.
Før du bruger ZURB Foundation
ZURB Foundation er mest fremragende, men det er ikke den eneste front-end-ramme, der er integreret med Drupal. Du vil måske overveje Bootstrap, en lignende ramme, der også har et Drupal tema. For nu bruger jeg ZURB Foundation selv, men det er fordi min forskning viste, at det var lettere at tilpasse end Bootstrap.
Joyride-komponenten er også ret sød.
Og om du bruger ZURB Foundation, Bootstrap eller nogle andre rammer, skal du sørge for at få disse tips om at bruge en ramme med Drupal.
