CSS Grid Layout: lista de lecturas (Arrieros somos VII) 26.2.16
Colección de artículos. ejemplos y vídeos sobre el CSS Grid Layout para que partiendo incluso desde cero puedas comprender y comenzar a experimentar la realización de grillas o rejillas web basadas en esta novedad de CSS.
CSS Grid Layout: lista de lecturas (Arrieros somos VII)
Si aún no te has puesto con, por lo menos a comprender qué es, el "CSS Grid Layout" y cómo va a suponer toda una revolución en la forma en que se construyan las grillas (o rejillas) de una web quizás estás pecando de ingenuo y desidia.
La única razón que se me ocurre para convencerte de la conveniencia de ir conociéndolo es remitirte a lo sucedido con el flexbox: hubo quienes cuando se quisieron dar cuenta ya habían sido arrollados y lo que debió ser un camino de aprendizaje progresivo devino en un ¡corre, corre que ya es tarde!
Así que sólo para quienes quieran ir conociendo y explorando el CSS Grid Layout es esta pequeña lista de lectura (o visionado) de artículos al respecto. Lista que es mi intención ir ampliando en el tiempo.
Lista de lecturas sobre el CSS Grid Layout:
Debido a la escasa (de momento) divulgación en español sobre el tema me permito comenzar el listado con algunos de los post de este blog dedicados al "CSS Grid layout".
ARTÍCULOS
CSS Grid Layout Module Level 1
- El documento del W3c al respecto [ING]. Nada como acudir a la fuente para tener la información
técnica
sobre cualquier aspecto de la rejilla CSS. Del layout Html físico al layout Css virtual
- La diferencia entre construir el layout basado en el marcado HTML (elementos presentes en el documento) y hacerlo de forma virtual sólo en base a declaraciones CSS. Artículo en este blog.
Guía básica para comenzar a usar el CSS Grid Layout
- Explicación de la terminología y conceptos más relevantes así como de las distintas propiedades y sus valores relativas al CSS Grid Layout. Artículo en este Blog.
CSS Grid Layout: la revolución que esperas y que ya ha comenzado
- Traducción al español en este blog del artículo original [ING] de Patrick Brosset "The future of layout with CSS: Grid Layouts" en el que explica y explora las novedades y posibilidades que trae el nuevo documento del consorcio W3c que desarrolla la construcción de rejillas con puro Css.
Guía exhaustiva de colocación de elementos en el Grid Layout
- Revisión exhaustiva de los diferentes métodos proporcionados por las especificaciones del CSS Grid Layout para construir la grilla y colocar elementos en ella. Traducción al español en este blog del artículo original [ING] de Manuel Rego @regocas"
CSS Grid Layout y el módulo Box Alignment
- La construcción de la rejilla CSS se complementa con éste documento dedicado a cómo alinear unos ítems del grid con otros. El artículo original en inglés de Rachel Andrew explica y explora esta relación.
Subgrids Considered Essential
- El desarrollo del CSS Grid Layout es algo no cerrado. En este artículo Eric Meyer justifica la necesidad de incluir las subgrids y ejemplifica su uso.
Subgrids thinking out loud
- El concepto de subgrids ha sido una de las últimas novedades incorporadas a la especificación. En este artículo [ING] Manuel Rego las explica.
Performance analysis of Grid Layout
- Estudio y análisis de la carga para el navegador al conformar la página usando el Grid Layout y comparativa frente a otras vías como el Flexbox
Grid CSS (Cuadrículas)
- Artículo en español escrito por José Román, aka @Manz, sobre los conceptos principales y las propiedades que el CSS Grid Layout desarrolla.
EJEMPLOS y DEMOS de CSS GRID LAYOUTS
Grid by Example
- Sitio de Rachel Andrew dedicado en exclusiva al Grid Layout. Incluye además de cuestiones teóricas multitud de grillas CSS construidas en base al él comentadas y explicadas.
CSS Grid Layout Examples
- Más ejemplos, estos en Github.
DIVULGADORES del CSS GRID LAYOUT
Editores del W3c CSS Grid Layout
- Tab Atkins Jr. (Google)
Elika J. Etemad / fantasai (Invited Expert)
Rossen Atanassov (Microsoft) Rachel Andrew
- Rachel Andrew es una autora inglesa que tanto en su Twitter @rachelandrew como en su blog desde hace un tiempo viene dedicando su tiempo a la explicación y divulgación del CSS Grid Layout.
Manuel Rego
- Aka @regocas es un desarrollador español que desde Igalia está contribuyendo a la implementación del CSS Grid Layout en distintos navegadores y en desde su blog [ING] también publica artículos divulgativos del mismo.
Vídeos y Slides
En español | Manuel Rego - ¡CSS Grid Layout ya está aquí!
-
Sus slides CSSconf EU 2014 | Rachel Andrew: CSS Grid Layout
-
Sus slides Manuel Rego - CSS Grid Layout is Just Around the Corner
-
Sus slides
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Hola !!!
ResponderEliminarMi pregunta es bastante larga y creo que no trata sobre ningún tema que tenéis en el Blog. Pero como vosotros entendéis de esto y no sabia a quien acudir para pedirle ayuda, os escribo para a ver si me podéis solucionar un problema que tengo con la plantilla de mi blog.
Hace dos días instalé una barra con menú plegable, en la parte de arriba del blog. La instalé con un código desde la plantilla HTML y la he adaptado con un CSS.
Creo que al instalarla he borrado o tocado algo, sin darme cuenta y ahora no me funcionan (desde las entradas y desde los gadgets HTML) los botones de:
Lista numerada
1____
2____
3____
Lista con viñetas
. ____
. ____
. ____
Cita “ ( aquello para que el texto te queda de menor achura, ya me entiendes)
Bueno, no es que NO ME FUNCIONAN, es que en las entradas sí que puedo escribir con estos botones, pero luego una vez publicada la entrada o instalado el gadget no me permite verlos, vamos que no se ven o no funcionan. Y tengo en todas las entradas, los pasos de la preparación de la receta (mi blog es de cocina) separados con estos botones. Entro desde editar entrada y si están, pero en el blog en las entradas o lo que es lo mismo los lectores del blog no los ven. Me entendéis verdad ??
Como puedo solucionar esto ??
No puedo diseñar una plantilla nueva, es mucha faena. Si me podéis ayudar os lo agradeciera mucho !!!
Espero tu respuesta !!
Mi blog: Mis Dulces Joyas
El enlace: http://misdulcesjoyas.blogspot.com.es/p/pagina-principal_8.html
Gracias, un saludo !!!
Biljana
Uy... vuestra respuesta :) Saludos !!!
EliminarMucho me temo, Niljana, que no puedo prestarte otra ayuda que no sea volver a cargar la copia de seguridad de la plantilla que debiste hacer antes de modificar nada.
EliminarTambién puedes pasarte por el foro oficial de Blogger y consultar allí.
Un saludo y suerte
Gracias por la respuesta !!!! Saludos !!!!
Eliminar