Gebruik die ZURB Foundation Tema vir Drupal

Kry die krag van die ZURB-stigtingraamwerk in 'n Drupal-tema

Voordat daar 'n Twitter Bootstrap was , was daar (en is) ZURB Foundation, 'n raamwerk waarmee jy mooi knoppies, blokkaarte, vorderingsbalke, prystafels en nog baie meer kan byvoeg met 'n paar goed geplaasde CSS-klasse. Met die ZURB Foundation-tema vir Drupal kan jy al hierdie bling op 'n dodelike gemak op jou Drupal-webwerf ontketen.

Wat is die ZURB Stigting Raamwerk?

Die ZURB Foundation-raamwerk is 'n versameling van CSS en Javascript-kode vir 'n klomp goed wat jy waarskynlik op jou webwerf wil hê. Dit sluit nie net klikbare oogkoekies soos die voornoemde knoppies in nie, maar ook 'n paar wonderlike responsiewe krag.

U gebruik die meeste van hierdie funksies deur spesiale CSS-klasse by te voeg. Byvoorbeeld:

Hier is 'n knoppie .

En hier is 'n klein knoppie klein knoppie .

Die ZURB-stigtingraamwerk is heeltemal los van Drupal. Mense gebruik dit op WordPress, Joomla, en selfs statiese HTML- werwe.

Wat is die ZURB Stigting Drupal Tema?

Met die Drupal ZURB Foundation- tema kan jy al hierdie ZURBish-krag loslaat deur net 'n tema te laai en aan te stel (en lees die dokumentasie en neem 'n paar ekstra stappe, natuurlik).

Byvoorbeeld, die ZURB-stigting maak staat op die jQuery Javascript-biblioteek, dus jy sal waarskynlik jQuery Update moet installeer. Kyk of u enige ander modules gebruik wat op jQuery staatmaak. As jy te nuut 'n weergawe van jQuery gebruik, kan hierdie modules ophou werk.

Ook sal jy waarskynlik hierdie tema as 'n basis tema vir jou eie persoonlike tema gebruik. Aanpassing is waar die ZURB-stigting werklik skyn.

Het u hierdie tema nodig om die ZURB-stigting in Drupal te gebruik?

Jy het nie hierdie tema nodig om die ZURB Foundation-raamwerk te gebruik nie. By die eenvoudigste, hierdie tema voeg net die ZURB Foundation CSS en Javascript by jou webwerf, en jy kan dit handmatig doen.

Maar hierdie tema maak dit makliker, en dit sluit ook 'n verdere integrasie met Drupal in.

Daarbenewens kan u kleiner addisionele modules byvoeg vir verdere integrasie. Byvoorbeeld, met die ZURB Orbit-module kan jy 'n Orbit-skyfievertoning met beeldvelde bou. Met die ZURB Clearing-module kan jy reageer liggies skep met Media-beelde.

Let wel: Ek het hierdie klein modules nog nie self gebruik nie, so hulle kan gevaarlik wees. Vanuit hierdie skrywe vereis ZURB Clearing Media-2.x-dev, wat 'n gevaarlike opgradering kan wees as u Media 1.x tans gebruik. En 'n vereiste vir 'n ontwikkelings weergawe van 'n module moet altyd een pouse gee. Tog, hierdie en ander ZURB modules is die moeite werd om te kyk.

Kies watter weergawe van die ZURB-stigting om te gebruik

Voordat jy die ZURB Foundation-tema aflaai, kyk watter weergawe jy moet gebruik. Daar is verskillende groot weergawes van die ZURB Foundation raamwerk, en die hoofversieningsnommer vir die tema stem ooreen met die raamwerk waarmee dit saamwerk. Die 7x- 3 .x-weergawes van die tema werk met Foundation 3 , die 7.x- 4 .x-weergawes werk saam met Foundation 4 en die 7.x- 5 .x-weergawes werk met Foundation 5 .

Vanuit hierdie skrif is die nuutste stabiele weergawe van die tema 7.x-4.x, wat saam met Foundation 4 werk. Die 7.x-5.x weergawe is nog in ontwikkeling. Dus, hoewel die Foundation Framework webwerf aanvaar dat jy Foundation 5 sal gebruik, wil jy dalk nou met Stigting 4 vashou.

Let ook daarop dat Stigting 5 ekstra vereistes het, veral jQuery 1.10. Stigting 4 het net jQuery 1.7+ nodig.

Wees bewus van watter weergawe van die Stigting jy gebruik wanneer jy die aanlyn dokumentasie lees. Dit is veral waar as jy nie die nuutste weergawe van die raamwerk gebruik nie. Dit is dodelik maklik om die dokumente te lees, byvoorbeeld Stichting 5, en word gefrustreerd wanneer 'n nuwe funksie nie op jou Foundation 4-werf werk nie.

Stigting 5 bevat byvoorbeeld 'n hele reeks medium klasse vir mediumgrootte skerms. In Stigting 4 sal dit misterieus misluk tensy jy ekstra stappe doen.

Gebruik SASS, Kompas, en & # 34; _variables.scss & # 34 ;!

As jy die CSS vir hierdie tema wil verander, maak seker dat jy:

Die _variables.scss lêer word outomaties deur drush fst geskep. Hierdie enkele lêer bevat veranderlikes vir byna enigiets wat jy dalk wil inpas in jou tema CSS. Dis wonderlik! Op een plek kan jy alles van die verstek lettertipe tot by die skermwydte na die rand van die broodkrummels stel.

Uiteraard kan u ook altyd addisionele lêers opstel. Maar _variables.scss is 'n wonderlike plek om te begin.

Let op die lêeruitbreiding: scss, nie css. Om _variables.scss te gebruik, moet u SASS ('n CSS-uitbreidingstaal) en Kompas ('n raamwerk wat met SASS gebou is) opstel. As jy kompas kompileer, sal jou scss lêers verander in 'n pragtige CSS in aparte lêers. (Ek verkies kompaswag - dit bly hardloop en opdater die CSS as jy die scss lêers tweak.)

As jy regtig nie met SASS wil worstel nie, kan jy CSS-lêers soos gewoonlik skryf en dit in jou tema se .info-lêer lys. Maar vertrou my - die klein belegging om genoeg te leer om _variables.scss op te stel sal amper onmiddellik terugbetaal word.

Voordat jy die ZURB-stigting gebruik

Die ZURB-stigting is die beste, maar dit is nie die enigste front-end raamwerk wat by Drupal geïntegreer is nie. Jy sal dalk Bootstrap wil oorweeg, 'n soortgelyke raamwerk wat ook 'n Drupal-tema het. Vir nou gebruik ek self die ZURB-stigting, maar dit is omdat my navorsing aangedui het dat dit makliker was om aan te pas as Bootstrap.

Ook, die Joyride komponent is redelik soet.

En of jy die ZURB Foundation, Bootstrap, of 'n ander raamwerk gebruik, is seker om hierdie wenke te kry oor die gebruik van 'n raamwerk met Drupal .