Estructura de las plantillas

Nivel superior

Todo el contenido de la página creada irá envuelto en un contenedor para evitar que se produzcan fallos en el estilado, de esta manera:

<div class="cms">
    ...
</div>

Secciones

Las secciones hacen que se guarde un márgen de seguridad con la siguiente.

<section>
    ...
</section>

Contenedores de contenido

Salvo contados casos (banners, imágenes a ancho completo, secciones con imagen de fondo), todo el contenido irá dentro de un contenedor que hará que el contenido no ocupe el 100% de la pantalla y se lea más fácilmente en monitores de gran tamaño.

Estos contenedores siempre deben ir dentro de una sección de la siguiente manera.

<section>
    <div class="cms-container">
        ...
    </div>
</section>

Resumen estructura básica

Así pues, la estructura básica de una página con una sección sería la siguiente:

<div class="cms">
    <section>
        <div class="cms-container">
            ...
        </div>
    </section>
    Más secciones....
</div>

Sistema de columnas

Se han definido hasta 5 columnas usables para meter texto/imágenes. De cualquier forma la recomendación es no usar más de 4 salvo para mostrar un listado de productos como se verá en su sección correspondiente.

El sistema de columnas sigue la misma lógica. Primero creamos la estructura de nuestra sección y nuestro contenedor (no queremos que las columnas ocupen el 100% del ancho en dispositivos grandes). Posteriormente creado nuestro contenedor de columnas y metemos dentro el número de "div" correspondiente. En el ejemplo de código se muestran las costrucciones de columnas de uno a cuatro.

    <section>
        <div class="cms-container">
            <div class="grid-1">
                <div>
                    Contenido columna 1
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="cms-container">
            <div class="grid-2">
                <div>
                    Contenido columna 1
                </div>
                <div>
                    Contenido columna 2
                </div>
            </div>
        </div>
    </section>
    
    <section>
        <div class="cms-container">
            <div class="grid-3">
                <div>
                    Contenido columna 1
                </div>
                <div>
                    Contenido columna 2
                </div>
                <div>
                    Contenido columna 3
                </div>
            </div>
        </div>
    </section>
    
    <section>
        <div class="cms-container">
            <div class="grid-4">
                <div>
                    Contenido columna 1
                </div>
                <div>
                    Contenido columna 2
                </div>
                <div>
                    Contenido columna 3
                </div>
                <div>
                    Contenido columna 4
                </div>
            </div>
        </div>
    </section>

Por supuesto, lo que metamos dentro de cada columna es libre. En el apartado de secciones veremos todas las propuestas listas para copiar y pegar.