Crear widgets con pestañas receptivas con GridTab
Siempre es más fácil crear sitios web utilizando herramientas de código abierto en lugar de reinventar la rueda. Estas herramientas van desde bibliotecas hasta complementos más pequeños, pero puede encontrar una solución para prácticamente cualquier cosa.
El fenomenal plugin jQuery GridTab es un buen ejemplo. Le permite configurar una grilla personalizada, definir los puntos de interrupción y crear un widget con pestañas receptivo que se adapte a cualquier sitio web.
Puede agregar sus propias clases de CSS o trabajar con las existentes para crear una función de pestaña que se adapte a su diseño. Este complemento también admite elementos de navegación para controles next / prev y alternar entre pestañas .
La instalación es muy sencilla y solo requiere la biblioteca jQuery como una dependencia . Una vez que esté instalado, puede tomar GridTab de npm o descargarlo directamente desde GitHub.
Tenga en cuenta que este plugin de widgets con pestañas tiene un estilo predeterminado, por lo que tiene una hoja de estilos CSS separada sobre el archivo del complemento JS. Sin embargo, siempre puede fusionar este CSS con el suyo para reducir las solicitudes HTTP.
Para inicializar el complemento, simplemente pase el tamaño total de la red junto con cualquier parámetro opcional (todos enumerados en GitHub).
Aquí hay una secuencia de comandos de inicialización simple:
$ (document) .ready (function () {$ ('# gridtab-1'). gridtab ({grid: 3});});
Las configuraciones incluyen selectores personalizados, estilos de respuesta, configuraciones de borde / relleno / color y, por supuesto, una función de devolución de llamada .
Es posible que tenga curiosidad por ver cómo funciona todo esto y cómo se ve en su navegador. Consulte la sección "Demos" para ver algunos ejemplos, incluido el código fuente sin procesar que puede copiar.
![](http://hideout-lastation.com/img/tech-design-tips/190/build-responsive-tabbed-widgets-with-gridtab.jpg)
Todo lo que necesita saber, incluida la documentación completa, se puede encontrar en la página principal de GridTab. Esto también incluye un enlace al repositorio de GitHub para que pueda navegar a través de la fuente y comenzar a personalizar sus propias cuadrículas con pestañas receptivas.
![Google comienza a implementar Ok Google support para Android Auto](http://hideout-lastation.com/img/tech-design-tips/830/google-begins-rolling-out-ok-google-support.jpg)
Google comienza a implementar Ok Google support para Android Auto
Ok Google, el asistente de voz de Google probablemente hará que esta aplicación largamente esperada se implemente pronto en Android Auto . Bueno, porque algunos usuarios vigilantes han descubierto que se ha habilitado hoy. Con esta función, los usuarios de Android Auto ahora pueden navegar por la aplicación únicamente a través de comandos de voz.Prime
![Color abierto: esquema de color optimizado para UI para diseñadores](http://hideout-lastation.com/img/tech-design-tips/896/open-color-ui-optimized-color-scheme.jpg)
Color abierto: esquema de color optimizado para UI para diseñadores
¿Cuánto tiempo desperdicias jugando al elegir el esquema de colores correcto para tus diseños? Con Open Color tiene acceso a un esquema de color predefinido creado específicamente para el diseño de pantalla .Los colores varían en todo el espectro con opciones de color muy opacas y muy brillantes . Los