Página principal » UI / UX » Crear información sobre herramientas minimizados en CSS puro con Wenk

    Crear información sobre herramientas minimizados en CSS puro con Wenk

    Con un nombre tan extraño, no esperarías mucho de Wenk, un libre Biblioteca de sugerencias de CSS. Sin embargo es una de las bibliotecas más pequeñas Puedes obtener una medición de menos de 1KB cuando gzipped.

    Wenk utiliza CSS puro con datos-* atributos crear información sobre herramientas en vivo Que puedes reestilizar y posicionar a tu gusto. Lo mejor de todo es que es una biblioteca completamente gratuita con código fuente disponible en GitHub.

    Estas herramientas ligeras son súper simples de agregar a su sitio web. Solo necesitas el Wenk.css expediente añadido a su encabezado de página, que puedes descargar desde el repositorio de GitHub.

    O incluso podrías agrega el archivo CDN que está alojado en CDN de GitHub. Aquí está el código para eso:

      

    O, si eres un fanático de npm / bower, puedes instalar este paquete. desde la terminal.

    Las etiquetas de información sobre herramientas predeterminadas no tienen muchos datos personalizados. Te dejan selecciona la posición y el ancho, pero tienes que cambiar manualmente el CSS Si quieres que tengan un estilo diferente.

    Por ejemplo, es posible que desee agregar una flecha CSS a la información sobre herramientas que aparece sobre el elemento de información sobre herramientas. Esto es bastante simple de crear, pero tendrá que recorrer la hoja de estilo Wenk para encontrar la clase exacta de CSS extender.

    Aquí hay una muestra de algunos código predeterminado Para obtener información sobre herramientas de Wenk:

       Wenk a la derecha!  

    La página de inicio principal de Wenk incluye demostraciones en vivo que puedes probar moviéndote. Estos son la información sobre herramientas más básica obtendrás pero son perfectos para una biblioteca que pesa menos de un kilobyte.

    Una cosa importante a considerar es soporte del navegador. Todas las versiones de Chrome y Firefox. debería funcionar bien. Lo mismo con Opera 12+ y Opera Mini v8 +. Pero IE8 y IE10 parecen tener problemas la prestación de estas informaciones sobre herramientas. Afortunadamente, su participación en el mercado está disminuyendo rápidamente, pero es algo a tener en cuenta antes de usar.

    Todavía me sorprende lo mucho que puedes hacer con tan pocos KB. La biblioteca Wenk es un testimonio del desarrollo moderno de la interfaz y muestra que un poco puede hacer mucho..

    Puedes cavar a través de la toda la fuente en GitHub, junto con demostraciones en vivo y fragmentos de código para configurar y crear estas informaciones sobre herramientas para su propio sitio.