Користење на Фондацијата ЗУРБ Тема за Друпал

Добијте ја моќта на рамката на Фондацијата ZURB во Друпал

Пред да има Twitter Bootstrap , постоеше (и е) Фондацијата ZURB, рамка која ви овозможува да додадете прилично копчиња, да ги блокирате мрежите, прогресните шипки, табелите за цените и многу повеќе со неколку добро поставени CSS класи. Со темата на Фондацијата ZURB за Друпал, можете да го ослободите сето ова bling на вашиот сајт Друпал со фатална леснотија.

Која е рамката на Фондацијата ЗУРБ?

Фондацијата ZURB Foundation е збирка на CSS и Javascript код за куп работи што веројатно сакате на вашата веб-страница. Ова ги вклучува не само бонбони за очи, како и претходно споменатите копчиња, туку и некои навистина неверојатни реактивни напојувања.

Повеќето од овие функции ги користите со додавање специјални CSS класи. На пример:

Овде е копчето .

И тука е малото копче .

Рамката на Фондацијата ЗУРБ е целосно одвоена од Друпал. Луѓето го користат на WordPress, Joomla, па дури и статични HTML- страници.

Која е фондацијата ЗУРБ Друпал?

Темата на Drupal ZURB Foundation ви овозможува да ја ослободите целата оваа моќ ZURBish само со преземање и овозможување на тема (и читање на документацијата и преземање неколку дополнителни чекори, се разбира).

На пример, фондацијата ZURB се потпира на библиотеката jQuery Javascript, па веројатно ќе треба да инсталирате jQuery Update. Проверете дали користите други модули кои се потпираат на jQuery. Ако користите премногу нова верзија на jQuery, овие модули може да престанат да работат.

Исто така, веројатно ќе сакате да ја користите оваа тема како основна тема за вашата сопствена тема. Прилагодување е местото каде Фондацијата ЗУРБ навистина сјае.

Дали ви треба оваа тема да ја користите фондацијата ЗУРБ во Друпал?

Оваа тема не ви е потребна за да ја користите рамката на Фондацијата ZURB. На наједноставен, оваа тема само додава ZURB Foundation CSS и Javascript на вашата веб-страница, а вие можете да го направите тоа рачно.

Но, оваа тема го олеснува тоа, а исто така вклучува и понатамошна интеграција со Друпал.

Плус, можете да додадете помали дополнителни модули за понатамошна интеграција. На пример, модулот ZURB Orbit ви овозможува да изградите слајдшоу на орбитата со полиња за слики. Модулот ZURB Clearing ви овозможува да креирате осветлени ламби со медиумски слики.

Забелешка: јас не ги користев овие мали модули уште себе, па затоа тие може да бидат оптоварени со опасност. Од ова пишување, ZURB Clearing бара Media-2.x-dev, што може да биде опасна надградба ако во моментов користите Media 1.x. И услов за развојна верзија на модулот секогаш треба да даде една пауза. Сепак, овие и другите ZURB модули вреди да се разгледаат.

Изберете која верзија на Фондацијата ЗУРБ ќе се користи

Пред да ја преземете темата на Фондацијата ZURB, проверете која верзија треба да ја користите. Постојат различни главни верзии на рамката на Фондацијата ZURB, а главниот број на верзијата за темата одговара на рамката со која работи. Значи, 7.x- 3 .x верзиите на темата работат со Фондацијата 3 , верзиите 7.x- 4 .x работат со Фондацијата 4 , а верзиите 7.x- 5 .x работат со Фондацијата 5 .

Од ова пишување најновата стабилна верзија на темата е 7.x-4.x, која работи со Фондацијата 4. Верзијата 7.x-5.x е сеуште во развој. Значи, иако рамковната веб-страница на Фондацијата претпоставува дека ќе ја користите Фондацијата 5, можеби ќе сакате да се држите со Фондацијата 4 засега.

Исто така, забележете дека Фондацијата 5 има дополнителни барања, особено jQuery 1.10. Фондацијата 4 му треба само jQuery 1.7+.

Бидете свесни за која верзија на Фондацијата што ја користите кога ја читате онлајн документацијата. Ова е особено точно ако не ја користите најновата верзија на рамката. Тоа е фатално лесно да се лизга во читање на документи за, да речеме, Фондацијата 5, тогаш се фрустрирани кога новата функција не работи на вашата Фондација 4 сајт.

На пример, Фондацијата 5 вклучува цела низа средни класи за средни екрани. Во Фондацијата 4, овие мистериозно ќе пропаднат ако не преземете дополнителни чекори.

Користете SASS, Compass и & # 34; _variables.scss & # 34 ;!

Ако сакате воопшто да ги совладате CSS за оваа тема, осигурајте се дека:

  • Користете ја темата на Фондацијата ZURB како основна тема за вашата сопствена субтемма
  • Генерирање на оваа субтекма користејќи ја командата на drush обезбедена од темата. Како што е ова: напиток fst your_theme_name
  • Едноставно прочитајте ја одличната датотека _variables.scss

Фајлот _variables.scss автоматски се креира со помош на. Оваа единствена датотека содржи променливи за речиси нешто што можеби сакате да го прилагодите во вашата тема CSS. Неверојатно е! Сите на едно место, можете да поставите сè од стандардниот фонт до ширината на екранот до границата на лебните кромид.

Се разбира, секогаш можете да поставите дополнителни датотеки. Но, _variables.scss е прекрасно место за почеток.

Забележете ја наставката на датотеката: scss, а не css. За да користите _variables.scss, ќе треба да поставите SASS (CSS јазикот за продолжување) и Compass (рамка изградена со SASS). Кога ќе го извршите compass compile, вашите scss датотеки ќе се претворат во прекрасна CSS во одделни датотеки. (Претпочитам компас види - ова продолжува да работи и ажурирање на CSS како што ги нагодувате scss датотеките.)

Ако навистина, навистина не сакате да се мачам со SASS, можете да напишете CSS-датотеки како и обично и да ги наведете во датотеката .info. Но, верувај ми - малата инвестиција за да научиш доволно за да составиш _variables.scss ќе биде вратена речиси веднаш.

Пред да ја користите фондацијата ЗУРБ

Фондацијата ЗУРБ е најуспешна, но тоа не е единствената рамка која е интегрирана со Друпал. Можеби ќе сакате да го разгледате Bootstrap , слична рамка која исто така има тема на Drupal. За сега, јас ја користам Фондацијата ЗУРБ, но тоа е затоа што моето истражување покажа дека е полесно да се прилагодува од Bootstrap.

Исто така, компонентата Joyride е прилично слатка.

И без разлика дали користите ZURB Foundation, Bootstrap или некоја друга рамка, не заборавајте да ги добиете овие совети за користење на рамка со Друпал .