Krypton Solid

Cómo modificar Bootstrap de manera simple y efectiva

Cómo modificar Bootstrap de manera simple y efectiva

Oreja No es de ninguna manera el único marco de interfaz HTML / CSS que existe, pero creo que es seguro decir que cambió el juego. Este montón de código incluido en el fregadero de la cocina ha facilitado mucho el diseño y desarrollo de muchas aplicaciones (y sitios web) y ha popularizado el marco HTML masivo como un subproducto.

Lamentablemente, la gran extensión de su conjunto de funciones atrae a los aspectos más perezosos de la naturaleza humana, y muchas de las personas que eligen usarlo se apegan a los valores predeterminados. Ahora, tenga en cuenta, 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 mucho trabajo y pruebas exhaustivas por parte del equipo de Twitter. Son una base tan sólida para construir como cualquier otra.

Pero eso es todo lo que son: una base. Los marcos, como sugiere su nombre, no están destinados a ser utilizados como una solución completa 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, expandirlos y modificarlos.

Los desarrolladores de Bootstrap han hecho un muy buen trabajo al hacer esto fácil de hacer: su código es modular; y puede descargar componentes individuales del marco para usarlos como mejor le parezca. Incluso han proporcionado un herramienta de personalización básica 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 intensificado la creación de modificaciones y herramientas que nos dejan al resto de nosotros sin excusas. No hay razón para conformarse con los incumplimientos.

Evalúe sus proyectos individuales; tal vez la tipografía predeterminada de Bootstrap sea adecuada para usted, pero el esquema de color y la cuadrícula no lo son, tal vez necesite iconos diferentes. Identifique los lugares donde Bootstrap no satisface sus necesidades y eche un vistazo a los siguientes recursos.

Modificaciones de Bootstrap

Estos son mods completos que toman la interfaz de usuario de arranque básica 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 de esta lista es Interfaz de usuario plana. Publicado por los chicos en Designmodo, Flat UI alcanzó una popularidad instantánea en la comunidad de diseño y por una buena razón: es hermosa.

Creado para aquellos que aman el diseño plano, a diferencia de las tendencias algo esquemórficas de Bootstrap, cada elemento de la interfaz de usuario ha sido rediseñado desde cero con una estética completamente nueva.

Con iconos vectoriales, una nueva fuente de iconos de glifos, elementos personalizados de la interfaz de usuario (como una lista de tareas pendientes) y múltiples esquemas de color que se cambian fácilmente, la interfaz de usuario plana me ha hecho, y probablemente a muchos otros, repensar cómo puede verse Bootstrap.

Mi único problema: el tamaño del texto de su elemento de párrafo básico es un poco pequeño para un sitio web. Para ser justos, probablemente sea adecuado para una interfaz de aplicación en la que puede colocar texto en espacios bastante pequeños.

La interfaz de usuario plana es gratuita, pero puede pagar por 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 se ha rediseñado por completo para que sea compatible con los elementos de la 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 impulsar el desarrollo de aplicaciones iFrame de Facebook en ambos tamaños relevantes. Incluye CSS y HTML base para tipografía, formularios, botones, tablas, cuadrículas, navegación y más, con el estilo típico de Facebook «.

Desarrolladores de aplicaciones de Facebook, tomen nota: su trabajo ahora es más fácil.

fboot

Plantillas de administración de interfaz de usuario de Jumpstart

Bootstrap podría estar diseñado para su uso en aplicaciones, pero necesita un poco de trabajo si tiene la intención de crear una «interfaz de administración» clásica con él. Interfaz de usuario Jumpstart te trae tres plantillas diferentes que hacen esto admirablemente.

Los íconos de la interfaz de usuario 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, estos mods son diferentes de los demás en una forma importante. No existe una versión gratuita; tienes que pagarlos directamente. Sin embargo, no son muy caras: oscilan entre $ 15 y $ 20 USD. Por la gran cantidad de esfuerzo que se ha dedicado a ellos, diría que vale la pena, si satisfacen sus necesidades específicas.

buen inicio

BootMetro

Algunas personas lo aman y muchos lo detestan con pasión; pero no se puede negar que Windows 8 y su interfaz de usuario 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) en el que este tipo de interfaz de usuario sea particularmente útil. Pero bueno, en BootMetro tenemos uno!

Es gratis y parece tener muchas funciones, 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. (Quiero decir, ¿en serio? ¿Bootstrap y Metro? No lo vi venir).

bootmetro

Herramientas de personalización de Bootstrap

Por lo tanto, desea adaptar la configuración de Bootstrap para satisfacer mejor sus necesidades de UI / UX. Por donde empiezas Bueno, podrías sumergirte directamente en el código. Yo he hecho eso. Sin embargo, te diré que puede ser difícil.

Si desea cambiar toda la tipografía, o los colores de los botones y enlaces, o los estilos de la barra de navegación manualmente, estará allí un tiempo. Puede editar todas las variables en la aplicación de personalización en el sitio web de Bootstrap, pero necesitará conocer los códigos HEX para todos los colores y no obtendrá ningún comentario visual a medida que realiza los cambios.

Afortunadamente para nosotros, hay bastantes creadores de temas de Bootstrap que se crearon específicamente para este propósito. Estos son los dos mejores que he encontrado hasta ahora.

EstiloBootstrap

Si puede ignorar la interfaz desgarbada, EstiloBootstrap es una herramienta poderosa para editar la mayoría de los elementos de la interfaz de usuario predeterminados que encontrará en el marco. Si desea comenzar rápidamente, cambiando solo las cosas más obvias, este es el lugar para comenzar.

estilo

Magia de Bootstrap

Magia de Bootstrap es la herramienta que debe utilizar si desea realizar un cambio de marca en profundidad del marco. Tiene una interfaz más agradable y simple y le brinda la capacidad de modificar muchos más elementos que StyleBootstrap. Sin embargo, tenga cuidado … esto llevará más tiempo. Dicho esto, todavía no tomaría tanto tiempo como cambiar todo manualmente.

bootstrapmagic

Complementos y fragmentos

Basta decir que hay cosas que Bootstrap no tiene y que pueden resultarle útiles. Para empezar, tenemos iconos.

Fuente impresionante

Los iconos de glifos de Bootstrap son geniales, pero limitados. Tienes íconos oscuros, luego tienes íconos claros, todos configurados en una bonita imagen de sprite. Las fuentes de iconos, sin embargo, son mucho más versátiles. Todo lo que pueda hacer con el texto con CSS3, puede hacerlo con estos íconos. Cambia el tamaño, el color, dales una sombra; es literalmente tan fácil como escribir CSS. Con unos 361 iconos en el momento de escribir este artículo, Fuente impresionante vale la pena echarle un vistazo.

fontawesome

Bootsnipp

Bootsnipp es una biblioteca de fragmentos de código HTML diseñada para funcionar con Bootstrap, presumiblemente sin agregar bibliotecas adicionales. Los fragmentos incluyen: formularios de registro e inicio de sesión con pestañas, carruseles, mejores calendarios, una interfaz de correo electrónico que se parece a Gmail, una interfaz de usuario de reproductor multimedia y más.

Si está atascado tratando de descubrir cómo unir elementos en su interfaz de usuario, eche un vistazo a la biblioteca Bootsnipp. Si no tienen exactamente lo que necesita, los ejemplos de código pueden ayudarlo a descubrir cómo hacerlo.

bootsnipp

Eso no es todo …

Dado que el marco favorito de Twitter se ha adoptado tan ampliamente como es, probablemente haya más información sobre cómo personalizar Bootstrap de la que puede contener cualquier lista.

Después de todo, para eso es Internet, ¿verdad? Eso y … gatos.

¿Has modificado Bootstrap? ¿Lo hizo manualmente o usó un recurso? Háznoslo saber en los comentarios.

Deja un comentario