Cómo personalizar el Bootstrap de Twitter

 

 

 

  • Clase magistral de diseño para una interfaz de usuario compleja, con Vitaly Friedman
  • SmashingConf Friburgo 2024

  • Índice
    1. Anulando con CSS
    2. Generando una compilación personalizada
    3. Profundizando en MENOS
      1. Llegar a la fuente
      2. Instalando MENOS
      3. Modularizando sus cambios
    4. Consejos y técnicas
    5. Palabra final
      1. Otras lecturas

    Uno de los atractivos de Bootstrap es que simplemente funciona. Es un importante ahorro de tiempo al iniciar un sitio web, hasta el punto de que importantes organizaciones como NBC, NASA y la Casa Blanca lo están adoptando. Y permite incluso a quienes no son diseñadores entre nosotros crear algo decente. Pero, ¿qué pasa si el logotipo de su empresa tiene un tono de azul diferente? No es para preocuparse. No tienes que ceñirte a los valores predeterminados. En este artículo, Thomas Park muestra algunas formas de personalizar Bootstrap para que se ajuste a sus necesidades, ya sea un ajuste de un botón o un tema completo.

     

    Bootstrap de Twitter ha despegado como un cohete desde su lanzamiento hace un año. El popular marco CSS proporciona un sistema de cuadrícula responsivo, componentes prediseñados y complementos de JavaScript para un desfile de sitios web .

    Uno de los atractivos de Bootstrap es que simplemente funciona. Es un importante ahorro de tiempo al iniciar un sitio web, hasta el punto de que importantes organizaciones como NBC, NASA y la Casa Blanca lo están adoptando. Y permite incluso a quienes no son diseñadores entre nosotros crear algo decente.

    Para ilustrar, puede transformar el botón predeterminado a continuación a la izquierda al pulido a la derecha simplemente agregando dos clases: btny btn-primary.

    El botón predeterminado de un navegador (izquierda) y un botón Bootstrap (derecha).

    Pero, ¿qué pasa si el logotipo de su empresa tiene un tono de azul diferente? No es para preocuparse. No tienes que ceñirte a los valores predeterminados. Este artículo muestra algunas formas de personalizar Bootstrap para que se ajuste a sus necesidades, ya sea un ajuste de un botón o un tema completo.

    Tres temas Bootstrap de Bootswatch

    Anulando con CSS

    El enfoque más sencillo es anular los estilos de Bootstrap usando CSS. Esto se puede lograr escribiendo sus propios estilos para las clases utilizadas en Bootstrap. Podrías, por ejemplo, hacer que tus botones sean más redondeados agregando el siguiente código:

    .btn { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}

    Un botón Bootstrap personalizado con un radio de borde aumentado.

    Para que las anulaciones sean exitosas, recuerde agregar su código después de que se haya declarado Bootstrap.

    La ventaja de este método es que apenas cambia su flujo de trabajo . Incluso cuando utilice Bootstrap, querrá tener su propia hoja de estilo para adaptar el marco a su contenido correctamente. Puede que no te des cuenta, pero el propio sitio web de Bootstrap se basa en una hoja de estilo de mil líneas encima de Bootstrap.

    Pero para cambios más extensos (como revisar la barra de navegación) o para cambios que no están localizados (como cambiar el color de resaltado utilizado en todo el sitio web), la anulación de esta manera poco sistemática puede parecer una solución de curita. Y sus nuevos estilos se añaden a la hoja de estilos predeterminada de Bootstrap, añadiendo volumen al ya considerable tamaño de 100 KB. Si está planeando más de unas pocas anulaciones de este tipo, es posible que desee considerar un enfoque más amplio.

    Generando una compilación personalizada

    Una alternativa es crear una compilación personalizada por completo. Con el generador oficial, puede asignar sus propios valores a variables clave que se reutilizan en todo el marco, como @linkColory . Haga clic en el botón grande al final del generador y descargue la hoja de estilo resultante. Incluso puede elegir qué componentes incluir, reduciendo el tamaño de su archivo.@navbarHeight@baseFontFamily

    Algunas de las variables que se pueden configurar en el generador oficial. ( Versión grande )

    Varios generadores de terceros también están disponibles en la Web. A diferencia del generador oficial, proporcionan vistas previas en vivo a medida que ajustas las variables. Bootswatchr se organiza por variable y StyleBootstrap por componente. BootTheme agrega una función de tirar los dados para aleatorizar sus valores. Si la suerte no está de tu lado, Lavish puede generar un tema a partir de cualquier imagen que proporciones y PaintStrap a partir de esquemas de color existentes.

    El uso de un generador simplifica la logística de la creación personalizada de Bootstrap. Y con mano hábil, puedes lograr una apariencia única y bien diseñada.

    Profundizando en MENOS

    Incluso con más de cien variables, es posible que los generadores le resulten demasiado restrictivos. O quizás no quieras trabajar en el navegador, lo que puede limitar la integración con tu flujo de trabajo. En cualquier caso, es hora de profundizar en la fuente de Bootstrap.

     

    Llegar a la fuente

    Como proyecto de código abierto, el código fuente de Bootstrap está disponible gratuitamente (ZIP) para descargar.

    Abra el código fuente y notará que, después de todo, los estilos de Bootstrap no están escritos en CSS, sino en LESS . LESS es un lenguaje de hojas de estilo dinámico que tiene una serie de ventajas sobre CSS , incluida la capacidad de anidar selectores y crear variables (como se usa en los generadores anteriores). Una vez escrito, el código MENOS se compila en CSS por adelantado o en tiempo de ejecución. Si Sass es su idioma preferido, existe una conversión Sass de Bootstrap .

    En el lessdirectorio, encontrará un montón de MENOS archivos etiquetados por componente.

    Los MENOS archivos que componen el código fuente de Bootstrap. ( Versión grande )

    Algunas cosas a tener en cuenta sobre estos archivos:

    • bootstrap.lessEste es el archivo central. Importa todos los demás y es el que finalmente compilarás.
    • reset.lessSiempre el primer archivo que se importará.
    • variables.lessy mixins.lessEstos siempre siguen porque son dependencias para el resto. El primero contiene las mismas variables que se utilizan en los sitios web del generador.
    • utilities.lessEste es siempre el último archivo que se importa, para que las clases que contiene anulen el resto de los estilos cuando sea necesario.

    Abra los archivos MENOS y compruebe cómo Bootstrap diseña cada componente. Por ejemplo, en buttons.less, aquí está la regla para la .btn-largeclase: radios en vivo y radios live en español

    .btn-large { padding: 9px 14px; font-size: @baseFontSize + 2px; line-height: normal; .border-radius(5px);}

    Como puede ver, se parece mucho a CSS. Sin embargo, tiene un par de características MENOS específicas. En la font-sizedeclaración, la variable @baseFontSize(especificada en variables.less) y una operación de suma se combinan para calcular el valor. El .border-radiusmixin, definido en mixins.less, también maneja los prefijos de proveedores para que nosotros no tengamos que hacerlo.

    Es dentro de estos archivos MENOS donde puede realizar sus personalizaciones. Comience con los valores en variables.lessy luego experimente con los estilos en el resto de la fuente. Diviértete con el.

    Instalando MENOS

    Una vez que haya realizado algunos cambios y esté listo para verlos, querrá compilar en CSS. Para hacer esto, necesitarás instalar LESS. Tienes un número de opciones ; Para empezar, sugeriría un cliente como LESS.app .

    Si prefiere la línea de comandos, instale Node.js , que incluye Node Package Manager (NPM). Luego, emita el siguiente comando:

    npm instala menos

    Una vez instalado, puedes compilar bootstrap.lessasí:

    lessc bootstrap.less bootstrap.css

    Y para la versión minimizada, usa esto en su lugar:

    lessc --comprimir bootstrap.less bootstrap.min.css

    Independientemente de cómo compile, apunte sólo bootstrap.lessal compilar, no a ninguno de los otros archivos.

    Modularizando sus cambios

    Es posible que notes una limitación del enfoque anterior. Sus cambios ahora están entrelazados con la fuente original. Entonces, cuando Bootstrap se actualiza inevitablemente con correcciones de errores y nuevas funciones, será casi imposible desenredar sus personalizaciones y actualizarlas a la nueva versión.

     

    Para evitar este problema, querrá modularizar sus cambios. Este es el enfoque que adopto al crear temas para Bootswatch .

    Primero, descargo el código fuente de Bootstrap, le cambio el nombre bootstrapy lo dejo intacto. En lugar de realizar cambios en los archivos que contiene, creo una carpeta separada, llamada custom, con estos tres archivos:

    • custom-variables.lessHago una copia de variables.lessla fuente de Bootstrap y en su lugar modifico las variables en esta copia.
    • custom-other.lessEste archivo contiene cualquier otra personalización que quiera realizar y que no sea posible con las variables.
    • custom-bootstrap.lessEste es el nuevo archivo "central" que compilará en CSS. Junto con los archivos LESS originales, importa los dos archivos personalizados anteriores usando los siguientes comandos:
    @import "../bootstrap/less/bootstrap.less";@import "custom-variables.less";@import "custom-other.less";@import "../bootstrap/less/utilities.less";

    Al mantener los cambios separados, puede actualizar fácilmente a versiones más nuevas de Bootstrap. Simplemente reemplace el bootstrapdirectorio antiguo por el nuevo y vuelva a compilar.

    Creé un modelo estándar para esta configuración, llamado swatchmaker. También incluye algunos extras, como páginas de prueba y comandos para actualizar Bootstrap a la última versión, compilar automáticamente cada vez que se guardan cambios y restablecer sus personalizaciones.

    Consejos y técnicas

    A continuación se ofrecen consejos y técnicas adicionales que pueden resultarle útiles al personalizar Bootstrap.

    • Conozca Bootstrap. Lea la documentación oficial, familiarícese con todos los componentes y conozca los entresijos de la fuente. Si va a personalizar Bootstrap con regularidad, el tiempo que invierta aquí dará sus frutos en el futuro.
    • Comience con las variables primero. Ya sea que esté utilizando un generador o editando la fuente, comience sus modificaciones con las variables admitidas. Es posible que descubra que son suficientes para sus necesidades. Simplemente cambiar la barra de navegación y los colores básicos es un gran comienzo.
    • Elige tu paleta. Piense en la combinación de colores de su sitio web, particularmente en los colores de acento primarios y secundarios. Existen algunos buenos recursos para ayudarle con esto. Una vez que haya decidido una paleta, configure y utilice estos colores como variables. No deberías ver códigos hexadecimales esparcidos por todo tu código.
    • Añade algunos activos. Un fondo texturizado y una fuente personalizada marcan una gran diferencia. Para las fuentes web, puede agregar la @importdeclaración en cualquier parte de su código, porque LESS la colocará en la parte superior del CSS generado. Me gusta mantener el mío en la parte superior custom-other.less.
    • Utilice transparencia alfa. Al agregar toques como box-shadowy text-shadow, defina sus colores usando RGBa, con alternativas para navegadores antiguos , y use sus valores de manera consistente. Esto agregará cohesión a sus componentes.
    • Selectores de partidos. Al anular una clase, intente utilizar el mismo selector que usa Bootstrap. Esto ayudará a mantener sus clases sincronizadas con las originales y evitará una guerra de especificidad cada vez mayor. Recuerda que, en caso de empate, gana el último. Con la configuración modularizada anterior, sus personalizaciones siempre anularán los valores predeterminados.
    • Encapsule su código. Recuerde que LESS permite selectores anidados. Utilice esto para encapsular cada componente. Descubrí que esto es de gran ayuda para mantener el código ordenado y legible. Si bien ambos funcionan igual, en lugar de usar esto...
    .navbar .brand { color: @white;}.navbar .nav li a { color: @grayLighter;}

    … prueba esto:

     

    .navbar { .brand { color: @white; } .nav li a { color: @grayLighter; }}
    • Aprovecha los mixins. LESS incluye prácticos mixins como lighten()y darken(). Los que define Bootstrap mixins.lesstambién están a tu disposición. Y no olvides que siempre puedes crear el tuyo propio.
    • Aprenda con el ejemplo. Mire cómo otros están personalizando Bootstrap. Por ejemplo, las fuentes de todos mis temas están disponibles en GitHub.

    ¿Tienes algún consejo que añadir? Por favor comparta los comentarios a continuación.

    Palabra final

    Si el rendimiento es una prioridad (como a menudo debería serlo), lo mejor será que personalice su propia solución sobre una base más liviana .

    Pero si su objetivo ante todo es lanzar su sitio web, o si el desarrollo front-end no es su fuerte, entonces Twitter Bootstrap puede ser adecuado para usted. Mucha gente se coloca en estos campos, a juzgar por la popularidad de Bootstrap.

    Dado su uso intensivo en la Web, considere tomar todo lo bueno de Bootstrap y hacerlo suyo.

    Otras lecturas

    • Cómo el marketing cambió la programación orientada a objetos en JavaScript
    • Cómo crear aplicaciones Svelte renderizadas en el lado del servidor (SSR) con SvelteKit
    • Las nuevas unidades de ventana gráfica CSS no resuelven el problema clásico de la barra de desplazamiento
    • Dar sentido a las funciones de JavaScript "sin sentido"

    (al, señor)Explora más en

    • Codificación
    • Marcos
    • CSS
    • javascript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Cómo personalizar el Bootstrap de Twitter

    Cómo personalizar el Bootstrap de Twitter

    Clase magistral de diseño para una interfaz de usuario compleja, con Vitaly Friedman SmashingConf Friburgo 2024 Índice

    programar

    es

    https://pseint.es/static/images/programar-como-personalizar-el-bootstrap-de-twitter-814-0.jpg

    2024-04-04

     

    Cómo personalizar el Bootstrap de Twitter
    Cómo personalizar el Bootstrap de Twitter

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20