CSS

Cristian in Gimmicklab

February 2, 2010

Bbats site published

bbats-site

New site published. You can read the blog post at Gimmicklab, read the review and visit the site.

Cristian in Development

November 13, 2009

Zen Coding

Hace unas semanas descubrí The Art of Zen Coding, y desde entonces estoy totalmente entregado a esta nueva forma de escribir HTML y CSS.

Aplicando matemáticas para definir la estructura del HTML consigues escribir 50 lineas de código en 1, es una idea ganadora que ha cambiado la forma de escribir el código base de mis proyectos.

Se trata de un snippet para Textmate, también disponbible para Aptana, que incrementa de forma sorprendente la velocidad a la que escribes lí­neas de código..

Mejor con algunos ejemplos:

ul#menu.navigation>li*5>a

Pulsando CMD+E, generará el siguiente código HTML:

<ul id="navigation" class="main">
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
</ul>

Y usando el tabulador podemos empezar a rellenar el contenido del atributo href y el texto del enlace.

Read more »

Cristian in CSS, Development

March 13, 2009

Stop pixel perfection for Internet Explorer 6

At our main site we are not IE6 friendly so if you try to access you will get an explanation page and different links to upgrade your browser. Since it’s our site we can decide whatever we like, and here we had chosen a radical approach blocking page views trying to educate our clients convincing them for an upgrade.

For our clients site we take a different approach. The site should run and performance as it’s supposed to but we stopped spending hours and hours trying to force IE6 to style the page correctly. No more pixel perfection for Internet Explorer, no spending 10% of project time fixing IE6 bugs, not anymore.

From now we are going to put a conditional comments for IE6 inviting them to upgrade. They still will get the content and maybe they won’t enjoy a perfectly aligned layout, or see a column rarely padded… anyway if they are using this browser it’s because they don’t care and if they don’t care they don’t even realize a CSS bug.

Here it is the snippet that we will use to show a upgrade notice. It’s a conditional comment that will apply to IE6 users and some CSS to style it:

<!--[if IE 6]>
	<div id="ie6">
        <p>Upgrade notice and link to suggested browsers here</p>
        </div>
<![endif]-->

Read more »

Cristian in CSS, Javascript

January 23, 2009

Sticky Footer

During the years I’ve been through so many solutions to achieve a sticky footer solution, from the one explained at Exploring Footers (A List Apart) to different variations that at Gimmicklab we have re-using and re-thinking, some based on pure CSS and some taking advantage of Javascript.

Yesterday I was taking a look at CSS Sticky Footer, a pure CSS technique that provides this functionality with full crossbrowser compatibility.

We have been using a similar method in the past with great results, but the thing that I’ve been always complaining is that it made me change our mark up structure.

Since we work with a XHTML and CSS styleguide for our every project that establish the following general mark up among other rules:

<div id="container">
	<div id="header"><div>
	<div id="main"><div>
	<div id="footer"><div>
<div>

Read more »

Cristian in CSS

July 27, 2008

CSS Dropdown Menu

Una técnica para montar un menú desplegable en CSS es la que hemos usado en http://www.barberaarquitectos.com, y que estamos a punto de publicar.

Muchas veces que la gente usa Javascript complejos para hacer simples dropdown’s que se pueden conseguir con CSS.

Puedes ver el ejemplo aquí­, y el código completo aquí­.

El HTML que utlizamos es el siguiente:

<ul>
			<li>
                                <a href="index.php">Opción</a>
				<ul>
					<li><a href="/">Sub Opción</a></li>
			                <li><a href="/">Sub Opción</a></li>
				</ul>
			</li>
<ul>

Como veis usaremos un listado ul para las opciones principales y otro hijo, ul ul, para las opciones del menu desplegable.

Read more »

Cristian in CSS

July 5, 2008

Codificando imágenes en Base64

Desde hace unos meses que querí­a echarle un ojo a un bundle para codificar imágenes en Base64 para textmate que vi que Arnau habí­a publicado que vi también comentado por Shaun Inman y cogió bastante repercusión.

Hasta hoy no he encontrado un momento para instalarlo, pero es killer. Con ctrl+cmd+b automáticamente te hace la conversión, teniendo en cuenta que la imagen está en un ruta relativa.

Esto nos servirá para reducir el número de peticiones http en el servidor, y elimina la necesidad fí­sica de alojar la imagen en el servidor.

La imagen se embebe utilizando la propiedad data:url, con lo que hay que tener en cuenta la extensión del código generado para no alcanzar el límite máximo de longitud en la url aceptado por los navegadores.

Este es el código de un ejemplo básico de una imagen embebida en css, también lo podrí­as escupir como un output <img /> en HTML.

Read more »