Personalizar una plantilla Responsive con CSS

• Escoger el Avanzado ofrece la ventaja de tener a mano todo el control de la hoja de estilo utilizada para editar la apariencia de tu página. Podrás así modificar el CSS existente o eliminar algunos estilos. El inconveniente es que una vez editada esta hoja de estilo, no podrás beneficiarte de las posibles modificaciones de la hoja de estilos propuestas por el Web Designer de emiweb. Además, si deseas modificar un color por ejemplo, tendrás que especificar un código hexadecimal (por ejemplo #ffffff para el blanco). Ya no podrás escogerlo desde el formulario de personalización. Esta solución esta dedicada a las personas que tienen un buen conocimiento de CSS y que desean tener el control total de la apariencia del sitio.
• Optar por añadir CSS desde la selección Editar / Añadir código CSS a la plantilla te permite al contrario, continuar beneficiándote de las posibles modificaciones de la hoja de estilos de tu plantilla. El inconveniente es que para modificar un estilo existente, deberás reescribirlo, lo que aumentará in fine, el peso de la hoja de estilo y por consecuente, el tiempo de carga. Privilegia este método si tus conocimientos en CSS son limitados y si deseas beneficiarte de las posibles correcciones gráficas.

Sea cual sea la solución escogida, intenta escribir todos los estilos CSS de tu página en un solo y mismo sitio, esto facilita su acceso y su mantenimiento.

Partimos del principio que tu sitio es Responsive, es decir, que le has aplicado una plantilla basada en los frameworks CSS Bootstrap (versión 2) o EMS Framework.

Los Break Points

¿A qué llamamos Break Points (puntos de interrupción) en Web Design? El principio de un sitio web llamado Responsive es que se pueda adaptar a todos los formatos de pantalla, sea cuál sea su tamaño. Gracias al CSS podemos modificar la apariencia de un elemento en función del tamaño de la pantalla. Aquí tienes un ejemplo de las principales resoluciones evaluadas en CSS para definir en que tipo de pantalla se muestra una página web.

Un punto de interrupción es entonces un límite a partir del cual aplicamos los estilos CSS. En esta tabla, el límite esta exprimido en pixeles pero se puede exprimir también en otras unidades de medida (vw, rem, etc.).

Ya que tu página es Responsive, antes de escribir un estilo CSS, es importante que te preguntes antes ¿Qué tipo de pantalla estará afectada por este estilo? Si la respuesta no es ¡Todas las pantallas!, tendrás que adaptar tu estilo CSS a un tipo de pantalla predefinida.

Quédate con la idea de que los estilos CSS son concebidos para una anchura de pantalla por defecto. Todos los estilos CSS no adaptados a este tamaño deberán lógicamente figurar en un @media query correspondiente.

Consulta el tutorial Personalizar una plantilla con CSS para entender la lógica de declaración de estilos.

Antes de continuar, es importante que te hagas una segunda pregunta, que te ayudará a ordenar tus estilos CSS : ¿Voy a concebir el CSS de mi sitio prioritariamente para los terminales mobiles?, o dicho de otra forma ¿Mi página web es Mobile First?

¿Cómo saber si el CSS de mi página es Mobile First?

En emiweb, es muy simple:

• Todas las plantillas basadas en el framework CSS Bootstrap v2 (las reconocerás gracias al sufijo [Bootstrap]) no son Mobile First.
• Todas las plantillas basadas en el framework CSS EMS Framework (las reconocerás gracias al sufijo EMS Framework) son Mobile First.