Share
Cada diseñador ama los botones. Es un hecho dado a conocer por la apreciación de proyectos como Unicorn UI (que en el momento de escribir este artículo solo admite botones y tiene casi 4,000 Stargazers en GitHub).
Pero ningún diseñador cabe en una caja. Todos tenemos nuestros propios deseos y necesidades fuera del marco de un botón. Todos queremos ver ciertos tipos de botones, y tal vez nos hemos vuelto muy buenos diseñando un cierto tipo de botón. Entonces, ¿por qué no hacemos nuestro propio kit de IU de botón desde cero??
La base simple, pero muy efectiva para nuestro marco de interfaz de usuario de botonesPrimero, necesitamos identificar a qué elementos podrán dirigirse nuestros botones. En nuestro caso, asegurémonos de que cualquier ancla, entrada o etiqueta de botón se pueda diseñar a través de nuestro kit de interfaz de usuario. Para hacer esto, vamos a crear un marcado:
Botón
Estoy usando un atributo para hacer esto simplemente porque creo que se ve mejor. Puede que no esté terriblemente preparado para el futuro (¿qué sucede si el W3C introduce una nueva especificación para los atributos de la interfaz de usuario?), Pero si está preocupado por esto, puede usar el espacio de nombres ui como algo como cory-ui en cuyo caso apostaría que estás a salvo de las nuevas presentaciones del W3C. Si está realmente, realmente preocupado por ello, o si está loco por el rendimiento, puede usar las clases y lograr el mismo efecto, pero puede tener problemas con las clases que se anulan entre sí en ciertos puntos..
Usaremos el preprocesador Stylus CSS para evitar tener que escribir un millón de llaves y así nuestro código se ve limpio y ordenado sin repetición. Incluso si no está familiarizado con Stylus, debería poder seguir adelante con otro preprocesador o CSS de vainilla..
En primer lugar, vamos a establecer algunos estilos por defecto a la [ui * = "botón"] selector. Estamos usando el selector de estrellas dentro de este contexto para que pueda agregar "botón" en cualquier parte de su atributo y funcionará.
[ui * = "button"] cursor: transición del puntero: todos los 200 ms bordean el borde: 0 fondo: se oscurecen (blanco, 5%) color: aclaran (negro, 20%) relleno: .5em 1.75em texto-decoración: ninguno &: fondo de hover: oscurecer (blanco, 10%)
Ahora la parte divertida. Comencemos agregando cualquier atributo que creamos que podríamos usar. Por ejemplo, sé que quiero tener la capacidad de tener botones de varios tamaños, así que agregaré tamaños a mis botones:
Botón
[ui * = "button"] cursor: transición del puntero: todos los 200 ms bordean el borde: 0 fondo: se oscurecen (blanco, 5%) color: aclaran (negro, 20%) relleno: .5em 1.75em texto-decoración: ninguno & fondo flotante: oscurecer (blanco, 10%) y [ui * = "pequeño"] Relleno: .25em 1em tamaño de letra: .75em y [ui * = "grande"] relleno: .75em 2em tamaño de letra: 1.25em & [ui * = "enorme"] relleno: 1em 3em tamaño de fuente: 1.25em
Note como estamos adjuntando ¿Los atributos en nuestro selector de atributos de botón? Esto significa que esos atributos no funcionarán para elementos que no tienen ui = "botón". Esta es una buena manera de mantener nuestros cambios dentro del alcance de varios atributos que podríamos agregar.
Sigamos y añadamos un poco de redondeo a nuestros botones:
Botón
& [ui * = "round"] radio de borde: 5px & [ui * = "pill"] radio de borde: 999em
El botón más pequeño tiene esquinas redondeadas, el segundo se ha convertido en una "píldora"A estas alturas ya debería estar más familiarizado con este concepto. Añadamos algunos colores en forma de variables:
Botón
color-primario = azul color-peligro = rojo [ui * = "botón"] cursor: puntero transición: todos 200ms borde de facilidad: 0 fondo: oscurecer (blanco, 5%) color: aclarar (negro, 20%) relleno:. 5em 1.75em texto-decoración: ninguno &: hover fondo: oscurecer (blanco, 10%) y [ui * = "pequeño"] relleno: .25em 1em tamaño de letra: .75em y [ui * = "grande"] relleno : .75em 2em tamaño de fuente: 1.25em y [ui * = "enorme"] relleno: 1em 3em tamaño de fuente: 1.25em y [ui * = "redondo"] radio de borde: 5px y [ui * = "pastilla "] radio de borde: 999em y [ui * =" primario "] fondo: color color primario: blanco y [ui * =" peligro "] fondo: color color peligro: blanco
¡Eso es lo esencial! Agrega tantas reglas y propiedades como quieras. Incluso puedes agregar temas complejos a tus botones, interesantes estados y animaciones. Comparte tu botón UI framework con nosotros en los comentarios.!
Accentsconagua