Cómo Crear un Componente UI Responsivo usando Element Queries

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

En éste tutorial continuaremos nuestra discusión sobre element queries, con el objetivo de crear un componente responsivo reutilizable.

Para recapitular, element queries nos permiten moldear un elemento basado en las características de su contenedor; la anchura, la altura, etc. Pero cabe destacar que element queries no se han convertido en un estándar de CSS, y probablemenete tendremos que esperar un par de años antes de que ello ocurra.

Asi que por ahora, tendremos que recurrir a una librería JavaScript para emular una funcionalidad similar, como EQCCS.

EQCSS

EQCSS es una librería JavaScript desarrollada por Tommy Hodgnins. Veamos algunas razones para optar por ésta librería.

Para empezar, EQCSS nos da una sintaxis similar a las estándares Media Queries de CSS3 con la declaración @element. Ésto funciona dentro de una hoja de estilos o incrustada en un elemento style, por lo tanto se siente muy intuitivo. En el siguiente código, por ejemplo, apilamos los menús en la navegación para ajusarnos al reducido espacio de la navegación (no al de la ventana gráfica).

.navigation .menu {
  display: inline-block;
}
@element ".navigation" and ( max-width: 480px ) {
	.navigation .menu {
		display: block;
	}
}

EQCSS ofrece más que sólo queries basados en altura o anchura. También ofrece queries basados en conteo, lo cual nos da el poder de aplicar reglas de estilo basadas en el contenido; el número de caracteres, líneas, y elementos contenidos.

.tweetContent { // textarea
	background-color: #eaeaea;
}
@element ".tweetContent" and ( min-characters: 100 ) {
	.tweetContent {
		background-color: #ffc04d; // orange
	}
}
@element ".tweetContent" and ( min-characters: 140 ) {
	.tweetContent {
		background-color: #FF3333; // red
		color: #fff;
	}
}

Soporta unidades CSS variantes incluyendo recientes adiciones como vw, vh, vmin, y vmax.

Y para los que aún requieren apoyo para IE8, EQCSS ofrece un polyfill.

EQCSS está disponible vía Bower, NPM, CDNJS, y directamente del repositorio en Github. Elige la opción que más se acomode al despliegue de tu proyecto, y asegúrate de tenerlo cargado en tu página.

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.2.1/EQCSS.min.js"></script>

¡Ahora elaboremos algo!

El HTML

Vamos a crear un componente UI de perfil de usuario, y comenzamos con el marcado HTML.

<div class="user-profile">
    <div class="user-profile__avatar">
        <img src="path/to/profile/image.jpg" alt="Louie R. Avatar Image" width="160" height="160">
    </div>
    <div class="user-profile__summary">
        <h3 class="user-profile__name">Louie R.</h3>
        <h4 class="user-profile__location">Middle Earth</h4>
        <p class="user-profile__bio">A developer and frequent StackOverflow reader. Born, raised, and live on the Web. I speak three languages: HTML, CSS, and JavaScript.</p>
        <button class="user-profile__button button button--primary">Follow</button>
    </div>
</div>

Nuestro componente consiste de una imagen de avatar, el nombre del usuario, donde viven, una corta biografía, y un boton de "Seguir" á la Twitter y Medium.

El CSS

Primero, establecemos la anchura del contenedor del componente UI y el modo de display a flex. La sintaxis de flexbox en el siguiente fragmento de código no lleva prefijos por cuestiones de sencillez, así que sólo funcionará en versiones de navegadores más recientes. Si es necesario,siempre puedes emplear Autoprefixer para generar sintaxis que se usaba anteriormente así como los prefijos requeridos para soportar las versiones anteriores de navegadores.

.user-profile {
	width: 100%;
	max-width: 640px;
	display: flex;
}

Luego, establecemos la proporción de anchura entre la imagen avatar y el sumario del perfil que contiene el nombre, ubicación y una corta biografía.

.user-profile__avatar {
	width: 25%;
	max-width: 120px;
	flex: 1 1 120px;
}
.user-profile__summary {
	width: 75%;
	padding-left: 25px;
	font-size: 1em;
}

También ajustamos ligeramente el tamaño de la fuente del nombre de usuario y la ubicación.

.user-profile__name {
	font-family:'Montserrat', sans-serif;
	font-size:1.3125em;
}
.user-profile__location {
	font-size:0.87em;
}

Éstas son las reglas de estilo primarias para demostrar como funcionan los element queries. Las reglas de estilo como background-colour, colour de texto, y box-shadow quedan a tu discreción. En mi caso, aparece como sigue.

Desplegando Element Queries

Usar element queries con EQCSS es muy intuitivo. Como se mencionó, la sintaxis se asemeja mucho a media queries de CSS. Primero, como se mencionó anteriormente, denotamos un element query con @element seguido de uno o más selectores de elemento y la condición de consulta como la anchura, la altura, la posición del scroll, etc. del elemento.

1	@element 'header, nav, footer' and ( min-width: 100px ) and ( min-height: min-height: 300px ) {
2	// Style rules
3	}

Ahora podemos desplegarlo en nuestro componente UI, por ejemplo, para redimensionar la anchura del elemento dentro del contenedor y ajustar el tamaño de fuente cuando se reduzca la anchura del contenedor.

@element '.user-profile' and ( max-width: 540px ) {
    .user-profile {
        font-size:0.75em;
    }
    .user-profile__avatar {
        max-width:80px;
    }
}

Además, queremos que el componente UI sea reutilizable, y de manera más importante presentable en cualquier parte del sitio web sin importar la anchura disponible. La barra lateral, por ejemplo, donde su anchura es comúnmente menor a 400px. En éste caso, ya que la anchura es mucho más angosta tenemos que realinear todo el maquetado del componente.

@element '.user-profile' and ( max-width: 380px ) {
	.user-profile {
		padding-top: 30px;
		padding-bottom: 30px;
		display: block;
		text-align: center;
	}
	.user-profile__avatar,
	.user-profile__summary {
		width: 100%;
	}
	.user-profile__avatar {
		margin-right: auto;
		margin-bottom: 20px;
		margin-left: auto;
	}
	.user-profile__summary {
		padding-left: 0;
	}
}

Concluyendo

En éste tutorial hemos creado un componente UI para mostrar un perfil de usuario. Es responsivo, cambiando de acuerdo a su contenedor y no a la ventana gráfica. Puedes ver la página de demostración y ver que el maquetado cambia sin importar el tamaño de la ventana gráfica. ¡Magnífico!

Éste es solo un ejemplo. Hay muchos más ejemplos que otros han publicado donde element queries tienen sentido.

Recuerda, la sintaxis en éste tutorial se basa completamente en EQCSS-si el Grupo de Trabajo de W3C lo adoptará o creará la suya propia aún no está decidido. Sin embargo, estoy ansioso de que ésta idea sea adoptada y revolucione nuevamente la forma en que creamos sitios web.