Tenga en cuenta que se trata de diseño mucho más que de desarrollo.
Construyo sitios desde cero con CSS y HTML completamente escritos a mano.
Conozco plantillas css preconstruidas como Bootstrap o HTML5 Boilerplate desde hace algún tiempo. Los he mirado brevemente en el pasado, pero nunca salté a usarlos para nada. No tengo problemas para restablecer CSS, incluir javascript cuando sea necesario o configurar las ventanas gráficas.
Esta tarde, codifiqué una página HTML5/CSS básica. Nada realmente trascendental en términos de diseño. Simplemente un punto de partida. Luego decidí darle un giro a Bootstrap con el mismo diseño. Es una página bastante estándar de 960px, 3 columnas con imagen de héroe.
Mientras alteraba Bootstrap, se me ocurrió que el 80% o más de mi tiempo lo dedicaba a aprender qué clase o identificación se aplicaba a algo, y luego encontrar eso en el CSS para ajustarlo. Quedó claro que Bootstrap no me iba a ahorrar tiempo en absoluto. De hecho, Bootstrap aumentaría en gran medida los tiempos de producción debido al *CSS excesivamente modelado.
*( por "demasiado plantilla" quiero decir que hay una gran cantidad de CSS que probablemente no usaría para ningún sitio web determinado. No es que haya CSS innecesario en general ) .
Entiendo que si estuviera familiarizado con Bootstrap estaría familiarizado con los nombres de clase/id y la ubicación general en las hojas de estilo. Por lo tanto, estoy dispuesto a ceder un poco en el tiempo que me estaba tomando, dándome cuenta de que parte de eso se debió a mi propia falta de familiaridad.
Sin embargo, no puedo evitar preguntarme si Bootstrap et. Alabama. son meras muletas que están paralizando a los diseñadores alimentándolos con cuchara con su propia marca de código. Por lo tanto, asegura una base de consumidores que dependerá completamente de una solución de terceros y su funcionalidad para todo, o al menos para la mayoría. Me recuerda a aquellos que solo pueden diseñar un sitio web si pueden usar Dreamweaver. Y Dios no lo quiera si no tienen acceso a Dreamweaver y se necesita un cambio.
Cuando construyo un sitio, uso mi propio conjunto de nombres de clase e ID estándar. Estructuro CSS como es intuitivo para mí. Tengo mi propio conjunto de plantillas preconstruidas para una configuración rápida. Por lo tanto, cualquier sitio que construyo puedo editarlo con bastante rapidez. El uso de cualquiera de los paquetes front-end preconfigurados simplemente significa que necesito aprender sus convenciones de nomenclatura y su estructura en lugar de depender de los míos.
Las ventajas suelen ser principalmente:
Si necesita crear una cuadrícula, y la cuadrícula que necesita crear se ajusta al marco CSS preconstruido, entonces la lógica es que está a mitad de camino usando el marco.
Dicho todo esto, tiendo a estar de acuerdo contigo. Los marcos CSS, en mi humilde opinión, son como plantillas de diseño visual en el sentido de que si cumplen el 90% de su objetivo, son geniales, pero si no lo hacen, entonces dedicará mucho más tiempo y esfuerzo a modificar el valor predeterminado en lugar de solo construir. tu propio desde cero.
APÉNDICE:
Debo agregar un beneficio potencial más:
En un entorno empresarial, donde puede tener varios desarrolladores front-end y el proyecto puede abarcar varios años con varios equipos diferentes de desarrolladores front-end, tener un marco de capa de presentación subyacente documentado puede ayudar.
Eso no quiere decir que su propio marco construido en casa no pueda documentarse, es solo que la documentación a menudo no es una prioridad.
Estoy familiarizado con HTML5 Boilerplate, pero estoy más familiarizado con Bootstrap, así que hablaré sobre eso. Recuerde que ambos están orientados a dos tareas diferentes (H5BP es una plantilla normalizada receptiva, Bootstrap es una colección de widgets HTML/CSS/JS y una cuadrícula receptiva). De hecho, se pueden usar juntos .
Sin embargo, no puedo evitar preguntarme si Bootstrap et. Alabama. son meras muletas que están paralizando a los diseñadores alimentándolos con cuchara con su propia marca de código. Por lo tanto, asegura una base de consumidores que dependerá completamente de una solución de terceros y su funcionalidad para todo, o al menos para la mayoría. Me recuerda a aquellos que solo pueden diseñar un sitio web si pueden usar Dreamweaver. Y Dios no lo quiera si no tienen acceso a Dreamweaver y se necesita un cambio.
La analogía falla aquí porque tiene acceso completo a la fuente de Bootstrap. Si no te gusta cómo funciona algo, puedes cambiarlo. Para mí, es lo opuesto a una muleta: puedes usar el código fuente para aprender técnicas CSS.
No estoy de acuerdo en que "diseñar un sitio web" deba estar tan cerca del metal más de lo que creo que los codificadores de C deben tener un conocimiento íntimo del lenguaje ensamblador. Aunque incluso esa analogía falla porque ajustar HTML/CSS es simplemente una cuestión de extender los selectores y agregar lo que necesita.
¿Alguien puede ensalzarme las grandes virtudes de sistemas de plantillas como Bootstrap o HTML5 Boilerplate?
La característica principal de Bootstrap, para mí, es el estilo de widget consistente y fácil de aplicar y los componentes de Javascript. ¿Quieres que un enlace parezca un botón? Agregue una clase '.btn'. ¿Quieres una mesa? Agregue una clase '.table'. ¿Quieres un elemento de navegación? Configure una lista desordenada y agregue clases de navegación.
Los menús desplegables, popovers, alertas, etc. se agregan fácilmente a los elementos con atributos de datos. Bootstrap incluye un conjunto de iconos de muy buen aspecto que se pueden integrar fácilmente en los widgets.
¿Qué los hace valiosos para ti?
¿Simplemente está familiarizado con el sistema que utiliza para poder navegar fácilmente o todavía tiene que buscar artículos?
Una de las mayores características de Bootstrap es su excelente documentación . Puedo navegarlo fácilmente y los selectores css son intuitivos y fáciles de recordar.
¿Podrías construir un sitio sin ellos si tuvieras que hacerlo?
Sí, pero claramente es más trabajo. Puedo concentrarme en UX y diseños de prototipos rápidamente con widgets terminados de buen aspecto y funcionalidad consistente.
<i>
elemento para "iconos" es bastante terrible. Nombres de clase no semánticos. clasitis. Uso de píxeles para tamaños de fuente. Realmente, podría seguir y seguir. Literalmente van en contra de todas las mejores prácticas sobre las que todos han estado predicando durante la última década.<i>
elemento fue una mala idea, por eso dejaron de hacerlo con la versión 3. Sí, la cuadrícula no es semántica, pero no tiene que usarla, o puede usar LESS/SASS para preprocesar la suya selectores semánticos con los estilos de cuadrícula. Hay mucha discusión sobre por qué se eligieron px/em. Con la forma en que los navegadores modernos escalan las páginas web, el problema no es tan sencillo como solía ser. Cada marco CSS requiere estilos anulados, lo cual es una buena razón para usar preprocesadores CSS.Lo bueno de los sistemas y marcos de plantillas es que pueden ahorrarle mucho tiempo si trabaja como ellos quieren. Entonces, con Bootstrap, una vez que aprende su semántica para hacer un carrusel JS, es casi criminalmente simple de implementar. Además, Bootstrap parece volverse mucho más simple si lanza el suyo propio antes de comenzar o usa algo como bootstrap-sass en Rails para cambiar esas variables sobre la marcha; te evitará cambiar todo más tarde.
DA01 habla sobre la consistencia del navegador... ese es un factor importante para mí. Es por eso que uso jQuery a pesar de que muchas personas en SO le recordarán que agregar una biblioteca grande solo para hacer algunas cosas es una pérdida de recursos. Sé que cuando uso jQuery, funcionará en un determinado conjunto de navegadores, por lo que, aunque probablemente pueda lograr una solución más liviana por mi cuenta, me resultó más beneficioso aprender cómo jQuery quiere que escriba. JavaScript y luego hacerlo a su manera.
Al final, tiendo a encontrar marcos HTML/CSS restrictivos; Soy lo suficientemente fanático del control que todavía me gusta codificar a mano cuando puedo. Pero respeto el hecho de que las personas más inteligentes y avanzadas que yo dedicaron mucho tiempo a configurar estas plantillas/marcos.
He estado investigando marcos mucho el último mes más o menos. En realidad, no me he sumergido en ninguna de las soluciones, pero un par de alternativas de marco que están en mi lista son Foundation , Intuit y YAML y Base .
Lo bueno de estos es que no tienen el aspecto 'Bootstrap' y parecen animar a los diseñadores a hacer su trabajo (diseñar), mientras que ellos se encargan de la capacidad de respuesta.
Aquí hay una gran lista de marcos y más información en este artículo .
Como se mencionó, hice el trabajo preliminar de investigación, pero no comencé a probarlos, por lo que cualquier comentario que defienda cualquiera de los marcos sería útil.
Por interés, ¿alguno de ustedes trabaja en un gran equipo para una gran empresa?
Los marcos como bootstrap son fantásticos para crear un estándar de código consistente a lo largo de un proyecto, también significa que al reclutar nuevos desarrolladores, aquellos con experiencia en un marco popular ya estarán familiarizados con la sintaxis y pueden volverse productivos mucho más rápido... una gran noticia para las grandes empresas.
Además... con marcos como bootstrap, lo mantienen constantemente actualizado al admitir más tamaños de pantalla, más dispositivos y mejores funciones, para una empresa como la nuestra (donde usamos bootstrap) esto se reduce esencialmente al ahorro de dinero.
Al leer algunas de las respuestas hasta ahora, parecen tener una mentalidad muy estrecha, supongo que la mayoría de las respuestas provienen de personas acostumbradas a trabajar solas o en equipos muy pequeños y en proyectos más pequeños donde este tipo de cosas normalmente no es un problema. .
Además de lo que se ha dicho en las excelentes respuestas anteriores, otra ventaja de estas plantillas sería la coherencia entre dispositivos . Las cuadrículas integradas facilitan el diseño para cualquier sistema operativo.
Todavía prefiero escribir mi propio código, por las siguientes razones:
Familiaridad con lo que ya he escrito. Si necesito cambiar algo, sé exactamente dónde está;
Estructura centrada en el proyecto. Cada nuevo sitio/aplicación tendrá necesidades diferentes a las del anterior, por lo que es posible que los archivos y recursos deban organizarse por separado.
Vistas personalizadas para diferentes dispositivos.
A menos que esté creando una página muy restringida, terminará agregando más y más estilos a los elementos nuevos y sobrescribiendo los existentes.
Debido a que me gusta trabajar con diseños receptivos, la principal razón por la que no los usaría es porque prefiero diseñar cada paso receptivo "por separado" y como un todo. Y estas plantillas suelen funcionar con una cuadrícula más o menos rígida que no se puede modificar por completo.
La mayor ventaja es que puede experimentar con el cambio de tamaño usted mismo en lugar de solo especular cómo se verían las cosas.
Tengo un enfoque de desarrollo de "primero el contenido" en el que codifico la navegación y agrego el contenido del texto. Tiende a exponerlo a cosas que no anticipó cuando estaba en la fase de diseño.
Al usar un marco como Twitter Bootstrap, puede probar las páginas mientras aún están en diseño e incluso podría descubrir problemas de usabilidad y otros desafíos de la experiencia del usuario. Los marcos tienen muchas clases reutilizables con las que se familiarizará y le ahorrarán tiempo.
Mencionaste que codificas mucho desde cero. Cuando tengo algo que necesita ser muy personalizado o muy liviano, elijo Skeleton
Durante años, solía codificar todo a mano, pero hoy en día tiendo a usar Bootstrap. ¿Por qué hago eso?
{{ form|as_bootstrap }}
para obtener formularios con estilo de arranque, incluido el resaltado rojo en los mensajes de error, etc.Mientras alteraba Bootstrap, se me ocurrió que el 80% o más de mi tiempo lo dedicaba a aprender qué clase o identificación se aplicaba a algo, y luego encontrar eso en el CSS para ajustarlo.
Ahí es donde te equivocas. Si desea beneficiarse de Bootstrap, no debe personalizar demasiado; renuncias a la flexibilidad de tener que hacerlo y poder modificarlo todo cuando usas componentes prefabricados. No debería perder tiempo cortando o tallando tablas de madera al decorar una habitación con componentes de IKEA.
Bootstrap es bueno cuando necesita parchear rápidamente un sitio web en funcionamiento a partir de componentes prediseñados; sus componentes sobresalen como un pulgar dolorido si los coloca en sitios con diseños elegantes, por lo que generalmente dejo Bootstrap para ese tipo de proyectos.
El uso de cualquiera de los paquetes front-end preconfigurados simplemente significa que necesito aprender sus convenciones de nomenclatura y su estructura en lugar de depender de los míos.
Esa es en realidad una ventaja de usar un paquete popular. Es más fácil entregar un proyecto a otro desarrollador cuando ambos saben lo que hace "btn-group", "btn btn-large", con marcos personales tendrían que aprender sus peculiaridades (o más común, simplemente se conectarían en cascada su css con sus cambios, y sin molestarse en tratar de descifrar o modificar su código).
¿Simplemente está familiarizado con el sistema que utiliza para poder navegar fácilmente o todavía tiene que buscar artículos?
Los comunes como btn, table, row*, span*, etc. serían naturales. Pero para el html de los componentes principales, es mucho más rápido simplemente copiar y pegar de sus ejemplos en lugar de escribirlos.
¿Podrías construir un sitio sin ellos si tuvieras que hacerlo?
He estado allí, hecho eso, muchas veces.
solo son buenos para:
Personalmente, tengo mis propios métodos y no deseo seguir este camino porque ya aprendí a codificar CSS, HTML y jQuery. Veo un beneficio en esto para las personas que no tienen idea y están tratando de aprender a codificar. Habría sido bueno ver algo así hace unos cinco años. Además, como ha dicho, le llevaría más tiempo implementar esto en sus métodos de producción actuales.
EDITAR: no estoy tratando de secuestrar su hilo, pero yo también me pregunto lo mismo, pero con respecto a WordPress. He usado WordPress ligeramente, pero no sé si un marco es beneficioso. He planeado seguir el camino antiguo hasta que pueda encontrar un gran beneficio.
Bootstrap es bueno como punto de partida para un diseño receptivo. Pero en lo que respecta al diseño, creo que es bastante deficiente. Tiene su aspecto un poco 'bootstrappy', que debido a que es una plantilla se usa demasiado.
Pero debe tener en cuenta para qué se creó Bootstrap, fue para brindar consistencia a las aplicaciones internas creadas por Twitter, y si fuera a usarlo para eso, o incluso si es un desarrollador que quiere arreglar rápidamente allí web aplicación sin pensarlo mucho, tal vez como mvp o prototipo es una herramienta realmente genial.
brnnnrsmssn
scott
Horacio
scott
John
Horacio
Horacio
scott
scott