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

6 formas de hacer un diseño destacable

ByLuis

A la hora de hacer diseños mucha gente puede opinar sobre ello mejor que yo, pero a mí estos consejos me han gustado. Está claro que en muchos diseños no se pueden usar, pero para algunas circunstancias sí son interesantes de aplicar.

  • Fondos de pantalla grandes: los fondos de pantalla grande pueden hacer que el diseño resalte, a parte de que son fáciles de añadir.consejos1.png
  • Layout original: no es la primera vez que veo diseños con secciones de tamaños que superan el ancho y alto del navegador y que para acceder a cada sección hay que hacer un scroll progresivo (mediante javascript). Son originales y en algunos casos muy acertados. En el ejemplo que os pongo, cada color es una sección y el tamaño original tiene un ancho de 6000px.consejos2.png
  • Navigación creativa: la navegación puede dar mucho juego para mejorar el diseño, ya sea mediante rollovers u otras cosas. Eso sí, ante todo que prime la usabilidad. En el ejemplo que os paso los menús van a juego con los colores de la calle.consejos3.png
  • Minimalismo: aunque por ahora se ha tratado de consejos con un gran diseño, eso no implica que un gran diseño tenga que ser aparatoso, puede ser perfectamente minimalista, lo cual hace que llame mucho la atención.consejos4.png
  • Logo: está claro que un buen logo hace que te represente y además te diferencie.
  • Layout horizontal: aunque la gente está acostumbrada al scroll vertical, este tipo de diseño puede llegar a ser muy atractivo, aunque haya gente que lo odie.consejos6.png

6 Methods to Make Your Website Standout

| |

Frame: Modular CSS Framework

ByLuis

Frame is a modular CSS framework that supports: Layout, Typography, Forms, Code, Table, Reset, and Print styling. It is HTML5 compatible, and provides default styles and support for HTML5 elements. Frame is accompanied by an online tool that allows you to easily generate your own build (in case you don’t need to use all the features). …

Post original

Firefinder: plugin para Firebug que localiza elementos

ByLuis

Firefinder es un plugin para Firefox que se integra con Firebug y que nos permite localizar de forma rápida y sencilla elementos HTML en la página.
Permite usar selectores CSS y XPath, por lo que no es necesario conocer una nomenclatura nueva, y además nos ayuda cuando trabajemos con los selectores jQuery o cuando estemos parseando HTML.
Firefinder
Vía / Robert’s talk

|

Laboratorio: crea tu propio CSS Evolution

ByLuis

El otro día hablábamos sobre CSS Evolution, una forma de ver paso a paso el efecto de las CSS sobre nuestra página. Algo que supongo que a la mayoría nos ha gustado y que puede que queramos verlo en nuestra propia web.

cssevolution.png

Os paso el javascript necesario para hacerlo, el cual es posible que no sea del todo eficiente, pero bueno, la falta de tiempo no me ha permitido hacer más, entre otras cosas solo funciona para Firefox.

Lo primero es tener los estilos en un link:

<link rel="stylesheet" type="text/css" media="screen" href="sw-large.css" />

Una vez cargada la página, mostrándose con estilos, se desactivará la etiqueta link y luego se recuperará el texto de todos lo estilos, para volver a activar la etiqueta e ir añadiendo los estilos uno a uno cada cierto tiempo.

// Donde almaceno los estilos para luego ir incluyéndolos uno a uno
var antiguas;
function ini() {
// Se podría hacer para que cogiera todos los links
var link = document.getElementsByTagName("link")[0];
link.disabled = true;
// Avisa para que no te pille despistado
alert("COMENZAR");
// Recupera los textos de todos los estilos
var reglas = document.styleSheets[0].cssRules;
antiguas = new Array();
for (var i=0; i<reglas.length; i++) {
antiguas[i] = reglas[i].cssText;
}
// Quita todos los estilos
for (var i=0; i<reglas.length; i++) {
document.styleSheets[0].deleteRule(0);
}
// Inserta todos los estilos uno a uno
setTimeout("insertaCSS(0)", 500);
link.disabled = false;
}
// Añade los estilos
function insertaCSS(i) {
document.styleSheets[0].insertRule(antiguas[i], i);
if (i+1<antiguas.length) {
setTimeout("insertaCSS("+(i+1)+")", 500);
} else {
alert("FIN");
}
}
window.onload = function() {
ini();
};

Es posible que estéis algún rato sin ver cambios, depende de si vuestros estilos son generales o algo concretos, por lo que no afectarán a ciertas partes de la página.

Por cierto, he encontrado un fallo a la hora de recuperar el texto de los estilos, que cuando el texto es algo así:

p {
color: blue;
}

Debido a la línea vacía, devuelve un estilo undefined. Bueno, tampoco lo he mirado con detenimiento, pero creo que si se da ese error.

Ejemplo

Formatear el código como en Sentido Web

ByLuis

Para aquellos que les guste como formateamos los comentarios en Sentido Web, vamos a explicar el código creado por Choan:

El proceso que sigue es el siguiente:

  • Obtener todos los elementos pre.
  • Para cada pre leer el primer elemento code que tenga.
  • Obtenemos el texto que contiene.
  • Dividimos el texto en líneas.
  • Por cada línea comprobamos si hay algun tipo de comentario, si hay comentario lo separamos en dos partes para luego darle distintos estilos, diferenciando así el formato del comentario.
  • Nos creamos un elemento ol, y en cada li insertamos una línea obtenida anteriormente.
  • Sustituimos el elemento pre por el ol.

Read More “Formatear el código como en Sentido Web”

CSS dinámicos

ByLuis

Un interesante artículo que nos explica cómo realizar hojas de estilo dinámicas, aunque la verdad yo no le veo mucho uso, incluso el ejemplo que pone no me vale demasiado. Supongo que se podría evitar el uso dinámico de CSS diseñando mejor las CSS, pero claro, tambien puede que me equivoque. De todas formas, el artículo me ha gustado bastante, porque a parte de explicarte cómo hacerlo, te muestra que lo que siempre pensamos como estático (CSS, Javascript) puede ser un script PHP y no necesariamente un texto plano. A parte te dice con qué problemas nos podemos encontrar, en este caso el tiempo de ejecución del script frente al tiempo de carga de un fichero plano, algo que creo que a veces se suele olvidar.

Usar una hoja de estilos dinámica puede ser útil en el caso de que nuestra aplicación deba mostrar distintos estilos dependiendo de la página desde la que se le pida. Como ejemplo pone una aplicación que use módulos (ventanas tipo gadgets) y que dependiendo del módulo tenga que mostrar un estilo u otro.

Lo único diferente a la hora de crear el script PHP que nos devuelve el script es que se debe devolver el tipo de contenido del archivo (Content-Type), ya que el resto no se debería diferenciar de mostrar un HTML:

header('Content-Type: text/css');
if (condicion) {
echo '#estilo { display: inline; }';
} else {
echo '#estilo { display: inline; }';
}

El problema con el que nos encontramos es que cada vez que se visita la CSS se tiene que ejecutar y no se guarda en caché. Para que cachee el script, durante un tiempo prudencial, debemos indicarlo en la cabecera:

header('Cache-control: must-revalidate');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');

Ahora el único problema que nos queda es no tener que procesar siempre los mismos estilos, para ello nada mejor que usar @import, así seleccionamos unos estilos u otros, pero no los generamos:

header('Content-Type: text/css');
header('Cache-control: must-revalidate');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');
if (condicion) {
echo '@import "estilo1.css";';
} else {
echo '@import "estilo2.css";';
}

Static and dynamic CSS combined