Share
Hoy haremos un tablero hermoso y minimalista utilizando Pure (vea el proyecto en GitHub), la nueva biblioteca de módulos mini-CSS de Yahoo !. Estaremos hablando y usando algunos de los principios de SMACSS (Arquitectura escalable y modular para CSS). También usaremos íconos de WeLoveIconFonts.com.
Nota: Antes de seguir adelante, hay un mínimo énfasis en los gráficos para el panel de control que vamos a crear. Los gráficos se ejecutan mejor con algo más de JavaScript pesado, y para mantener el enfoque en CSS y JavaScript mínimo, este tutorial generalmente evitará las técnicas de dibujo de gráficos..
Pure fue construido por el equipo en Yahoo! y YUI para ser un conjunto muy ligero de módulos (menos de 6k). Piense en esto como una Normalización extendida que también incluye estilos para cosas muy comunes como cuadrículas, formularios, botones, tablas y menús.
El equipo YUI construyó Pure para ser un punto de partida, No es una solución completa. Desde este punto de partida, esperan que los desarrolladores amplíen y construyan su CSS personalizado como una extensión de esta base.
Por esta razón, gran parte de lo que enseñamos en este tutorial son técnicas para ampliar una biblioteca básica básica como Pure para adaptarse a la interacción de la aplicación, como cuando se usa un panel.
SMACSS, abreviatura de Arquitectura modular y escalable para CSS, y el hijo de Jonathan Snook, es un conjunto de prácticas diseñadas para crear CSS que se entiende fácilmente, es fácil de extender y evita la guerra de especificidad de CSS..
Esto es más asistido por no usar ID para el diseño y limitar el anidamiento de los selectores tanto como sea posible. La idea básica es que CSS se puede categorizar como Base, diseño, módulos, estados y temas.. La estructuración de CSS en torno a estas categorías y siguiendo las convenciones de nomenclatura que aluden a estas categorías hace que SMACSS sea legible e inmediatamente significativo. Esto evita los nombres de clase que tienen estilos arbitrarios asociados con ellos. La idea básica de la categorización sigue esta convención de nomenclatura..
Estos tipos de clases describen su funcionalidad y categoría. Las reglas de SMACSS son más "pautas" y formas de pensar; Mire a través de la fuente de Pure CSS para ver ejemplos de SMACSS en acción.
Primero, creemos un directorio de proyecto simple usando HTML5 Boilerplate, y coloquemos Pure en lugar de Normalize.css. Para este tutorial, usaremos el enlace YUI CDN de Pure., . También colocaremos Font Awesome, la colección de fuentes de iconos de Twitter, y agregaremos una línea a nuestro CSS (instrucciones tomadas de weloveiconfonts). A lo largo del marcado, verá iconos definidos con clases como "fontawesome-calendar".
/ * en main.css * / [class * = "fontawesome -"]: antes de font-family: 'FontAwesome', sans-serif;
¡Estamos listos para comenzar a usar estas herramientas en el diseño! Empecemos definiendo algunos CSS esqueléticos para mantener nuestros elementos. Pongamos esto en nuestro 'cuerpo'.
Decidimos usar una paleta de colores que encontramos en los coloreados llamados Yellow Tree Frog por el usuario LJK.
Por ahora, vamos a hacer referencia a ellos en un comentario en la parte superior del archivo CSS.
/ * rojo: # E73F3F naranja: # F76C27 amarillo: # E7E737 azul: # 6D9DD1 púrpura: # 7E45D3 * /
Propina: Puede beneficiarse de comenzar usando las palabras clave de color CSS y buscar / reemplazar los códigos hexadecimales más adelante para que no tenga que copiar y pegar el código hexadecimal constantemente.
PureCSS nos brinda un módulo de menú desplegable que podemos usar para definir un menú para nuestro panel de control. Comenzamos utilizando los nombres de módulos basados en clases de Pure, siguiendo las pautas de SMACSS.
Tenga en cuenta que este menú no va a ser funcional para este tutorial. Viendo la página, podemos ver que nuestro menú ha sido creado con un estilo horizontal predeterminado. Sigamos adelante y cambiemos el fondo del menú a un negro semitransparente..
.pure-menu font-weight: más ligero; .pure-menu.pure-menu-fixed posición: corregida; .pure-menu.pure-menu-blackbg background: # 222; .pure-menu.pure-menu-blackbg .pure-menu-heading: hover color: #efefef; .pure-menu.pure-menu-blackbg a color: #fff; .pure-menu.pure-menu-blackbg a: hover background: # 666; .pure-menu.pure-menu-blackbg .pure-menu-selected a background: # 7E45D3; .pure-menu.pure-menu-blackbg .pure-menu-selected a: hover color: #efefef;
Aquí, vemos una adopción de las convenciones utilizadas por SMACSS y Pure. Definimos dos nuevas clases, 'pure-menu-blackbg' y 'pure-menu-fixed', y luego los subestilos necesarios para soportar esa clase. También vemos un poco de anulación de las clases subyacentes (como la clase de 'menú puro' existente para cambiar a un peso de fuente más ligero).
A continuación, vamos a crear un módulo de panel de control. Usaremos algunos estilos básicos para nuestra pieza de "bloque" de tablero de nivel de base.
.tablero de instrumentos-pieza min-height: 300px; -webkit-box-dimensionamiento: cuadro de borde; -mano-caja de tamaño: cuadro de borde; tamaño de caja: caja de borde; color: #fff; text-align: center; posición: relativa; parte inferior de relleno: 40px;
Ahora que hemos definido este módulo base, lo ampliaremos creando nuevas clases con el prefijo 'dashboard-piece'. Primero, crearemos clases de color de fondo..
.dashboard-piece-redbg background-color: # E73F3F; .dashboard-piece-orangebg background-color: # F76C27; .dashboard-piece-yellowbg background-color: # E7E737; .dashboard-piece-bluebg background-color: # 6D9DD1; .dashboard-piece-purplebg background-color: # 7E45D3; .dashboard-piece-graybg background-color: # 798388;
A continuación, definiremos el marcado para las diferentes piezas del tablero. Incluimos un SVG en línea del logotipo de Envato, que estirará todo el ancho de la cuadrícula.
+20 seguidores6.8%
142 compromisos
57% de capacidad
63/90
Tareas completadas
Hay mucho que cubrir en este marcado. Primero, estamos usando 'pure-u-1-3' (y otras clases pure-u- *) dentro de un elemento de fila de la rejilla, 'pure-g-r'. Estas clases son parte del sistema de red pura. Para comprender esto completamente, consulte la documentación completa de la cuadrícula YUI; el concepto básico es que la clase de cuadrícula pure-u-1-3 es 1/3 del ancho de la cuadrícula completa; una clase de pure-u-3-4 sería 3/4 del ancho de la cuadrícula. El módulo con el logotipo tiene la clase pure-u-1, que le permite abarcar todo el ancho de la cuadrícula.
Los otros elementos de las piezas del panel de control se utilizan para mostrar diferentes tipos de métricas. Las siguientes reglas de CSS se utilizan para presentar estas métricas y otras partes internas de las piezas del panel de control.
.tablero-pieza-logo h1 altura de línea: 100 px; .dashboard-piece-logo svg margin-top: 80px; .dashboard-piece h1 line-height: 300px; tamaño de letra: 3.6em; margen: 0; .dashboard-content posición: relativo; índice z: 999; .dashboard-content p font-weight: más ligero; .dashboard-content .light opacidad: 0.4; bloqueo de pantalla; .dashboard-content h2 i font-size: 4em; opacidad: 0,4; .dashboard-metric text-transform: mayúsculas; tamaño de fuente: 1.6em; línea de altura: 1; .dashboard-metric i margin-right: 0.6em;
También definimos las clases de barra horizontal y vertical por separado de los módulos de contenido del panel de control.
.barra-horizontal altura: 36px; color de fondo: rgba (255,255,255,0.4); posición: relativa; bloqueo de pantalla; margen superior: 20px; .bar-barra-horizontal fondo: #fff; altura: 36px; línea de altura: 36px; color: # 444; transformación de texto: mayúsculas; font-weight: negrita; tamaño de letra: 0.8em; espacio entre letras: 0.2em; posición: absoluta; arriba: 0; izquierda: 0; .bar-vertical posición: absoluta; abajo: 0px; izquierda: 0px; ancho: 100%; fondo: rgba (200,200,200,0.5);
Finalmente, usamos más módulos incorporados de Pure para crear una tabla con estilo para un módulo de "eventos", y reutilizamos la clase de barra horizontal para el módulo de clima. También extendemos estas clases con CSS personalizado. Aquí está el marcado para los dos últimos módulos..
Próximos Eventos
Con: Dónde: Cuando: John Smith Oficina de WDTuts 20 de junio, 9:30 a.m. George Bluth Valle repentino 23 de junio, 4 de la tarde Michael Scott Scranton, PA 24 de junio, 2:45 p.m.
80% de probabilidad
de Precipitacion80%
Y las clases extendidas de mesa pura..
.pure-table-center margen: 0 auto; .pure-table-dark color: #ddd; .pure-table-dark .pure-table-odd color: # 444;
Por último, queremos rellenar ligeramente la parte superior del módulo meteorológico para que se ajuste más a la línea del módulo de eventos. Lo hacemos simplemente utilizando la clase de "clima" adicional y ajustando el relleno superior. Junto con estas últimas piezas, agregaremos un estilo de pie de página simple para que coincida con el menú de navegación superior.
.weather padding-top: 60px; pie de página fondo: rgb (20,20,20); color: #aaa; relleno: 10px; tamaño de letra: 0.6em; font-weight: negrita;
Pure viene con elementos de rejilla sensibles integrados. Se definen con el siguiente selector..
.pure-g-r> [class ^ = "pure-u"]
Este es un selector de aspecto complicado (eche un vistazo a los 30 selectores de CSS que debe memorizar para obtener explicaciones en profundidad) que primero indican niños directos de elementos ".pure-g-r". Esos niños deben tener un atributo de clase que empieza con el prefijo "puro-u". Uf.
Apunta, por ejemplo, a esta div:
Este selector se usa dentro de las consultas de @media para colapsar la cuadrícula. Sin embargo, estos elementos de unidad colapsan a 100% por debajo de 767px. Queremos cambiar esto para permitir que los elementos se colapsen hasta el 50% entre 480 y 767. Lo hacemos con las siguientes consultas de @media.
Pantalla solo @media y (ancho máximo: 767 px) .pure-g-r> [clase ^ = "puro-u"] ancho: 50%; float: izquierda; pantalla solo @media y (ancho máximo: 480 px) .pure-g-r> [clase ^ = "pure-u"] ancho: 100%;
Un toque de JavaScript
En 'main.js', escribiremos algunos JavaScript para asegurarnos de que todos los módulos en una sola fila tengan la misma altura.
(function () var to; function pieceHeights () to = setTimeout (function () $ (". pure-gr"). each (function (i, el) var contentPieces = $ (el) .find ( ".dashboard-piece"); var max = 0; contentPieces.css ("min-height", ""); $ .grep (contentPieces, function (el, i) max = Math.max ($ (el) .outerHeight (), max);); contentPieces.css ("min-height", max););, 400); $ (window) .on ("resize", function () clearTimeout ( to); pieceHeights ();). trigger ("resize"); ());Este JavaScript define una función que recorre cada uno de los elementos con una clase de "pieza de tablero" en cada fila y, posteriormente, encuentra el módulo más alto en esa fila. Luego establece todos los elementos en esa fila a la altura del elemento más alto en la fila.
Conclusión
Este tutorial solo muestra algunos de los módulos definidos en Pure. Con patrones como los que se usan en este tutorial, puede crear CSS escalable y fácil de mantener, legible y escalable. El uso de una pequeña biblioteca como Pure le permite aprovechar una solución potente, probada y bien documentada para problemas comunes.
¿Qué más harías con Pure? Háganos saber en los comentarios.!
Accentsconagua