aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Hace ya 4 años que se vienen hablando de la inclusión de variables en nuestros CSS, pero el tema parece que está bastante parado. Al parecer la W3C en abril publicó un borrador en el que introducia una propuesta de como deberían funcionar las estas variables en nuestros CSS’s.

// Definición
:root {
  var-my-color: #fad;
}

// Uso
.thing {
  color: var(my-color);
}

Desde WebKit hace ya tiempo que podemos usarlas usando el prefijo (-webkit-).

// Definición
:root {
  -webkit-var-my-color: #fad;
}

// Uso
.thing {
  color: -webkit-var(my-color);
}

Este mes de Junio, la W3C se marca un nuevo borrador en el que prescinde de la función var() cambiándola por $ para llamar a nuestra variable.

// Definición
:root {
  var-my-color: #fad;
}

// Uso
.thing {
  color: $my-color;
}

Vamos, que la capacidad de que nuestros CSS’s dispongan de variables está más o menos igual que siempre y no parece que se vaya a solventar en un futuro cercano, por el momento deberemos seguir usando herramientas como LESS.js o SASS para disponer de esta capacidad y alguna más.

Via

Utilizando las nuevas tecnologías, CSS3 y Javascript (YUI), nos muestran un tutorial muy didáctico sobre como implementar un cubo de Rubic, con el que puedes jugar, con HTML5.

(Ver Imagen)

El resultado es muy interesante, y puedes verlo funcionar correctamente en Google Chrome, y si quieres verle las tripas, tienes el código en GitHub para destriparlo.

Me encantan estos ejemplos que nos muestran la cantidad de cosas que se pueden hacer con imaginación y los nuevos estándares.

Via

Ayer vimos Harvey, un plugin jQuery que nos permitía controlar cuando se ejecutaban en nuestros CSS’s los cambios sobre las Media Queries dependiendo de los cambios sobre el navegador que accede a nuestras páginas web.

Ahora os traigo onMediaQuery, una implementación en javascript para que no dependas de jQuery para poder disfrutar de esta funcionalidad.

En solo 1kb de Javascript dispones de la capacidad de ejecutar eventos al accionarse una query previamente definida en nuestros CSS’s.
Veamos un ejemplo de su uso:

CSS

<style>
	body:after {
		content: 'mobile';
		display: none;
	}
	@media screen and (min-width: 35em) {
		body:after {
			content: 'skinny'
		}
	}

	@media screen and (min-width: 56em) {
		body:after {
			content: 'wide-screen'
		}
	}

</style>

En nuestro CSS deberemos indicar que cada una de las queries va a tener un nombre único que usaremos desde nuestro javascript para controlarlos por separado.

JS

<script type="text/javascript" src="js/onmediaquery.min.js"></script>
<script>
var queries = [
    {
        context: 'mobile',
        callback: function() {
            console.log('Mobile callback.');
            // Lógica que se ejecutará cuando se detecte un móvil
        }
    },
    {
        context: 'skinny',
        callback: function() {
            console.log('skinny callback! ');
            //Lógica específica para tablets
        }
    },
    {
        context: 'wide-screen',
        callback: function() {
            console.log('wide-screen callback .');
            // Pantallas panorámicas
        }
    }
];
// Go!
MQ.init(queries);


// Añadimos una query
var my_query = MQ.addQuery({
    context: 'skinny', 
    callback: function() { 
        console.log( 'second skinny callback!' )
    }
});

// Borrar queries
MQ.removeQuery( my_query );
</script>

Y ya en Javascript, informamos la funcionalidad correspondiente para cada una de las media queries que disponemos.

Condicionar el CSS de tu aplicación dependiendo del dispositivo o del tamaño de la pantalla del mismo, es mucho más fácil desde que existen las CSS’s media queries. Estas condiciones del CSS nos permiten especificar condiciones necesarias para ejecutar cierto CSS directamente en nuestro código.

Harvey nos intenta hacer más fácil aún la tarea de gestionar estas condiciones y permitirnos trabajar con ellas permitiéndonos añadir funcionalidades cuando estas cambian en función de las redimensiones o cambios de posición de nuestros dispositivos.

Harvey.attach('screen and (min-width:600px) and (max-width:900px)', {
  setup: setup_function, // se llama cuando inicialmente se cumple la condición.
  on: on_function, // Se llama cuando la condición se activa.
  off: off_function // Se ejecuta cuando se desactiva.
}); 

Añadime una capa más de control para condicionar al milímetro el estilo de nuestras páginas.
[Descargar]

Hace unos días vimos SASS, una herramienta pensada para agilizar la maquetación CSS de nuestros proyectos. Vimos que ofrecía una serie de herramientas que nos permitía trabajar con una versión enriquecida de CSS con variables, funciones, anidamiento de selectores,…

LESS

Pues LESS, nos ofrece más de lo mismo, usando una sintaxis similar a que vimos con SASS, y nos ofrece las mismas maravillas que ya hemos visto.

Variables

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Mixins

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Anidamiento de selectores

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Funciones y operaciones

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

Como podemos ver, nuestros CSS’s cogen una aspecto de lenguaje de programación que permite dinamizarlas fácilmente.

Compilación en el cliente

A diferencia de SASS, LESS permite compilar las hojas de estilos dinámicas (.less) directamente en el navegador mediante una librería JS que cargaremos en nuestras páginas (para Chrome, Safari y Firefox).

<head>
	<link rel="stylesheet/less" type="text/css" href="styles.less">
	<script src="less.js" type="text/javascript"></script>
</head>

Es importante poner las hojas de estilos antes de añadir la librería javascript e indicar que mediante el atributo rel que el tipo de stylesheet del que se trata es uno de los que se han de compilar.

Además, nos añade la capacidad de refrescar los estilos mediante el Watch Mode, que podremos activarlo mediante un parámetro en la URL a la que accedemos (#!watch) o desde la consola de Firebug ejecutando less.watch().

Pie Menu, es un plugin jQuery que se aprovecha de las animaciones CSS3 para generar curioso menu circular desplegable.

(Ver Imagen)

Además usarlo es muy sencillo, ya que solo tendremos que definir un listado de opciones e indicar que el elemento contenedor debe comportarse como un Pie Menu.

  <div id='outer_container' class="outer_container" >
        <a class="menu_button" href="#" title="Toggle"><span>Menu Toggle</span></a>
        <ul class="menu_option">
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
        </ul>
    </div>

Una vez definidas las opciones del menu, activamos el menú:

$('#outer_container').PieMenu({
	'starting_angel':0(Starting Angle in degree),
	'angel_difference' : 90(Displacement angle in degree),
	'radius':100 (circle radius in px),
}); 

Siempre que veo menus de estos, me recuerdan a aquellos del juego Secret of Mana de la Super NES😀