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

| |

HTML5 Boilerplate

ByLuis

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site. After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, perfo …

Post original

Clear de float en CSS

ByLuis

Aunque existe una forma común de hacer un clear de los float de los elementos anteriores:

<div class="clear"></div>

existe una forma más adecuada aunque realmente no es nueva, ya que ya se habló de ella en el 2004.

Para ello usaremos la propiedad :after que genera contenido antes del contenido del elemento. Tendremos una capa contenedora la cual modificaremos mediante CSS para que genere contenido invisible y con clear.

#container:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#container
{display: inline-block;}
/* Oculta para IE-mac \*/
* html #container
{height: 1%;}
#container
{display: block;}

Clear Your Floats – The Right Way

CSS Sprits: generador de sprites para CSS

ByLuis

Un sprit en CSS es usar una imagen que contenga a varias imágenes para usar parte de ellas como si fueran independientes y así no tener que estar cargando distintas imágenes. Técnica que se usaba en el ejemplo de personalización de checkboxes y radio buttons que ya contamos hace bastante tiempo.
fuglychecks.pngCrear este tipo de imágenes puede ser algo complicado para algunas personas que no están acostumbradas al uso de programas de dibujo, ya que en algunas circunstancias puede haber imágenes de distintos tamaños.
Para cuando queramos crear el sprit, y no sepamos cómo, o tengamos prisa, podemos usar la aplicación que ofrece CSS Sprites Generator, la cual nos solicita las imágenes y nos devuelve la imagen ya tratada, más sencillo imposible.
CSS Sprites Generator
Vía / PHPDeveloper.org

Precarga de imágenes mediante CSS

ByLuis

Acabo de ver un método bastante curioso para precargar imágenes en la página mediante CSS. Se trata de crearnos un estilo para una capa que tenga varias líneas de background y que no se muestre, así se cargan todas las imágenes durante la carga de la página y luego las podemos usar para otras cosas como rollovers.

 #preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}

Luego tendremos que definirnos una capa de la siguiente manera:

<div id="preloadedImages"></div>

A Simple CSS Image preloading technique

|

Añadir números de línea en highlight.js

ByLuis

Aprovechando la versión 1.2.0 de Snippet Block, comparto cómo añadir números de línea al código formateado por highlight.js.

El desarrollador del plugin pasa de añadir esta característica a la librería, lo cual me parece muy bien, que cada uno haga lo que quiera con su código. Pero como tampoco hay eventos o algo que permita añadir características, es necesario “hackear” la función antes de su uso.

document.addEventListener( 'DOMContentLoaded', () => {
	const prevHighligth = window.hljs.highlightBlock;
	window.hljs.highlightBlock = block => {
		const newline = '<span class="sw_new_line"></span>';
		// Replace all without regex
		block.innerHTML = block.innerHTML
			.split( newline )
			.join( '' );
		prevHighligth( block );
		if ( block.classList.contains( 'sw_show_line_numbers' ) ) {
			block.innerHTML = newline +
				block
					.innerHTML
					.replace( /\n/g, `\n${ newline }` );
		}
	};
} );

¿Qué es lo que hace este código? Primero guarda el método original highlightBlock para usarlo posteriormente. Y luego se modifica el método para apadir una clase para mostrar los números de línea al principio del código y después de cada salto de línea.

Ahora toca explicar la parte CSS, para ello usaremos CSS counters.

pre code {
	counter-reset: linenumber;
}

pre code .sw_new_line::before {
	content: counter(linenumber, decimal-leading-zero);
	counter-increment: linenumber;
	padding-right: 15px;
	font-size: 0.8em;
	opacity: 0.6;
}