Esquema CSS

Liviano y eficiente

¡Bienvenido/a!
Este cartel está hecho con Esquema CSS (clase "Cartel").
Desaparecerá en 15 segundos.

Descargar Donar Esquema PHP
Características
Introducción

Todos los sitios se ven iguales, parecen copias. De hecho lo son, ya que nadie diseña. La opción favorita es que el usuario realice una conexión a un sitio externo (vulnerando la privacidad) para obtener un CSS enorme y repleto de selectores que nunca se utilizarán. Y lo peor, usar javascript para armar el estilo de la página.

Es sabido que javascript se utiliza únicamente para mejorar la experiencia del usuario. El sitio debe funcionar perfectamente sin él. Entonces si un sitio depende de javascript para funcionar (o peor, para generar el CSS) está definitivamente mal hecho.

Esquema CSS proviene de diferentes entornos, tomando lo mejor y lo que sirve de cada uno.

Unidades Relativas

Esquema CSS utiliza medidas relativas, dejando de lado los pixeles (a diferencia de los más famosos entornos CSS). Al usar medidas relativas se ahorra código css y se adapta a diferentes pantallas y tamaños de fuentes de forma automática.

Por ejemplo, para el diseño de los botones, normalmente usan medidas fijas (pixeles). Esto genera código extra, posiblemente código que no se usa (un tamaño de botón que no se utilice), y limita al programador a usar únicamente los tamaños disponibles.

.boton-grande { padding: 15px }
.boton-normal { padding: 10px }
.boton-chico  { padding: 05px }

En Esquema CSS se usa medidas relativas a la fuente usada por el botón. Esto reduce el código al mínimo, no produce código extra (se usa para todos los botones), ofrece al programador infinitos tamaños de botones con solo cambiar el tamaño de la fuente.

.boton { padding: 0.5em 1.5em; }

Usando Esquema CSS

Botones con enlaces
Boton
Boton rojo
Boton lila grande redondeado
Boton verde xmini
Boton transparente
Boton transparente claro
Boton transparente oscuro

Se agrega a cada enlace (o botón de formulario) la clase BOTON, junto con el color, tamaño o característica deseada

<a href= "#" class = "boton">
Boton
</a>

<a href= "#" class = "boton rojo">
Boton rojo
</a>

<a href= "#" class = "boton lila grande redondeado">
Boton lila grande redondeado
</a>

<a href= "#" class = "boton verde xmini">
Boton verde xmini
</a>

<a href= "#" class = "boton transparente">Boton transparente</a>

<a href= "#" class = "boton transparente claro">Boton transparente claro</a>

<a href= "#" class = "boton transparente oscuro">Boton transparente oscuro</a>
Botones en un paso.
Enlace 1
Enlace 2
Enlace 3
Enlace Rojo

¿Uno por uno todos los botones? El poder de los selectores.
La clase CONJUNTO asigna de manera inmediata (no recursiva) a cada enlace el diseño de BOTON.
La clase CONJUNTO también se usa para etiquetas TABLE y más.

<div class = "conjunto boton verde">

<a href= "#">
Enlace 1
</a>

<a href= "#">
Enlace 2
</a>

<a href= "#">
Enlace 3
</a>

<a href= "#" class="boton rojo">Enlace Rojo</a>

</div>
Formularios
Opciones



<form class="formulario">
  <fieldset>
    <legend> Opciones </legend>
      <input type="text" value = "¡Hola!"/><br/>
      <input type="checkbox" id = "tilde" /><label for="tilde">Tilde común</label><br/>
      <input type="checkbox" class = "interruptor" id="interruptor" /><label for="interruptor">Interruptor</label><br/>
      <textarea>Hola</textarea><br/>

<div class = "horizontal anchofijo">
 <div> <input type="reset" class = "ancho"/>  </div>
 <div> <input type="submit" class = "ancho" />  </div>
</div>
</fieldset>
</form>
Tablas (Etiqueta TABLE)
Encabezado 1 Encabezado 2 Encabezado 3
Contenido 1 Contenido 2 - Contenido 2 - Contenido 2 - Contenido 2 Contenido 3
Contenido 4 - Contenido 4 Contenido 5 Contenido 6
<table class="tabla">
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
</tr>
<tr>
<td>Contenido 1</td>
<td>Contenido 2 - Contenido 2 - Contenido 2 - Contenido 2</td>
<td>Contenido 3</td>
</tr>
<tr>
<td>Contenido 4 - Contenido 4</td>
<td>Contenido 5</td>
<td>Contenido 6</td>
</tr>
</table>
Tablas (Grillas)

Definen ubicación de elementos en la página.
¡NO USA FLEX!. Por lo tanto es compatible con más navegadores.
Estas tablas se "rompen" en pantallas pequeñas formando una lista de bloques.
La clase ANCHOFIJO asegura que cada columna tenga el mismo ancho.
No es necesario declarar las columnas ni las filas, ¡ES REDUNDANTE!.

Contenido A
Contenido B
Contenido C
Contenido 1
Contenido 2 - Contenido 2 - Contenido 2 - Contenido 2
Contenido 3
Contenido 4 - Contenido 4
Contenido 5
Contenido 6
<div class="tabla anchofijo coloreado">
<div>
<div>Contenido A</div>
<div>Contenido B</div>
<div>Contenido C</div>
</div>
<div>
<div>Contenido 1</div>
<div>Contenido 2 - Contenido 2 - Contenido 2 - Contenido 2</div>
<div>Contenido 3</div>
</div>
<div>
<div>Contenido 4 - Contenido 4</div>
<div>Contenido 5</div>
<div>Contenido 6</div>
</div>
</div>

Tablas Flexibles (sin la clase ANCHOFIJO) el ancho se ajusta al contenido.

Contenido A
Contenido B
Contenido C
Contenido 1
Contenido 2 - Contenido 2 - Contenido 2 - Contenido 2
Contenido 3
Contenido 4 - Contenido 4
Contenido 5
Contenido 6
Horizontal.
Opción 1 Opción 2 Opción 3 (Tres) Opción 4
Mensajes

<div class = "mensaje">


<div class = "mensaje amarillo">


<div class = "mensaje verde ancho">


<div class = "mensaje rojo">


<div class = "mensaje azul">

Ir a la Página Principal

Desarrollado con y por Javier Martínez

Si desea ponerse en contacto, envíe su mensaje aquí