Antes de que existiera Twitter Bootstrap, existía (y existe) la Fundación ZURB, un marco que le permite agregar botones bonitos, cuadrículas de bloques, barras de progreso, tablas de precios y mucho más con algunas clases de CSS bien ubicadas. Con el tema de la Fundación ZURB para Drupal, puedes desatar todo este bling en tu sitio de Drupal con una facilidad fatal.
¿Qué es el marco de la Fundación ZURB?
El marco de trabajo de ZURB Foundation es una colección de código CSS y Javascript para un montón de cosas que probablemente quieras en tu sitio web. Esto incluye no solo los caramelos oculares, como los botones mencionados anteriormente, sino también un poder de respuesta realmente sorprendente.
Usas la mayoría de estas características agregando clases especiales de CSS. Por ejemplo:
Aquí hay un .
Y aquí hay un pequeño botón.
El marco de la Fundación ZURB está totalmente separado de Drupal. La gente lo usa en WordPress, Joomla e incluso en sitios HTML estáticos.
¿Qué es el tema de la Fundación ZURB Drupal?
La Fundación Drupal ZURB tema le permite liberar todo este poder de ZURBish simplemente descargando y habilitando un tema (y leyendo la documentación y tomando algunos pasos adicionales, por supuesto).
Por ejemplo, ZURB Foundation se basa en la biblioteca de jQuery Javascript, por lo que probablemente tendrás que instalar la actualización de jQuery. Compruebe si está utilizando otros módulos que se basan en jQuery. Si usa una versión demasiado nueva de jQuery, estos módulos pueden dejar de funcionar.
Además, probablemente querrá usar este tema como tema base para su propio tema personalizado. La personalización es donde realmente brilla la Fundación ZURB.
¿Necesita este tema para usar la Fundación ZURB en Drupal?
Tu no necesitar este tema para utilizar el marco de la Fundación ZURB. En su forma más simple, este tema solo agrega la Fundación ZURB CSS y Javascript a su sitio, y usted podría hacerlo manualmente.
Pero este tema lo hace más fácil, y también incluye una mayor integración con Drupal.
Además, puede agregar módulos adicionales más pequeños para una mayor integración. Por ejemplo, el módulo ZURB Orbit te permite crear una presentación de diapositivas Orbit con campos de imagen. El módulo de compensación de ZURB le permite crear cajas de luz sensibles con imágenes de medios.
Nota: todavía no he usado estos pequeños módulos, por lo que pueden estar llenos de peligros. A partir de este escrito, ZURB Clearing requiere
Media-2.x-dev, lo que podría ser una actualización peligrosa si actualmente está utilizando Media 1.x. Y un requisito para una versión de desarrollo de un módulo siempre debe dar una pausa. Aún así, estos y otros módulos ZURB son dignos de ser analizados.
Elija qué versión de ZURB Foundation usar
Antes de descargar el tema de la Fundación ZURB, verifique qué versión debe usar. Existen diferentes versiones principales del marco de la Fundación ZURB, y el número de versión principal del tema corresponde al marco con el que trabaja. Entonces el
7.x-3.X Versiones del tema trabajo con la Fundación. 3, la
7.x-4.X Las versiones funcionan con la Fundación. 4, y el
7.x-5.X Las versiones funcionan con la Fundación. 5.
En el momento de escribir este artículo, la última versión estable del tema es 7.x-4.x, que funciona con Foundation 4. La versión 7.x-5.x aún está en desarrollo. Por lo tanto, aunque el sitio web de Foundation Framework supone que usará Foundation 5, es posible que desee seguir con Foundation 4 por ahora.
También tenga en cuenta que Foundation 5 tiene requisitos adicionales, especialmente jQuery
1.10. Fundación 4 solo necesita jQuery.
1.7+.
Tenga en cuenta qué versión de Foundation está utilizando cuando lea la documentación en línea. Esto es especialmente cierto si no está utilizando la última versión del marco. Es extremadamente fácil deslizarse en la lectura de los documentos para, por ejemplo, Foundation 5, y luego frustrarse cuando una nueva característica no funciona en su sitio Foundation 4.
Por ejemplo, Foundation 5 incluye un conjunto completo de
medio Clases para pantallas de tamaño medio. En Foundation 4, estos fallarán misteriosamente a menos que tomes pasos adicionales.
Utilice SASS, Compass y "_variables.scss"!
Si vas a ajustar el CSS para este tema, asegúrate de:
- Utilice el tema de la Fundación ZURB como tema base para su propio subtema personalizado
- Genera este subtema usando el
drush comando proporcionado por el tema. Me gusta esto:
drush fst tu_tema_nombre
- Relájese pausadamente la excelente
_variables.scss expediente
los
_variables.scss archivo es creado automáticamente por
drush fst. Este único archivo contiene variables para casi cualquier cosa es posible que desee ajustar su tema CSS. ¡Es asombroso! Todo en un solo lugar, puede configurar todo, desde la fuente predeterminada hasta el ancho de la pantalla hasta el borde en las rutas de navegación.
Por supuesto, siempre puedes configurar archivos adicionales también. Pero
_variables.scss Es un lugar espléndido para empezar.
Observe la extensión del archivo:
scssno
css. Usar
_variables.scss, deberás configurar SASS (un lenguaje de extensión CSS) y Compass (un marco construido con SASS). Cuando corres
compás compás, tu
scss Los archivos se convertirán en CSS encantador en archivos separados. (Yo prefiero
reloj de brújula - Esto continúa ejecutando y actualizando el CSS a medida que modificas el
scss archivos.)
Si realmente no quieres molestarte con SASS, puedes escribir archivos CSS como siempre y listarlos en tu tema
.info expediente. Pero confía en mí: la pequeña inversión de tiempo para aprender lo suficiente para compilar
_variables.scss será devuelto casi al instante.
Antes de usar la Fundación ZURB
La Fundación ZURB es excelente, pero no es el único marco de aplicaciones para el usuario que se ha integrado con Drupal. Es posible que desee considerar Bootstrap, un marco similar que también tiene un tema de Drupal. Por ahora, estoy usando la Fundación ZURB, pero eso se debe a que mi investigación indicó que era más fácil de personalizar que Bootstrap.
Además, el componente Joyride es bastante dulce.
Y ya sea que use ZURB Foundation, Bootstrap o algún otro marco, asegúrese de obtener estos consejos sobre el uso de un marco con Drupal.
