HTML5/CSS3 classless framework

Question

¿Alguien sabe de un marco HTML5/CSS3 simple que aplica un mínimo de formato sin necesidad de nombres de clase personalizados? Idealmente, solo tomaría HTML5 correctamente distribuido y ubicaría los elementos con un mínimo de flexibilidad, utilizando reglas comunes para, por ejemplo, el ancho de la barra lateral y similares.

Con HTML5 hay mucha menos necesidad de nombres de clase personalizados, con elementos como header, nav o aside, pero aún no he visto un framwork aprovechando al máximo eso. ¿Algunas ideas?

Aclaración: He pasado por todos los sospechosos habituales (Bootstrap, HTML% Boilerplate, Shim y similares), y ninguno de ellos me rasca la comezón. Y ese picor es un combo simple de estructura plana en HTML5 que no asume nada sobre el diseño, pero lo define semánticamente, con una hoja de estilo CSS3 simple que define el diseño real. Puedo visualizarlo usando varias hojas de estilo, con una base que define el diseño de los elementos y los separa para el diseño actual. Sería utilizado como un simple punto de partida para varios proyectos, que luego podrían personalizarse individualmente.

Al parecer, puede ser que tenga que seguir el camino propuesto por Wesley y escribir una yo ...

Answer 1

Suena como lo que quiere no es un marco CSS, pero sólo una simple hoja de estilo personalizada.

No desaliente su esfuerzo en buscar algo que ya exista, pero será mejor que lo escriba usted mismo. Tal vez empezar con uno de los muchos reset.css existente. Los estilos predeterminados sin la capacidad de enganchar (o salir) a través de nombres de clase no son muy flexibles.

Realmente no deberías evitar las clases, deberías aprovecharlas. Ningún marco va a saber dónde y cómo se anidan sus elementos HTML o cómo se supone que deben verse según el nombre de la etiqueta solo, esa es una de las razones por las que solemos usar clases.

Si presta mucha atención a la semántica de los nuevos elementos HTML5, verá que header no siempre significa "la parte superior de la página con su logotipo", footer no es solo un elemento para el fondo de toda su página y aside no siempre equivale a "barra lateral".

Answer 2

Usted puede comenzar su aplicación HTML5 con la plancha de caldera de HTML5.

Dan Wahlin registró una buena entrada en el blog en conseguir que creó:

http://weblogs.asp.net/dwahlin/archive/2011/06/05/getting-started-using-html5-boilerplate.aspx

Answer 3

No tengo mucha experiencia con él mismo, pero puede encontrar Twitter Bootstrap útil. Utiliza un sistema de cuadrícula que le permite colocar fácilmente elementos en la página. Esto puede ser particularmente útil para crear áreas para barras laterales y otras funciones comunes en las páginas.

Sin embargo, es algo opuesto a lo que está sugiriendo, ya que utiliza clases bastante. Por lo que he visto, las clases se tratan de una manera muy estructurada, por lo que pueden estar cerca de lo que estás buscando.

Answer 4

https://github.com/herrshuster/style.css

Este es mi proyecto actual. Todavía no está listo para su implementación, pero es exactamente lo que está buscando. Me encantaría cualquier sugerencia que tenga o si quisiera hablar de eso. This is a test page where you can see the semantic layout

Answer 5

Para todos los interesados ​​en este tema, recomiendo la lectura de la articles by Heydon Pickering, que construyó his blog tema sin necesidad de utilizar ninguna clase.

---

También recomiendo echarle un vistazo my project que tiene como objetivo crear un fundamental classless HTML template para blogs y sitios web tipo blog (todos los sitios web con un título y un autor, con las páginas, postes y secciones) y añadir temas CSS puro en la parte superior de eso La plantilla hace un uso intensivo de las secciones, los encabezados y los pies de página de HTML5 y las pequeñas suposiciones de en qué sección debe colocar el contenido de cada sitio web. El themes son puertos de otros temas específicos del marco en Internet.

Hay un playground donde puedes probar los temas en varias páginas HTML basadas en la plantilla fundamental (solo escribe el nombre del tema en el cuadro o pega una URL CSS). También hay un bad old article que escribí mientras trataba de pensar sobre el tema.

Answer 6

me encontré con una necesidad muy similar y terminó haciendo mi propio proyecto: https://github.com/oxalorg/sakura

Sólo tiene que colocar en sakura.css y ya está bueno para ir, no hay cambios necesarios en HTML.

He aquí una demostración : https://oxal.org/projects/sakura/demo/