Leyendo en otro foro He encontrado el mundo de CSS Frameworks. El que he estado buscando específicamente es BluePrint. Me preguntaba si alguien más se había encontrado con los marcos de CSS, sugirió cuál es el mejor y si vale la pena el esfuerzo.¿Cuál es el mejor marco de CSS y vale la pena el esfuerzo?
CSS 'frameworks' no tienen ningún sentido.
CSS no es como JavaScript, donde puede incluir una biblioteca/marco base y luego llamar a funciones y objetos para realizar trabajos de alto nivel. Todo un marco CSS puede proporcionarle reglas declarativas: algunas cosas predeterminadas de la regla de navegación del navegador, algunos estilos de clase a los que se debe forzar el autor de su página y reglas de diseño con 'flotante' y 'claro'. Puedes escribir eso en unas pocas líneas de CSS por ti mismo en lugar de tirar en la infinidad de cien reglas marco.
Las cosas del "diseño de cuadrícula" en particular se remontan a los viejos tiempos malos de mezclar su presentación en su marcado. 'div class = "span-24"' no es mejor que una tabla, tendrás que volver allí y cambiar el marcado para afectar el diseño. Y todos los marcos que he visto se basan en cajas flotantes de píxeles fijos, lo que hace imposible crear un diseño líquido accesible en una amplia gama de tamaños de ventana.
Es una creación al revés, de uso exclusivo para alguien demasiado asustado como para escribir una regla de CSS.
Por lo tanto, nadie ha respondido a esta pregunta (aunque he visto algunos votos favorables), así que voy a tratar al menos de abordar la segunda pregunta en este aviso.
Los marcos de CSS son geniales; como cualquier otro marco, reducen el tiempo de desarrollo y le permiten trabajar inmediatamente en el diseño y CSS específicos del sitio. Piensan en decisiones difíciles, por lo que no es necesario.
Desafortunadamente, hay dos inconvenientes a la utilización de un marco (en general):
El marco dicta la estructura general y la mecánica de su código CSS. Ahora, no estoy hablando de un restablecimiento de CSS (estos son útiles por derecho propio, pero no son verdaderos frameworks); Estoy hablando de un marco honesto a bueno, que ya ha tomado las decisiones sobre qué etiquetas semánticas vas a usar en tu documento, etc. Como tal, te vuelves dependiente del marco, y cuando hay un error en el marco, lo más probable es que tenga que arreglarlo usted mismo.
Los marcos no son una excusa para no tener en cuenta los problemas de CSS entre navegadores y avanzados. Siempre se encontrará con ellos, del mismo modo que trabajaría con un marco PHP o JavaScript. Y necesitas saber cómo tratar con ellos. Hay un dicho común que primero debe escribir su propio marco, antes de usar el de otra persona.
Echando un vistazo rápido a Blueprint, realmente no lo llamaría un marco; tal vez un reinicio con algunos extras extras en la parte superior.
He mirado en BluePrint y algunos otros y la única CSS 'marco' que recomiendo es YUI Grids
Pros:
Contras:
Como otros han publicado, no hay 'marcos' reales para CSS. Las hojas de estilo Reset también ayudan mucho con el diseño. Normalmente me quedo con una hoja de estilo de restablecimiento y voy desde allí. Pero si no tienes mucha experiencia en CSS, YUI Grids podría ahorrarte algo de tiempo.
Matt Raible de la fama de AppFuse tuvo un concurso de CSS Framework hace un tiempo para desarrollar CSS Frameworks para AppFuse. Los resultados están publicados here. Hay algunas variaciones y he usado algunas porque uso AppFuse y las encuentro muy buenas.
Debo añadir que estos marcos de CSS funcionan bien porque se usan en aplicaciones temáticas. Es decir, si te apegas a las reglas, cambiar de una a la siguiente es tan simple como cambiar un valor en un archivo de propiedades.
De hecho, pasé una buena parte de las últimas 24 horas investigando esto por mi cuenta, je. Mi conclusión fue que un buen reinicio (utilicé YUI Reset), y tal vez algo más para establecer cosas básicas (YUI fonts valió la pena en mi caso, tal vez los "extras" de BluePrint estarían en el tuyo) es una buena idea. Pero, un "marco" --- que es generalmente algo así como YUI grids --- es demasiado restrictivo, lo que obliga a usar sus nombres de clase, identificadores, etc. y rara vez se ajusta a su sitio como lo haría CSS hecho a mano.
Así que en resumen: los reinicios parecen bastante agradables; es bueno eliminar todas las variaciones en, por ejemplo, margen-vs-relleno para listas, o espaciado de párrafos, o lo que sea. Pero eso es todo lo lejos que lo tomaría.
Creo que CSS se trata de simplicidad. El objetivo es tener uno o dos lugares para verificar cuando hace referencia entre el HTML y su hoja de estilo. Agregar más líneas, y especialmente las líneas que no escribiste y con las que probablemente no estés familiarizado, aumentarán exponencialmente la complejidad y la volatilidad del código CSS.
Sugeriría sus diseños a medida que los escriba y desarrolle un sistema de plantilla genérico a partir de eso. Si bien me encanta hacer CSS más modular, a menudo y dependiendo del diseño, su CSS puede ser muy específico de cada caso y no modular en absoluto.
He usado Blueprint en algunos sitios únicos y definitivamente ahorró tiempo, principalmente en las pruebas entre navegadores.
Definitivamente apesta agregar código de presentación a su marcado, aunque en el lado bueno es legible. Aunque me encanta el concepto de "puedes rediseñar sin tocar el marcado", si estás produciendo un sitio donde eso no va a suceder de todos modos y solo lo necesitas hacer ayer, Blueprint es algo a mirar.
También hay desventajas en qué tipos de diseños puede crear. Si alinea el sitio desde el principio en una grilla estricta, será mucho más fácil transponerlo al marco con un mínimo de alboroto.
He utilizado BluePrint con mucho éxito en un sitio (podría mencionar el sitio aquí, pero estoy seguro de que la publicación se marcará como spam). No estoy seguro de si voy a usarlo en el futuro, porque una de las ideas de CSS que pensé era no tener la lógica de diseño codificada. No debe tener elementos CSS llamados span-24 y span-12 para definir el diseño, sino algo como searchBox y mainContent. Al menos así es como lo veo.
Tómese el tiempo para estudiar y comprender (¡realmente entiendo!) Algunos marcos CSS como BluePrint y YUI, y restablecimientos de CSS como los de Eric Meyer. Luego, tómese el tiempo para armar su propio restablecimiento y/o marco basado en sus métodos de trabajo y el tipo de sitios que construye.
Personalmente, utilizo la mayor parte de la restauración de Eric Meyer con algunas clases y reinicios propios, además de algunas ideas de BluePrint y YUI.
Hace poco vi a Eric Meyer hacer una presentación sobre CSS Frameworks en la que hizo la pregunta: "¿cuál es la correcta para mí?" Luego respondió la pregunta mostrando una diapositiva en blanco. Su punto era que ciertamente hay algunos conceptos útiles integrados en la mayoría de los restablecimientos y marcos, pero el que mejor se adapte a ti es el que escribes para ti (vale la pena el esfuerzo).
Buenas ideas, investigaré eso. –
¡Probablemente la mejor respuesta hasta ahora! –
He usado BluePrint y YUI pero siempre me frustran algunos de los nombres que le dan a sus identificaciones y clases.
Para cada uno, pero prefiero hacer las cosas desde cero, pero después de un tiempo se desarrolla un proceso en el que utilizará su trabajo previo y lo aplicará a nuevos proyectos y solo hará algunos ajustes para que el sitio web de la forma en que te gustaría.
Asegúrate de utilizar una buena convención de nombres, por si acaso alguien más en el camino entra a editar el CSS, entonces tendrán una buena idea de a qué se refiere cada nombre de estilo.
No lo he usado, pero creo que emastic puede ser una buena alternativa que merezca la pena. es similar al anteproyecto en el alcance, pero también admite diseños elásticos (de ahí el nombre) y puede especificar valores en px, em o% e incluso mezclarlos.
Compass es un marco CSS real en el sentido de que le proporciona no solo plantillas (tanto YUI como blueprint), sino también construcciones reutilizables y declaraciones de nivel superior sin dejar de darle la sintaxis de CSS conocida.
buen enlace que he encontrado: Top 12 CSS Frameworks and How to Understand Them
Aquí está mi blog sobre CSS marcos When to use CSS framework?
Por qué 'marcos' el uso de CSS?
Si está presionado por el tiempo.
Si no sabe css, y no conozca a alguien que pueda escribirlo para usted.
Si no está excesivamente precioso sobre normas, etc.
Sé que los programadores que han sido muy feliz de usar modelo o 960, ya que les permite poner juntos un diseño por su cuenta, sin recurrir a un desarrollador front-end. Esto es ideal para proyectos personales o startups con recursos limitados.
Si ya tienes un buen conocimiento de CSS, entonces presumiblemente ya tienes una buena biblioteca de diseños de stock, por lo que es evidente que no necesitarás un marco.
Sin embargo, si usted es un principiante y solo necesita poner en marcha algo, entonces puede recurrir a un marco, ya que simplifica el diseño básico y aborda la compatibilidad del navegador también.
Habiendo dicho todo eso, muchos frameworks listos para usar hacen uso de algunos nombres de clases horribles, etc. Conozco algunos sitios web que han tomado un framework como punto de partida y luego lo han personalizado con su propia clase y etiquetas de identificación . Pero claramente también hay un poco de trabajo involucrado en esa reescritura. Usar algo como Compass, como se mencionó anteriormente, ayuda a evitar eso.
Por lo tanto, marcos CSS: pueden ahorrarle tiempo, a costa de la semántica. También pueden dañar su conocimiento de CSS, pero eso depende más de cuánto invierta en el aprendizaje del tema en general. Ya sea que los uses depende de ti.
La única forma que conozco de utilizar un marco CSS y conservar el marcado semántico es utilizar una abstracción de nivel superior. Por el momento, Compass es el único que conozco que es lo suficientemente maduro como para usarlo, pero Nicole Sullivan parece estar haciendo algunas cosas interesantes con su proyecto "Object-Oriented CSS".
Encuentro el uso inteligente de Compass de las mixins de Sass para ser brillante, y un gran paso hacia el Santo Grial de las marcas semánticas mantenibles. No creo que me gustaría utilizar un marco como Blueprint o YUI sin una abstracción como Compass para mantener las clases de presentación fuera del marcado.
Por cierto, hay un marco de CSS muy atractivo llamado Elastic que se ve lo suficientemente bien como para considerar agregarlo a Compass.
Algún tiempo después, habiendo pensado más sobre esto: creo que los marcos de CSS como Blueprint a menudo están ladrando el árbol equivocado. Las abstracciones de CSS * como Compass, sin embargo, son * esenciales * para el trabajo serio de diseño web. CSS es demasiado limitado para realmente lograr para lo que fue diseñado (separación de marcado y presentación) sin un poco de ayuda. Compass proporciona esa ayuda. (Quizás otras bibliotecas también lo hagan, pero Compass es el único que conozco). –
Más tarde: ahora creo que no necesitas necesariamente Compass. Lo que * necesitas * necesitas es Sass. Las abstracciones que proporciona Sass son extremadamente potentes y hacen que CSS sea manejable, como expliqué en mis publicaciones anteriores. –
Brújula Creo que es increíble. Asegúrate de ver el screencast.
Estoy usando 960.gs para algunos sitios web y me parece muy simple y fácil y vale la pena el esfuerzo. Me ahorra mucho trabajo en el diseño. Asegúrese de comprobar el generador de CSS personalizado que se va con el ancho fijo de 960 píxeles.
Debería preguntarse qué tan efectivos son los marcos disponibles para resolver sus problemas. ¿Cumplen con tus requisitos?
Al usar un marco, puede establecer algunas reglas o detalles a nivel de píxel y dedicar el resto de su tiempo a la implementación y producción. Es un impulso masivo a la productividad. Si se encuentra gastando tiempo ajustando las cosas unos pocos píxeles al final del proyecto (micro administrar el diseño), es una señal de que un marco puede ser útil.
Consejo # 17 en The Pragmatic Programmer dice: "Programa cerca del dominio del problema".Usar una capa de abstracción puede acercarlo a la solución de los problemas reales del diseño. Por ejemplo: es posible que pueda concentrarse en mejorar la experiencia del usuario con el tiempo adicional que tiene en lugar de pequeños ajustes de píxeles.
Esto no quiere decir que debe sacrificar calidad por cantidad. Se trata de eficiencia.
En un proyecto reciente, hice mi propio marco porque teníamos recursos muy limitados y los marcos populares no hacían lo que yo quería. Luego, configuré los PSD del equipo de diseño para ajustarlos a la misma grilla que desplegué.
Un marco no tiene que ser una implementación particular de CSS. No tiene que ser algo abultado que hayas descargado del interweb o algo que implemente ideas obsoletas. Es solo una técnica para hacer un trabajo. No me sorprendería que algunos codificadores ya tengan sus propios marcos y ni siquiera lo sepan. De hecho, si considera el DOM como un conjunto de elementos predeterminados que extiende con CSS, entonces ese es un marco por definición.
Creo que this video presentation por el CEO de Site Point Kevin Yank responderá a su pregunta. Realmente recomiendo mirarlo.
Compass le permite cambiar el nombre de las clases y los identificadores de su infraestructura con sus propios nombres semánticos, por lo que es posible que desee comprobarlo. También proporciona acceso a cosas que simplemente no obtienes con CSS simples como mixins.
Estoy sorprendido por los llamados "expertos en CSS" que critican estas herramientas sin realmente haberlas extraído y utilizado. ¿Son esenciales? No. Si te gusta tu propio marco (si tienes uno propio, ¿verdad? Un marco de CSS es solo una biblioteca cuidadosamente definida, todos deberían usar uno) y luego, de todos modos, sigue usándolo. Nadie te está forzando a utilizar otros marcos y no veo a las personas que usan frameworks decirles a los puristas de CSS que están "haciendo las cosas mal".
Criticar los marcos desde ese punto de vista solo revela una inseguridad así como una ignorancia. Por ejemplo, la idea es risible que una persona use una herramienta como Compass sin saber CSS. Te das cuenta, ¿verdad, que un marco generalmente no escribe todo tu CSS para ti? Todavía puede salir y escribir su propio CSS dentro del contexto de la mayoría de los marcos. De hecho, si no conoce CSS, puede frustrarse rápidamente.
Para mí, aprecio tener un marco porque ya está documentado, probado por cientos de otros usuarios, y puedo aplicar mis propias clases y mis id. A través de Compass. Si necesito algo para lo que el marco no es adecuado, entonces codificaré el mío.
echa un vistazo a http://www.ez-css.org/. uno de los marcos de css más fáciles y ligeros para trabajar. :)
Craig,
Compass es lo que está buscando: le permite cambiar los nombres de clases CSS Blueprint como "lapso de 24" con sus propios nombres. También expande la funcionalidad de CSS con variables y mixins. Verdaderamente, aquellos que juzgan prematuramente los marcos sin haber examinado Compass están "perdiendo el sentido". Es algo así como esas personas que nos dijeron hace años que nos falta el punto al usar CSS en lugar de tablas HTML para nuestros diseños.
-Matt
echar un vistazo para esta demo: http://www.richstyle.org/demo-web.php Este marco se basa en la idea de que "las etiquetas HTML deben ser lo suficientemente". Creo que la reutilización es el factor más importante para elegir un componente de software, incluido un marco web. Para desarrolladores de frameworks web, mientras más se comprometa con los estándares, más garantía de reutilización.
No has visto la brújula, entonces. Eso es exactamente lo que es. http://acts-as-architect.blogspot.com/2008/11/introducing-compass.html – Dustin
Estoy de acuerdo. Solo uso un restablecimiento de css y desarrollo mis propios estilos pertinentes para la aplicación. –
Estoy mirando la brújula ahora, o más bien sass, ¿o es haml? De todos modos, es una locura. Es suficiente como CSS para ser tan difícil de aprender, y lo suficiente como para ser molesto si ya conoces CSS. – AmbroseChapel