Før det var Twitter Bootstrap, var det (og er) ZURB Foundation, et rammeverk som gir deg mulighet til å legge til knapper, blokkere, fremdriftslinjer, prisbord og mye mer med noen velutstyrte CSS-klasser. Med ZURB Foundation-temaet for Drupal kan du frigjøre alt dette blinget på din Drupal-side med dødelig letthet.
Hva er ZURB Foundation Framework?
ZURB Foundation Framework er en samling av CSS og Javascript-kode for en haug med ting du sannsynligvis vil ha på nettstedet ditt. Dette inkluderer ikke bare klikkbar eye candy som de nevnte knappene, men også noen virkelig fantastisk responsiv kraft.
Du bruker de fleste av disse funksjonene ved å legge til spesielle CSS-klasser. For eksempel:
Her er en .
Og her er en liten knapp.
ZURB Foundation Framework er helt skilt fra Drupal. Folk bruker det på WordPress, Joomla, og til og med statiske HTML-nettsteder.
Hva er ZURB Foundation Drupal Theme?
Drupal ZURB Foundation tema lar deg frigjøre all denne ZURBish-kraften bare ved å laste ned og aktivere et tema (og lese dokumentasjonen og ta noen ekstra trinn, selvsagt).
For eksempel, ZURB Foundation er avhengig av jQuery Javascript-biblioteket, så du må sannsynligvis installere jQuery Update. Sjekk om du bruker andre moduler som er avhengige av jQuery. Hvis du bruker for ny en versjon av jQuery, kan disse modulene slutte å fungere.
Du vil også sikkert bruke dette temaet som et grunntema for ditt eget tilpassede tema. Tilpasning er hvor ZURB Foundation virkelig skinner.
Trenger du dette temaet for å bruke ZURB Foundation i Drupal?
Det gjør du ikke trenge dette temaet for å bruke ZURB Foundation-rammeverket. I det enkleste tilfellet legger dette temaet bare ZURB Foundation CSS og Javascript til nettstedet ditt, og du kan gjøre det manuelt.
Men dette temaet gjør det enklere, og det inkluderer også litt videre integrasjon med Drupal.
I tillegg kan du legge til mindre tilleggsmoduler for videre integrasjon. For eksempel kan ZURB Orbit-modulen lage en Orbit-lysbildefremvisning med bildefelt. Med ZURB Clearing-modulen kan du lage responsive lysbokser med Media-bilder.
Merk: Jeg har ikke brukt disse små modulene enda meg selv, så de kan være fulle av fare. Som ved denne skrivingen krever ZURB Clearing
Media-2.x-dev, som kan være en farlig oppgradering hvis du for øyeblikket bruker Media 1.x. Og et krav til en utviklingsversjon av en modul skal alltid gi en pause. Likevel er disse og andre ZURB-moduler verdt å se på.
Velg hvilken versjon av ZURB Foundation som skal brukes
Før du laster ned ZURB Foundation-temaet, sjekk hvilken versjon du bør bruke. Det er forskjellige store versjoner av ZURB Foundation-rammen, og hovedversjonsnummeret for temaet tilsvarer rammen det virker med. Så
7.x-3.x Versjoner av temaarbeidet med Foundation 3, den
7.x-4.x Versjoner arbeider med Foundation 4, og
7.x-5.x Versjoner arbeider med Foundation 5.
Etter denne skrivingen er den siste stabile versjonen av temaet 7.x-4.x, som fungerer med Foundation 4. 7.x-5.x-versjonen er fortsatt i utvikling. Så, selv om Foundation Framework-nettstedet forutsetter at du bruker Foundation 5, vil du kanskje holde fast med Foundation 4 for nå.
Legg også merke til at Stiftelsen 5 har ekstra krav, spesielt jQuery
1.10. Stiftelsen 4 trenger bare jQuery
1.7+.
Vær oppmerksom på hvilken versjon av Foundation du bruker når du leser online dokumentasjonen. Dette gjelder spesielt hvis du ikke bruker den nyeste versjonen av rammen. Det er vanskelig å glide inn i å lese dokumentene for å si Stiftelse 5, så bli frustrert når en ny funksjon ikke fungerer på Stiftelses 4-siden din.
For eksempel inneholder Stiftelse 5 et helt sett av
medium klasser for mellomstore skjermer. I Foundation 4, vil disse mystisk mislykkes, med mindre du tar ekstra skritt.
Bruk SASS, Kompass og "_variables.scss"!
Hvis du skal justere CSS for dette temaet i det hele tatt, må du kontrollere at du:
- Bruk ZURB Foundation-temaet som et grunntema for ditt eget tilpassede underområde
- Generer dette subtheme ved hjelp av
drush kommando levert av temaet. Som dette:
drush fst your_theme_name
- Leisurely lese det utmerkede
_variables.scss fil
De
_variables.scss filen opprettes automatisk av
drush fst. Denne enkeltfilen inneholder variabler for nesten hva som helst Du vil kanskje finjustere i temaet CSS. Det er fantastisk! Alt på ett sted kan du sette alt fra standard skrift til skjermbredden til grensen på breadcrumbs.
Selvfølgelig kan du alltid sette opp tilleggsfiler også. Men
_variables.scss er et fantastisk sted å starte.
Legg merke til filtypen:
SCSS, ikke
css. Å bruke
_variables.scss, må du sette opp SASS (et CSS-utvidelsesspråk) og Compass (et rammeverk bygget med SASS). Når du kjører
kompass kompilere, din
SCSS filer vil bli til nydelig CSS i separate filer. (Jeg foretrekker
kompass ur - Dette fortsetter å løpe og oppdatere CSS mens du justerer
SCSS filer.)
Hvis du virkelig ikke vil bry deg med SASS, kan du skrive CSS-filer som vanlig og liste dem i temaet ditt
.info fil. Men stol på meg - den lille tiden investeringen for å lære nok å kompilere
_variables.scss vil bli betalt tilbake nesten umiddelbart.
Før du bruker ZURB Foundation
ZURB Foundation er mest utmerket, men det er ikke det eneste front-end-rammeverket som er integrert med Drupal. Du vil kanskje vurdere Bootstrap, et lignende rammeverk som også har et Drupal-tema. For nå bruker jeg ZURB Foundation selv, men det er fordi forskningen min indikerte at det var lettere å tilpasse enn Bootstrap.
Joyride-komponenten er også ganske søt.
Og om du bruker ZURB Foundation, Bootstrap eller et annet rammeverk, sørg for å få disse tipsene om å bruke et rammeverk med Drupal.
