Approach

Conozca los principios rectores, las estrategias y las técnicas que se utilizan para crear y mantener Bootstrap para que pueda personalizarlo y ampliarlo usted mismo más fácilmente.

Si bien las páginas de introducción ofrecen un recorrido introductorio del proyecto y lo que ofrece, este documento se centra 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 podría hacerse mejor? Abra un problema, nos encantaría discutirlo con usted.

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 ser móviles primero
  • Los componentes deben construirse con una clase base y ampliarse mediante clases modificadoras
  • Los estados de los componentes deben obedecer a una escala de índice z común
  • Siempre que sea posible, prefiera una implementación de HTML y CSS en lugar de JavaScript
  • Siempre que sea posible, utilice utilidades en lugar de estilos personalizados.
  • Siempre que sea posible, evite imponer 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 estamos de acuerdo en gran medida con él, pero a veces puede ser demasiado amplio. Si bien no todos los componentes deben ser completamente receptivos en Bootstrap, este enfoque receptivo se trata de reducir las anulaciones de CSS al presionarlo para que agregue estilos a medida que la ventana gráfica se hace más grande.

En Bootstrap, verá esto con mayor claridad en nuestras consultas de medios. En la mayoría de los casos, utilizamos min-width consultas 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 se .d-none aplica desde el min-width: 0 infinito. Por otro lado, se .d-md-none aplica a desde el punto de interrupción medio en adelante.

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

Clases

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

Como tal, los componentes deben construirse con una clase base que contenga pares de valor de propiedad comunes que no se anulen. Por ejemplo, .btn y .btn-primary . Utilizamos .btn para todos los estilos comunes como display , padding , y border-width . Luego usamos modificadores como .btn-primary agregar el color, el color de fondo, el color del borde, etc.

Las clases de modificadores solo deben usarse cuando hay varias propiedades o valores que se deben cambiar en varias 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-index escalas en Bootstrap: elementos dentro de un componente y componentes superpuestos.

Elementos componentes

  • Algunos componentes de Bootstrap están construidos con elementos superpuestos para evitar bordes dobles sin modificar la border propiedad. Por ejemplo, grupos de botones, grupos de entrada y paginación.
  • Estos componentes comparten un estándar z-index escala de 0 por medio 3 .
  • 0 es predeterminado (inicial), 1 es :hover , 2 es :active / .active y 3 es :focus .
  • Este enfoque coincide con nuestras expectativas de máxima prioridad para el 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 el estado. Hover es el tercero más alto porque indica la intención del usuario, pero casi cualquier cosa se puede mover.

Componentes superpuestos

Bootstrap incluye varios componentes que funcionan como una superposición de algún tipo. Esto incluye, en orden de más alto 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-index escala que comienza en 1000 . Este número inicial fue elegido arbitrariamente y sirve como un pequeño amortiguador entre nuestros estilos y los estilos personalizados de su proyecto.

Cada componente de superposición aumenta z-index ligeramente su valor de tal manera que los principios comunes de la interfaz de usuario permiten que los elementos enfocados o desplazados por el usuario permanezcan a la vista en todo momento. Por ejemplo, un modal es el bloqueo de documentos (por ejemplo, no puede realizar ninguna otra acción salvo la acción del modal), así que lo ponemos encima de nuestras barras de navegación.

Obtenga más información sobre esto en nuestra z-index pá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 diferentes 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 utiliza data atributos. No es necesario escribir casi ningún JavaScript para utilizar 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 elementos web comunes. Siempre que sea posible, preferimos utilizar lo que proporciona el navegador. Por ejemplo, puede poner una .btn clase en casi cualquier elemento, pero la mayoría de los elementos no proporcionan ningún valor semántico o funcionalidad de navegador. Entonces, en cambio, usamos <button> sy <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 permite diseñar el texto, digamos rojo, preferimos usar los pseudoelementos :valid / :invalid que cada navegador nos proporciona.

Utilidades

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

Específicamente con respecto 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 mayor frecuencia en clases únicas. Esto puede tener un efecto dramático a escala en sus proyectos.

HTML flexible

Aunque no siempre es posible, nos esforzamos por evitar ser demasiado dogmáticos en nuestros requisitos de HTML para los componentes. Por lo tanto, nos enfocamos en clases únicas 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.