Avant l'existence de Twitter Bootstrap, il existait (et existe toujours) ZURB Foundation, un framework qui vous permet d'ajouter de jolis boutons, des grilles de blocs, des barres de progression, des tableaux de tarification et bien plus encore avec quelques classes CSS bien placées. Avec le thème Fondation ZURB pour Drupal, vous pouvez libérer tout ce bling sur votre site Drupal avec une aisance fatale.
Qu'est-ce que le cadre de la fondation ZURB?
Le cadre de la fondation ZURB est une collection de code CSS et Javascript pour un tas de choses que vous voulez probablement sur votre site Web. Cela inclut non seulement des friandises pour les yeux cliquables comme les boutons susmentionnés, mais également un pouvoir réactif vraiment incroyable.
Vous utilisez la plupart de ces fonctionnalités en ajoutant des classes CSS spéciales. Par exemple:
Voici une .
Et voici un petit bouton.
Le cadre de la fondation ZURB est totalement séparé de Drupal. Les gens l'utilisent sur WordPress, Joomla et même sur des sites HTML statiques.
Quel est le thème Drupal de la Fondation ZURB?
Fondation Drupal ZURB thème vous permet de libérer tout ce pouvoir ZURBish simplement en téléchargeant et en activant un thème (et en lisant la documentation et en prenant quelques mesures supplémentaires, bien sûr).
Par exemple, ZURB Foundation s'appuyant sur la bibliothèque Javascript de jQuery, vous devrez probablement installer jQuery Update. Vérifiez si vous utilisez d'autres modules qui s'appuient sur jQuery. Si vous utilisez une nouvelle version de jQuery, ces modules risquent de ne plus fonctionner.
En outre, vous voudrez probablement utiliser ce thème comme thème de base pour votre propre thème personnalisé. La personnalisation est l’endroit où ZURB Foundation brille vraiment.
Avez-vous besoin de ce thème pour utiliser la fondation ZURB dans Drupal?
Tu ne avoir besoin Ce thème utilise le framework ZURB Foundation. Dans sa forme la plus simple, ce thème ajoute simplement le CSS et le code ZURB Foundation à votre site, et vous pouvez le faire manuellement.
Mais ce thème facilite les choses et inclut également une intégration plus poussée avec Drupal.
De plus, vous pouvez ajouter des modules supplémentaires plus petits pour une intégration plus poussée. Par exemple, le module ZURB Orbit vous permet de créer un diaporama Orbit avec des champs d’image. Le module ZURB Clearing vous permet de créer des lightbox sensibles avec des images multimédias.
Remarque: je n’ai pas encore utilisé ces minuscules modules moi-même, de sorte qu’ils risquent de présenter des risques considérables. A ce jour, ZURB Clearing requiert
Media-2.x-dev, qui pourrait constituer une mise à niveau dangereuse si vous utilisez actuellement Media 1.x. Et l'exigence d'une version de développement d'un module devrait toujours donner une pause. Néanmoins, ces modules et d’autres modules ZURB méritent d’être explorés.
Choisissez quelle version de ZURB Foundation utiliser
Avant de télécharger le thème de la fondation ZURB, vérifiez quelle version vous devez utiliser. Il existe différentes versions majeures du framework ZURB Foundation, et le numéro de version majeure du thème correspond au framework avec lequel il fonctionne. Alors le
7.x-3.X les versions du thème fonctionnent avec Foundation 3, la
7.x-4.X les versions fonctionnent avec Foundation 4, et le
7.x-5.X Les versions fonctionnent avec Foundation 5.
Au moment de la rédaction de ce document, la dernière version stable du thème est la version 7.x-4.x, qui fonctionne avec Foundation 4. La version 7.x-5.x est en cours de développement. Par conséquent, même si le site Web de Framework Foundation suppose que vous utiliserez Foundation 5, vous pouvez vous en tenir à Foundation 4 pour le moment.
Notez également que Foundation 5 a des exigences supplémentaires, en particulier jQuery.
1.10. Foundation 4 n'a besoin que de jQuery
1.7+.
Sachez quelle version de Foundation vous utilisez lorsque vous lisez la documentation en ligne. Cela est particulièrement vrai si vous n'utilisez pas la dernière version du framework. Il est extrêmement facile de glisser dans la documentation de Foundation 5, par exemple, puis d’être frustré quand une nouvelle fonctionnalité ne fonctionne pas sur votre site Foundation 4.
Par exemple, Foundation 5 comprend tout un ensemble de
moyen cours pour écrans de taille moyenne. Dans Foundation 4, ils échoueront mystérieusement à moins que vous ne preniez des mesures supplémentaires.
Utilisez SASS, Compass et "_variables.scss"!
Si vous voulez modifier le CSS pour ce thème, assurez-vous de:
- Utilisez le thème de la fondation ZURB comme thème de base pour votre propre sous-thème personnalisé
- Générez ce sous-thème en utilisant le
drush commande fournie par le thème. Comme ça:
drush fst your_theme_name
- Parcourez tranquillement l'excellent
_variables.scss fichier
le
_variables.scss le fichier est créé automatiquement par
drush fst. Ce fichier unique contient des variables pour presque n'importe quoi vous voudrez peut-être peaufiner votre thème CSS. C'est incroyable! Tout en un, vous pouvez tout définir, de la police par défaut à la largeur de l’écran, en passant par la bordure de la chapelure.
Bien sûr, vous pouvez toujours configurer des fichiers supplémentaires. Mais
_variables.scss est un endroit magnifique pour commencer.
Notez l'extension du fichier:
scss, ne pas
css. Utiliser
_variables.scss, vous devez configurer SASS (un langage d’extension CSS) et Compass (un framework construit avec SASS). Quand tu cours
compiler compas, votre
scss les fichiers se transformeront en CSS charmant dans des fichiers séparés. (Je préfère
montre boussole - ceci continue à courir et à mettre à jour le CSS pendant que vous ajustez le
scss des dossiers.)
Si vous ne voulez vraiment pas vous soucier de SASS, vous pouvez écrire des fichiers CSS comme d'habitude et les lister dans le thème de votre
.Info fichier. Mais croyez-moi - le peu de temps investi pour en apprendre assez pour compiler
_variables.scss sera remboursé presque instantanément.
Avant d'utiliser la fondation ZURB
La fondation ZURB est excellente, mais ce n’est pas le seul framework front-end intégré à Drupal. Vous voudrez peut-être envisager Bootstrap, un framework similaire qui a également un thème Drupal. Pour le moment, j'utilise moi-même la fondation ZURB, mais c'est parce que mes recherches ont révélé qu'il était plus facile à personnaliser que Bootstrap.
En outre, le composant Joyride est plutôt sympathique.
Et que vous utilisiez ZURB Foundation, Bootstrap ou un autre framework, assurez-vous de suivre ces conseils d'utilisation d'un framework avec Drupal.
