YAML: framework CSS

ByLuis

YAML (Yet Another Multicolumn Layout) es un framework XHTML/CSS que nos permite crear plantillas para diseños web proporcionandonos diferentes tipos de layouts. Está basado en estándares, es sencillo de usar y comprobado en sitios web profesionales.
yaml.png
A parte, nos ofrece una herramienta online para crear nuestros propios diseños de forma rápida y sencilla. Tan solo deberemos indicar el tipo de diseño, los tamaños, podremos añadirle elementos HTML y por último recuperar el código fuente.
YAML
Vía / Ajaxian

Similar Posts

Consejos para desarrollar cumpliendo estándares

ByLuis

Buenos consejos a tener en cuenta cuando se trata de desarrollar cumpliendo estándares web.

  • Menos es más, no uses mas código del necesario
  • No uses CSS o Javascript dentro del HTML, ya sea en las etiquetas como en el head.
  • Usa código semántico, las cabeceras mediante etiquetas h1, h2, …, resaltar mediante strong, …
  • No uses meta etiquetas redundantes
  • Usa microformatos para hacer tu sitio legible
  • Usa tablas solo para mostrar tablas
  • Usa rel=”external” para enlaces externos, no uses target=”_blank”, hazo mediante Javascript
  • No uses Javascript mediante enlaces
  • No muestres contenido importante mediante Flash o Ajax, siempre mediante HTML plano

10 Coding Guidelines for Perfect Findability and Web Standards

CSS Poster: esquema de CSS

ByLuis

CSS Poster es una aplicación que dado un fichero CSS nos devuelve un gráfico con todos los estilos y las relaciones que hay entre ellos.
cssposter.png
El gráfico muestra un árbol, empezando por el logo del servicio, del que cuelgan los distintos estilos y entre estos, sus afectados. Por ejemplo, si tenemos la clase opcion, los párrafos que cuelgan de opcion (opcion p) estarán conectados entre sí, con relación padre-hijo.
Una aplicación que nos puede ser muy interesante para tener un esquema de nuestros estilos. La única pega que encuentro es que el asterísco (*), o incluso el body no aparecen como nodos padre, quizás sea pedir demasiado.
CSS Poster
Vía / X-WEB

| | |

Los diseñadores de Microsoft también tiene problemas con IE

ByLuis

microsoft.pngCurioso y gratificante ver que no solo los nosotros sufrimos al IE, sino que los propios que trabajan en Microsoft lo sufren. En una de sus CSS se puede apreciar como una clase tiene el nombre StupidIEMarginHack y otra el nombre StupidIEWidthHack. Esto me recuerda la costumbre que solemos tener de poner trazas con insultos, palabras mal sonantes, … debido a la desesperación que sufrimos al desarrollar y que luego se nos olvida quitar.
Vía / Digg

|

CSS grid: filas con misma altura

ByLuis

Tener un grid con todas las filas al mismo tamaño puede ser algo difícil de conseguir. El problema viene con que CSS grid toma el tamaño de las filas según el tamaño máximo de sus celdas.

Para conseguir ello es necesario que el contenido de la celda tenga posicionamiento absoluto, y jugar con ::before para simular contenido vacío que rellene la celda:

.grid {
  margin: 0 auto;
  width: 60vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  grid-auto-rows: auto;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid--same-height .cell {
  position: relative;
}
.grid--same-height .cell::before {
  content: "";
  display: inline-block;
  padding-bottom: 100%;
}

.grid--same-height .content {
  height: 100%;
  position: absolute;
  margin-top: -100%;
}

Teniendo en cuenta que el HTML sería:

<div id="grid" class="grid">
  <div class="cell">
    <div class="content">
      <img src="https://picsum.photos/500/500"/>
    </div>
  </div>
  ...
</div>

Para el ejemplo uso picsum.photos, un lorem ipsum para fotos que permite indicar distintos tamaños de imágenes.

Podéis ver un ejemplo en este pen