# 103: Área de fragmentos de Photoshopping - Trucos CSS

Anonim

¡Es hora de sumergirse en el área de Snippets! Es decir, el área de contenido real del mismo. Ya tenemos el encabezado en su lugar. El área de fragmentos es bastante popular. Sin profundizar en el análisis, sé por mirar las redes sociales y escuchar a personas en la vida real que encuentran muchas cosas útiles en esta área.

En la v9, una crítica muy común y legítima era que era difícil navegar. Era un acordeón muy coloreado y cada fragmento era un "enlace de burbuja" (a falta de un descriptor mejor) que coincidía con el color principal de esa subsección del fragmento. Peor aún, estaban alineados y justificados, lo que pensé que sería una buena manera de darles algo de espacio y saltar un poco el ojo, pero terminaron luciendo raros y descuidados.

Redimámonos aquí y hagamos que navegar por el área de Snippets sea más agradable. Aunque, nuevamente, la mayor parte de este contenido se encuentra a través de la búsqueda. Aún así, también podría hacer que sea agradable navegar.

De inmediato decidimos no poner un campo de búsqueda en el área de contenido. Lo hubo en el pasado, pero esto es un rediseño y estamos tomando la decisión de consolidar la búsqueda en un área. Una vez que aprenda a utilizar la búsqueda una vez, sabrá cómo funciona para siempre.

Para el diseño, optamos por una cosa de dos columnas. A la izquierda, las principales categorías de fragmentos, cada una con un color único. ¡Hora del arco iris! Buscamos inspiración en nuestra propia galería.

La columna de la derecha será simplemente una lista de los fragmentos de esa categoría. Sencillo, fácil de navegar. Al igual que los enlaces de pie de página. La gente sabe cómo escanear y utilizar listas de enlaces. Es el patrón de diseño más perfectamente simple que existe.

Sin embargo, nos equivocamos con algunas decisiones de diseño. ¿Deben los enlaces coincidir con el color de la sección o simplemente ser grises? ¿Deberíamos marcar los enlaces con una "raya de cebra" con una versión descolorida del color principal? ¿Deberíamos incluir una fecha de publicación o una fecha actualizada o ninguna de las dos? Cosas divertidas e importantes en las que pensar, pero siempre podemos tomar este tipo de decisiones una vez que llegamos al navegador y estamos trabajando con datos reales.