Creando una Plantilla Usando Atomic

La plantilla Atomic es un esqueleto para su propia plantilla. Ésta consiste de:

• /htdocs/templates/atomic
  component.php  - a plantilla de la versión para imprimir 
  error.php - la plantilla de la página de error
  favicon.ico - el ícono del sitio web (Favicon)
  index.html - un archivo de seguridad desplegando una página en blanco cuando el directorio haya sido escrito directamente (también tiene que ser configurado por el servidor web pero usualmente es)
  index.php - Archivo Principal de la Plantilla
  templateDetails.xml - El archivo de configuración que contiene toda la información sobre los archivos, opciones y posiciones es necesario para mostrar la plantilla en la administrador de plantillas para después crear un paquete tipo zip instalable.
  template_preview.png - la imagen de pre-visualización de la plantilla, desplegada en el gestor de plantillas

  template_thumbnail.png - la imagen en miniatura de la plantilla, desplegada en el gestor de plantillas
• /htdocs/templates/atomic/css
  la carpeta para archivos CSS
• /htdocs/templates/atomic/html
  la carpeta para archivos Override - Atomic proporciona unas pocas opciones de modificación para módulos..
• /htdocs/templates/atomic/images
  la carpeta para imágenes
• /htdocs/templates/atomic/js
  la carpeta para archivos Java script
• /htdocs/templates/atomic/languages
  la carpeta para archivos de idioma - Atomic incluye archivos de base en idioma Inglés.

Archivo Principal de la Plantilla index.php

El nombre de este archivo de plantilla tiene que ser index.php ya que Joomla! busca los <jdoc> embebidos y los comandos PHP. Todo el marcado de HTML necesario está ya integrado y comentado. Puede cambiar el contenido del archivo de acuerdo a sus necesidades. 

Para obtener una idea, vamos a hacer un repaso rápido:

En la  línea 24 puede elegir si desea si desea elegir la estructura blueprint CSS o no. 

En las líneas 50, 56, 62 y más, se puede ver que la plantilla proporciona posiciones con nombres especiales (atomic-search, atomic-main_menu, ...). Si desea usar esos nombres tendrá que asignar sus módulos a esas posiciones. Si quiere cambiar los nombres, puede hacerlo en el archivo  templatedetails.xml.

En la línea 48 verá:

echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js

Joomla! sabe los valores en baseurl así como el nombre de su plantilla y puede accederlos cuando se necesiten.  

En línea 48 verá:

echo $app->getCfg('sitename');

Esto le dirá el nombre de su sitio.

En la línea 50 verá:

if($this->countModules('atomic-search')) ...

Esto cuenta como la cantidad de módulos en la posición atomic-search. Se usa para ajustar su diseño a diferentes situaciones. 

En línea 52 verá:

<jdoc:include type="modules" name="atomic-search" style="none" />

Este es un comando <jdoc>, que solo existe como espacio para nombre en Joomla!. Se usa para insertar el resultado HTML del tipo dado dentro los atributos. En este caso significa el resultado de todos los módulos asignados a la posición de plantilla atomic search. El atributo del estilo se llama module chrome y puede tener esos valores

• table - El resultado se despliega en una tabla.
• horz - El resultado se despliega horizontalmente en una celda de una tabla que la contiene.
• xhtml - El resultado es en un elemento conforme a XHTML <div>.
• rounded - El resultado es un formato en el cual las esquinas redondeadas pueden ser desplegadas. La clase del elemento es renombrado de moduletable a module.
• none - sin formateo 
• outline - el tipo de despliegue para la pre-visualización de la posición (?tp=1)
• Template specific style - Algunas plantillas, como Beez, tienen sus propios estilos. Vea el capítulo Angie Radtke Acerca de su Plantilla Beez.

Encontrará una lista completa de estilos en la documentación de Joomla! - What is module chrome.

Otros tipos <jdoc> son:

<jdoc:include type="head" />
<jdoc:include type="message" />
<jdoc:include type="component" style="none" /> 

Cada página necesita un encabezado (head), algunas veces un mensaje (message) (después de guardar) y, por supuesto, un componente. Un componente puede ser desplegado por página. El  componente puede hacer uso del module chrome también.

Las plantillas de error y la de versión para imprimir funcionan exactamente como el archivo de plantilla principal. 

Every page needs a head, sometimes a message (after saving) and, of course, a component. One component can be displayed per page. The component can make use of the module chrome as well.

The error and the print view template files work exactly like the main template file.

Carpeta CSS

Encontrará tres archivos en esta carpeta.

1. El archivo css/template.css con comandos CSS comentados predefinidos. Si no usa el esquema blueprint, tendrá que desactivar algunos de ellos. Las líneas están marcadas específicamente.
2. El archivo css/template_ie.css está vacío. Aquí puede añadir modificaciones de estilo para Internet Explorer.
3. El archivo css/template_rtl.css está vacío también. Puede añadir modificaciones de estilo para los idiomas.

Estructura Blueprint

Blueprint es una estructura CSS diseñado para reducir el tiempo de desarrollo y asegurar la compatibilidad entre navegadores. 
Algunos frases tomadas del archivo léame (readme):

¡Bienvenido a Blueprint! Esta es una estructura CSS diseñada para reducir su tiempo de desarrollo  CSS. Le proporciona una base sólida para construir sus propios comandos CSS. He aquí algunas de las características listas para usar que BP proporciona:

* Una retícula fácilmente personalizable

* Tipografía sensible por defecto

* Unos valores referenciales tipográficos

* Restauración CSS para el navegador perfeccionado

* Una hoja de estilo para impresión 

* Poderosos scripts para personalización

* ¡Absolutamente libre elementos accesorios!

Encontrará demos y tutoriales en el sitio web del proyecto - http://www.blueprintcss.org/.