Acercarse

Si bien las páginas de inicio brindan un recorrido introductorio del proyecto y lo que ofrece, este documento se enfoca en por qué hacemos las cosas que hacemos en Bootstrap. Explica nuestra filosofía de construir en la web para que otros puedan aprender de nosotros, contribuir con nosotros y ayudarnos a mejorar.

¿Ves algo que no suena bien, o quizás se podría hacer mejor? Abre un problema, nos encantaría discutirlo contigo.

Resumen

Nos sumergiremos en cada uno de estos más a lo largo, pero a un alto nivel, esto es lo que guía nuestro enfoque.

• Los componentes deben ser receptivos y móviles primero
• Los componentes deben construirse con una clase base y ampliarse a través de clases modificadoras
• Los estados de los componentes deben obedecer una escala de índice z común
• Siempre que sea posible, prefiera una implementación de HTML y CSS sobre JavaScript
• Siempre que sea posible, use utilidades sobre estilos personalizados
• Siempre que sea posible, evite aplicar requisitos HTML estrictos (selectores secundarios)

Sensible

Los estilos receptivos de Bootstrap están diseñados para ser receptivos, un enfoque que a menudo se denomina móvil primero . Usamos este término en nuestros documentos y en gran parte estamos de acuerdo con él, pero a veces puede ser demasiado amplio. Si bien no todos los componentes deben responder completamente en Bootstrap, este enfoque receptivo consiste en reducir las anulaciones de CSS al presionarlo para agregar estilos a medida que la ventana gráfica se hace más grande.

En Bootstrap, verá esto más claramente en nuestras consultas de medios. En la mayoría de los casos, utilizamos min-widthconsultas que comienzan a aplicarse en un punto de interrupción específico y continúan hasta los puntos de interrupción más altos. Por ejemplo, a .d-nonese aplica desde min-width: 0hasta el infinito. Por otro lado, a .d-md-nonese aplica desde el punto de quiebre medio en adelante.

A veces lo usaremos max-widthcuando la complejidad inherente de un componente lo requiera. A veces, estas anulaciones son funcional y mentalmente más claras de implementar y admitir que reescribir la funcionalidad principal de nuestros componentes. Nos esforzamos por limitar este enfoque, pero lo usaremos de vez en cuando.

Clases

Además de nuestro Reboot, una hoja de estilo de normalización entre navegadores, todos nuestros estilos apuntan a usar clases como selectores. Esto significa evitar los selectores de tipo (p. ej., input[type="text"]) y las clases primarias extrañas (p. ej., .parent .child) que hacen que los estilos sean demasiado específicos para anularlos fácilmente.

Como tales, los componentes deben construirse con una clase base que albergue pares de valor de propiedad comunes, que no deben anularse. Por ejemplo, .btny .btn-primary. Usamos .btnpara todos los estilos comunes como display, paddingy border-width. Luego usamos modificadores como .btn-primaryagregar el color, el color de fondo, el color del borde, etc.

Las clases de modificador solo deben usarse cuando hay múltiples propiedades o valores para cambiar en múltiples variantes. Los modificadores no siempre son necesarios, así que asegúrese de guardar líneas de código y evitar anulaciones innecesarias al crearlas. Buenos ejemplos de modificadores son nuestras clases de colores temáticos y variantes de tamaño.

escalas de índice z

Hay dos z-indexescalas en Bootstrap: elementos dentro de un componente y componentes superpuestos.

Elementos componentes

• Algunos componentes en Bootstrap están construidos con elementos superpuestos para evitar bordes dobles sin modificar la borderpropiedad. Por ejemplo, grupos de botones, grupos de entrada y paginación.
• Estos componentes comparten una z-indexescala estándar de 0hasta 3.
• 0es predeterminado (inicial), 1es :hover, 2es :active/ .activey 3es :focus.
• Este enfoque coincide con nuestras expectativas de máxima prioridad del usuario. Si un elemento está enfocado, está a la vista y a la atención del usuario. Los elementos activos son los segundos más altos porque indican estado. El desplazamiento es el tercero más alto porque indica la intención del usuario, pero se puede desplazar casi cualquier cosa .

Componentes superpuestos

Bootstrap incluye varios componentes que funcionan como una superposición de algún tipo. Esto incluye, en orden de mayor z-index, menús desplegables, barras de navegación fijas y fijas, modales, información sobre herramientas y ventanas emergentes. Estos componentes tienen su propia z-indexescala que comienza en 1000. Este número inicial se eligió arbitrariamente y sirve como un pequeño búfer entre nuestros estilos y los estilos personalizados de su proyecto.

Cada componente de superposición aumenta z-indexligeramente su valor de tal manera que los principios comunes de la interfaz de usuario permiten que los elementos centrados o sobre los que se desplaza el usuario permanezcan a la vista en todo momento. Por ejemplo, un modal es un bloqueo de documentos (p. ej., no puede realizar ninguna otra acción salvo la acción del modal), por lo que lo colocamos encima de nuestras barras de navegación.

Obtenga más información sobre esto en nuestra z-indexpágina de diseño .

HTML y CSS sobre JS

Siempre que sea posible, preferimos escribir HTML y CSS sobre JavaScript. En general, HTML y CSS son más prolíficos y accesibles para más personas de todos los niveles de experiencia. HTML y CSS también son más rápidos en su navegador que JavaScript, y su navegador generalmente le brinda una gran cantidad de funciones.

Este principio es nuestra API de JavaScript de primera clase que usa dataatributos. No necesita escribir casi nada de JavaScript para usar nuestros complementos de JavaScript; en su lugar, escriba HTML. Lea más sobre esto en nuestra página de descripción general de JavaScript .

Por último, nuestros estilos se basan en los comportamientos fundamentales de los elementos web comunes. Siempre que sea posible, preferimos utilizar lo que proporciona el navegador. Por ejemplo, puede poner una .btnclase en casi cualquier elemento, pero la mayoría de los elementos no proporcionan ningún valor semántico ni funcionalidad de navegador. Entonces, en su lugar, usamos <button>s y <a>s.

Lo mismo ocurre con los componentes más complejos. Si bien podríamos escribir nuestro propio complemento de validación de formularios para agregar clases a un elemento principal en función del estado de una entrada, lo que nos permitiría diseñar el texto en rojo, preferimos usar los pseudoelementos :valid/ que nos proporciona cada navegador.:invalid

Utilidades

Las clases de utilidad, anteriormente ayudantes en Bootstrap 3, son un poderoso aliado para combatir la sobrecarga de CSS y el bajo rendimiento de la página. Una clase de utilidad es típicamente un emparejamiento propiedad-valor único e inmutable expresado como una clase (por ejemplo, .d-blockrepresenta display: block;). Su atractivo principal es la velocidad de uso al escribir HTML y limitar la cantidad de CSS personalizado que tiene que escribir.

Específicamente en lo que respecta a CSS personalizado, las utilidades pueden ayudar a combatir el aumento del tamaño del archivo al reducir los pares de propiedad-valor que se repiten con más frecuencia en clases únicas. Esto puede tener un efecto dramático a escala en sus proyectos.

HTML flexible

Si bien no siempre es posible, nos esforzamos por evitar ser demasiado dogmáticos en nuestros requisitos HTML para los componentes. Por lo tanto, nos enfocamos en clases individuales en nuestros selectores CSS y tratamos de evitar los selectores secundarios inmediatos ( >). Esto le brinda más flexibilidad en su implementación y ayuda a mantener nuestro CSS más simple y menos específico.

Convenciones de código

Code Guide (del cocreador de Bootstrap, @mdo) documenta cómo escribimos nuestro HTML y CSS en Bootstrap. Especifica pautas para formato general, valores predeterminados de sentido común, órdenes de propiedades y atributos, y más.

Usamos Stylelint para hacer cumplir estos estándares y más en nuestro Sass/CSS. Nuestra configuración Stylelint personalizada es de código abierto y está disponible para que otros la usen y amplíen.

Usamos vnu-jar para aplicar HTML semántico y estándar, así como para detectar errores comunes.