Cómo modificar Bootstrap simple y eficazmente
Oreja de ninguna manera es el único marco de interfaz HTML / CSS, pero creo que es seguro decir que cambió el juego. Este montón de código incluido en el fregadero de la cocina ha hecho que el diseño y desarrollo de muchas aplicaciones (y sitios web) sea mucho más fácil, y ha popularizado el enorme marco HTML como subproducto.
Lamentablemente, la extensión de su conjunto de características atrae a los aspectos más perezosos de la naturaleza humana, y muchas de las personas que eligen usarlo se quedan con los valores predeterminados. Ahora, fíjate, los estilos predeterminados y la cuadrícula de diseño no están mal por ningún tramo de la imaginación. Son el resultado de un gran trabajo y extensas pruebas por parte del equipo de Twitter. Son una base tan sólida para construir como cualquiera.
Pero eso es todo lo que son: una base. Los marcos, como su nombre sugiere, no están destinados a ser utilizados como una solución total para sus necesidades de UX. La única excepción a esta regla podría ser si está desarrollando algo interno que el público nunca verá. Pero incluso entonces ... La idea es llevarlos más lejos, ampliarlos y modificarlos.
Los desarrolladores de Bootstrap realmente han hecho un buen trabajo al hacer esto fácil: su código es modular; y puede descargar componentes individuales del marco para usarlos como mejor le parezca. Incluso han proporcionado una herramienta básica de personalización en su sitio web que le permite editar todas las variables según sea necesario.
El resto, sin embargo, depende de nosotros. Y, hombre, algunos diseñadores y desarrolladores realmente impresionantes han aumentado creando mods y herramientas que nos dejan al resto de nosotros sin excusas. No hay razón para conformarse con los valores predeterminados.
Evalúa tus proyectos individuales; quizás la tipografía predeterminada de Bootstrap es adecuada para usted, pero el esquema de colores y la cuadrícula no lo son, tal vez necesite diferentes iconos. Identifique los lugares donde Bootstrap no satisface sus necesidades, y observe los siguientes recursos.
Modificaciones Bootstrap
Estos son mods completamente desarrollados que toman la interfaz de usuario básica de arranque y la convierten en algo casi irreconocible. Sus usos son algo específicos y limitados; pero si satisfacen sus necesidades, pueden ahorrarle tiempo y dinero.
UI plana
El primer mod en esta lista es Flat UI. Lanzado por los chicos en Designmodo , Flat UI alcanzó popularidad instantánea en la comunidad de diseño y por una buena razón: es hermoso.
Creado para aquellos que aman el diseño plano, a diferencia de las tendencias algo esquemáticas de Bootstrap, cada elemento de la interfaz de usuario ha sido rediseñado desde cero con una estética completamente nueva.
Con iconos de vectores, una nueva fuente de icono de glifo, elementos de IU personalizados (como una lista de tareas pendientes) y múltiples esquemas de colores fáciles de cambiar, la IU plana me ha hecho pensar, y probablemente muchos otros, cómo puede ser Bootstrap.
Mi único motivo favorito: el tamaño del texto para su elemento de párrafo básico es un poco pequeño para un sitio web. Para ser justos, es probable que sea el correcto para una interfaz de aplicación donde puede colocar texto en espacios más bien pequeños.
Flat UI es gratuito, pero puede pagar una versión pro con elementos adicionales, funcionalidad y archivos PSD.
Fbootstrapp
¿Recuerdas cómo dije que algunos de estos mods tenían casos de uso bastante específicos? Bueno, no estaba bromeando. Fbootstrapp ha sido completamente modificado para ser compatible con los elementos de interfaz de usuario de Facebook.
¿Por qué alguien haría eso? Bueno, en sus propias palabras, "Fbootstrapp es un conjunto de herramientas diseñado para poner en marcha el desarrollo de las aplicaciones de Facebook iFrame en ambos tamaños relevantes. Incluye CSS y HTML básicos para tipografía, formularios, botones, tablas, cuadrículas, navegación y más, con el estilo y aspecto típico de Facebook ".
Desarrolladores de aplicaciones de Facebook, tomen nota: su trabajo es ahora más fácil.
Plantillas de administración Jumpstart UI
Bootstrap podría estar destinado para su uso en aplicaciones, pero necesita un poco de trabajo si tiene la intención de hacer una "interfaz de administración" clásica con él. Jumpstart UI te trae tres plantillas diferentes que hacen esto admirablemente.
Los íconos de la IU de administración, los estilos de widgets, los complementos de visualización de datos basados en jQuery y más se combinan en diseños limpios, personalizables y totalmente receptivos.
Sin embargo, estas modificaciones son diferentes de las otras de una manera importante. No hay una versión gratuita; tienes que pagar por ellos directamente. Sin embargo, no son muy caros: oscilan entre $ 15 y $ 20 USD. Por la gran cantidad de esfuerzo que se les ha dedicado, diría que vale la pena, si satisfacen sus necesidades específicas.
BootMetro
Algunas personas lo aman, y muchos lo detestan con pasión; pero no se puede negar que Windows 8 y su UI de Metro han causado revuelo en el mundo del diseño. Yo, por mi vida, no puedo pensar en ningún caso de uso (fuera de algún tipo de tienda de software) donde este tipo de UI sería particularmente útil. Pero oye, en BootMetro tenemos uno!
Es gratis, y parece bastante funcional, así que échale un vistazo. Puede que no sea particularmente útil para la mayoría de las personas, pero es un experimento de código interesante. (¿En serio, Bootstrap y Metro? No lo vi venir).
Herramientas de personalización Bootstrap
Por lo tanto, desea adaptar su configuración de Bootstrap para satisfacer mejor sus necesidades de UI / UX. ¿Dónde comienzas? Bueno, puedes sumergirte directamente en el código. He hecho eso. Te diré, sin embargo, puede ser duro.
Si desea cambiar toda la tipografía, o los colores del botón y del enlace, o los estilos de la barra de navegación de forma manual, estará allí por un tiempo. Puede editar todas las variables en la aplicación de personalización en el sitio web de Bootstrap, pero deberá conocer los códigos HEX para todos los colores y no obtendrá ningún comentario visual al realizar cambios.
Afortunadamente para nosotros, hay bastantes fabricantes de temas Bootstrap que fueron creados específicamente para este propósito. Estos son los dos mejores que he encontrado hasta ahora.
StyleBootstrap
Si puedes ignorar la interfaz desgarbada, StyleBootstrap es una poderosa herramienta para editar la mayoría de los elementos de UI predeterminados que encontrará en el marco. Si desea comenzar rápidamente, cambiando solo las cosas más obvias, entonces este es el lugar para comenzar.
Bootstrap Magic
Bootstrap Magic es la herramienta que debe usar si desea realizar un cambio de marca en profundidad del marco. Tiene una interfaz más simple y más simple y le da la capacidad de modificar muchos más elementos que StyleBootstrap. Tenga cuidado, sin embargo ... esto tomará más tiempo. Dicho esto, aún no tomaría tanto tiempo como para cambiar todo manualmente.
Complementos y fragmentos
Baste decir que hay cosas que Bootstrap no tiene que pueda serle útil. Para empezar, tenemos iconos.
Fuente impresionante
Los íconos de glifo de Bootstrap son geniales, pero limitados. Tienes íconos oscuros, luego tienes íconos de luz, todo configurado en una pequeña imagen de sprite. Las fuentes de iconos, sin embargo, son mucho más versátiles. Cualquier cosa que pueda hacer para enviar mensajes de texto con CSS3, puede hacerlo a estos íconos. Cambia el tamaño, el color, dales una sombra paralela; es literalmente tan fácil como escribir CSS. Con unos 361 íconos en el momento de escribir esto, Fuente impresionante vale la pena echarle un vistazo.
Bootsnipp
Bootsnipp es una biblioteca de fragmentos de HTML diseñados para funcionar con Bootstrap, presumiblemente sin agregar bibliotecas adicionales. Los fragmentos incluyen: formularios de inicio de sesión con pestañas y de inicio de sesión, carruseles, calendarios mejores, una interfaz de correo electrónico que se asemeja a Gmail, una interfaz de usuario de reproductor multimedia y más.
Si está atascado tratando de descubrir cómo juntar elementos en su UI, eche un vistazo a través de la biblioteca de Bootsnipp. Si no tienen exactamente lo que necesita, los ejemplos del código pueden ayudarlo a descubrir cómo hacerlo.
Eso no es todo ...
Con el marco favorito de Twitter siendo tan ampliamente adoptado como lo es, probablemente haya más información sobre cómo personalizar Bootstrap de lo que cualquier lista puede contener.
Después de todo, para eso es Internet, ¿verdad? Eso y ... gatos.
¿Has modificado Bootstrap? ¿Lo hiciste manualmente o usaste un recurso? Háganos saber en los comentarios.