Acelerar el desarrollo de aplicaciones con Bootstrap

Bootstrap es uno de los mejores y más utilizados marcos front-end HTML/CSS/JS. Casi cualquier desarrollador web que haya creado uno o dos sitios web ha oído hablar de este marco popular. Ofrece tantos componentes y recursos listos para usar que Bootstrap puede acelerar significativamente el desarrollo de su aplicación.

Todo buen desarrollador se preocupa por ahorrar cada segundo en su proceso de desarrollo. Ser eficiente significa una implementación más rápida: cuanto antes y con más frecuencia implementemos, más rápido nuestros usuarios finales obtendrán un mejor producto. Por lo tanto, dedicar algunas horas o días a planificar el proceso y la estrategia puede ahorrarnos no solo unos minutos, sino muchas horas.

Personalmente, he estado trabajando con este marco durante los últimos 4 años en el 90% de mis proyectos. En este artículo, me gustaría compartir con usted algunos consejos que pueden ayudarlo a acelerar el desarrollo de su aplicación sin perder algunas de las increíbles capacidades de Bootstrap.

Entendiendo Bootstrap

Aunque es un marco con el que es muy fácil empezar, no te dejes engañar por su simpleza a primera vista. Antes de precipitarse en un proyecto, dedique tiempo a jugar con el marco y conocer los detalles de las piezas clave de su infraestructura y componentes emocionantes. Esto ayudará a evitar los 10 errores más comunes de Bootstrap.

Dedique una hora a leer la documentación en el sitio de Bootstrap u obtenga más información de una excelente publicación en el blog de Toptal, ¿Qué es Bootstrap? Un breve tutorial sobre el qué, por qué y cómo. Y, excelente artículo Consejos y trucos de Bootstrap 3 que quizás no conozca en scotch.io.

Si encuentra que leer documentación es una tarea aburrida y prefiere leer algo de código, entonces el mejor lugar para comenzar es el sitio web de Bootstrap. Abra su inspector web, escanee el código fuente del sitio y verifique cada bloque de código y sus elementos. Es probablemente una de las mejores y más rápidas formas de comprender los conceptos básicos.

Profundice en la estructura de la página y aprenda cómo se construyen los diseños.

 <div class="container"> <div class="row"> ... </div> </div>

… cambie el tamaño de la ventana de su navegador o use Viewport Resizer de Chrome para obtener más información sobre las utilidades de consulta de medios.

 /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

… y cómo y cuándo usarlos, familiarícese con las clases de columna para obtener los mejores resultados de diseño receptivo.

 <div class="row"> <div class="col-sm-7 col-md-9 col-xs-6">Left column</div> <div class="col-sm-5 col-md-3 col-xs-6">Right column</div> </div>

Eche un vistazo a W3Schools, donde encontrará una referencia completa de Bootstrap de todas las clases, componentes y complementos de JavaScript de CSS, todo con ejemplos de "Pruébelo usted mismo":

• Explicación del sistema de grillas de Bootstrap: grillas en Bootstrap
• Clases básicas de CSS: tipografía, botones, formularios y elementos de formulario, clases auxiliares, imágenes, tablas
• Componentes individuales: glyphicons, menús desplegables, navegación.

Inspeccione el código fuente e intente familiarizarse con tantos nombres de clase como sea posible. Conozca sus casos de uso: cómo, cuándo y por qué. Esto lo ayudará a avanzar más rápido al escribir HTML y diseñar elementos de la interfaz de usuario. Aprender más sobre estos componentes lo ayudará a evitar sobrecargar sus hojas de estilo con una gran cantidad de código duplicado innecesario. Manténgalo simple y limpio usando y reutilizando los componentes existentes, en lugar de crear demasiados nuevos que hagan lo mismo que los que ya existen dentro del marco.

Esto es especialmente importante cuando se trabaja en un equipo de varios desarrolladores. Asegúrese de no terminar escribiendo toneladas de código duplicado creando demasiados estilos para el mismo caso una y otra vez al traducir nuevos diseños al código. Mantener el desarrollo de la interfaz de usuario coherente y bien documentado con guías de estilo de interfaz de usuario también puede agregar un par de nudos al trabajo en equipo productivo. Además, encontrará que al agregar nuevas funciones o páginas a su aplicación avanzará con menos frustración. He estado involucrado en más de una docena de grandes proyectos y, en comparación, he visto varios casos en los que el marco fue literalmente pirateado y cada vez que se agregaba el nuevo código CSS, se rompía la interfaz de usuario en otras páginas. Sería bastante agotador revisar todo el sitio y corregir este tipo de errores. No solo eso, piense en el costo y todo el dinero gastado en tiempo adicional para desarrolladores y ayuda de control de calidad.

Los 7 errores de estilo más comunes que hacen perder el tiempo

1. Al centrar texto o divs

Si necesita centrar un div y/o contenido, puede usar una de estas clases:

Usar centro de texto

 <p class="text-center">I am centered text</p>

… o bloque central

 <div class="center-block">I am centered text</div>

no .center o <center>

2. Al cambiar el tamaño de fuente

Si necesita fuentes más pequeñas o más grandes, puede usar una de estas clases:

 <p class="lead">I'm bigger paragraph text.</p>

 <p class="small">I'm smaller paragraph text.</p>

En caso de que necesite encabezados más grandes o más pequeños, no se olvide de .h1 , .h2 , .h3 , .h4 , .h5 , .h6 , .small . Úsalo así:

 <h1 class="h2">Smaller Title with .h2</h1>

 <h3 class="h1">Bigger Title with .h1</h3>

 <h4 class="small">Smaller Title with .small</h4>

3. Al despejar flotadores o forzar elementos a autolimpiar a sus hijos

No es necesario crear clases como .clear, siempre puede usar .clearfix de Bootstrap en su lugar.

 <div class="clearfix">...</div>

4. Al matar los márgenes de clase .row

Simplemente use .clearfix en lugar de definir sus propios estilos (o peor aún, use estilos en línea):

 <div class="clearfix">...</div>

5. Al desestilizar o insertar listas desordenadas y otros elementos

Elimine el estilo de lista predeterminado y el margen izquierdo en los elementos de la lista. Esto solo se aplica a los elementos de la lista de elementos secundarios inmediatos. En caso de que necesite aplicar lo mismo para las listas anidadas, también deberá agregar el nombre de la clase en ellas.

 <ul class="list-unstyled"> <li>...</li> </ul> <ul class="list-inline"> <li>...</li> </ul>

De manera similar, para casillas de verificación o botones de radio, tenemos .checkbox-inline y .radio-inline .

Y siempre puede agregar .form-inline a sus formularios (que no tiene que ser un <form> ) para controles alineados a la izquierda y de bloque en línea.

6. Al dimensionar los botones

¿Te apetece botones más grandes o más pequeños? Agregue .btn-lg , .btn-sm o .btn-xs para tamaños adicionales.

7. Al flotar y alinear elementos a la derecha o a la izquierda

Haga flotar un elemento a la izquierda o a la derecha con una clase. Se incluye !importante para evitar problemas de especificidad. Las clases también se pueden usar como mixins con cualquier preprocesador CSS.

Utilice .pull-right , .pull-left , .text-right , .text-left en lugar de .right , .left , .left-float , .right-float .

 <div class="pull-left">...</div> <div class="pull-right">...</div>

Realinee fácilmente el texto a los componentes con clases de alineación de texto.

 <p class="text-left">Left aligned text.</p> <p class="text-right">Right aligned text.</p>

No personalice los archivos principales de Framework directamente

Cuando trabajé en grandes proyectos, descubrí que la mejor manera de usar el marco de trabajo de manera efectiva es construir a partir de él y no personalizar sus archivos principales directamente. Este concepto es similar a otras plataformas y bibliotecas que podría usar para el proyecto.

Sin embargo, si está creando un sitio pequeño y tiene una maqueta de diseño que podría no requerir muchos cambios o actualizaciones, es posible que la personalización del marco para sus necesidades sea una mejor opción. Por ejemplo, es posible que desee eliminar todo lo que no necesita directamente en los archivos del marco, o puede ir a la sección de personalización del sitio de Bootstrap, donde puede configurar fácilmente todos los componentes, variables y complementos de jQuery para obtener su propio versión propia. En este caso, puede acelerar el desarrollo de su sitio y reducir el tiempo de diseño o el manejo de anulaciones.

Sin embargo, si está comenzando o trabajando en un sitio grande con varios desarrolladores o más, es mejor mantener las cosas separadas y bien organizadas. Mueva los archivos del marco fuera de la carpeta CSS personalizada principal y manténgalos en una carpeta que no sea de edición y elimine el CSS no utilizado utilizando los complementos Grunt o Gulp grunt-uncss o gulp-uncss. Otra alternativa para mantenerlo separado es servirlo a través de CDN. Tener el código del marco separado e intacto le brinda una opción mejor y más rápida al actualizarlo a la última versión. También ayuda a minimizar una serie de problemas de escalabilidad y estilo, o la ralentización al realizar adiciones con cambios rápidos y continuos en la interfaz de usuario.

Utilice herramientas de andamiaje como Yeoman o Slush, y administradores de paquetes como Bower, Python's pip, Node's NPM o Ruby Gems, ya que están haciendo mucho más que agregar archivos a la ruta de su aplicación. Realmente aprecio el poder de Bower: definitivamente puede hacer un poco más que simplemente descargar uno o dos archivos. Usar un administrador de paquetes es una buena idea, ya que lo más probable es que la complejidad de su proyecto crezca y la cantidad de complementos de terceros y la forma en que los mantiene se volverán locos y consumirán mucho tiempo. Bower lo ayudará a realizar un seguimiento de cada complemento y sus dependencias, incluido todo lo relacionado con Bootstrap.

Utilice los recursos de Bootstrap disponibles para el desarrollo de aplicaciones

Con la popularidad de Bootstrap viene una gran cantidad de recursos útiles: artículos, tutoriales, complementos y extensiones de terceros, plantillas, creadores de temas, etc. Entonces, ya sea que esté buscando inspiración o fragmentos de código, tendrá todo lo que necesita para acelerar su progreso.

Uno pensaría que al tener tantos recursos disponibles, todos los aprovecharían y utilizarían a través de sus proyectos, pero créanlo o no, ese no es el caso. Algunos desarrolladores pierden el tiempo y ralentizan el progreso del proyecto omitiendo algunos fragmentos de código o recursos excelentes. Aunque no debe simplemente copiar y pegar a ciegas, debe comprender las partes buenas y adaptarlas a su estilo de codificación y necesidades técnicas. La capacidad de encontrar y clasificar buenos recursos y poder utilizarlos de manera efectiva también es una habilidad y requiere años de experiencia y conocimiento.

A continuación encontrará una lista de recursos útiles para comenzar:

Plantillas, temas y complementos

Temas oficiales de los creadores de Bootstrap: themes.getbootstrap.com.

Marketplaces con plantillas y temas premium de Bootstrap: wrapbootstrap.com, themeforest.net, creativemarket.com/themes/bootstrap.

Plantillas y temas gratuitos de Bootstrap: startbootstrap.com, www.bootstrapzero.com, shapebootstrap.net/free-templates.

“The Big Badass List”: una lista de 319 recursos útiles de Bootstrap: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

AngularJS

BootstrapUI escrito en AngularJS puro por el equipo de AngularUI.

ReaccionarJS

React-Bootstrap es una biblioteca de componentes frontales reutilizables. Obtendrá la apariencia de Twitter Bootstrap, pero con un código mucho más limpio, a través del marco React.js de Facebook.

Django

Integración de Bootstrap 3 con Django: https://github.com/dyve/django-bootstrap3

jekyll

Jekyll-Bootstrap es un andamio de blog completo para blogs basados ​​en Jekyll.

WordPress

Tema de inicio de WordPress Sage con un moderno flujo de trabajo de desarrollo front-end. Basado en HTML5 Boilerplate, gulp, Bower y Bootstrap.

Diseño de materiales

Material Design for Bootstrap es un tema para Bootstrap 3 que le permite usar el nuevo Google Material Design en su marco de interfaz de usuario favorito.

Conclusión

Bootstrap es uno de los mejores marcos disponibles que le ofrece muchas herramientas y recursos excelentes para acelerar y acelerar el proceso de desarrollo de su aplicación.

Le ahorra muchas horas/días de trabajo al diseñar y codificar una interfaz de usuario increíble. Cada componente y complemento está completamente documentado con ejemplos en vivo y bloques de código para facilitar el uso y la personalización. Muchos desarrolladores lo recomiendan encarecidamente y es muy popular tanto para la creación de prototipos como para la producción. Es una muy buena herramienta para crear sitios web adaptables a dispositivos móviles. Bootstrap le brinda un excelente punto de partida para muchos tipos de proyectos, la opción de entregárselo a un diseñador y decir "¡haga que esto se vea elegante!" sin que ellos necesiten hackear su camino a través del código. Lo que es más importante, le permite desarrollar la estructura primero y abordar las fuentes, los colores y los estilos elegantes más tarde. Tómese el tiempo para estudiar lo que puede hacer y sea inteligente sobre cómo usarlo de la mejor manera para que pueda llegar a donde quiere más rápido.