Introducción
Qué aprenderás sobre los sistemas de diseño para desarrolladores
Conoce Sistemas de Diseño populares
Instalación y flujos de trabajo
Bonus: Personalizando la Terminal
Instalación y flujos de trabajo
Instalación de Node / Express desde 0
Bonus: html, css, js
Automatización
Automatización (Pre procesadores)
Continuando con la automatización
Paradigmas
SMACSS: Arquitectura de CSS escalable y modular
OCSS: Orientación de objetos en CSS
BEM
Bonus: Bootstrap
Naming
Naming
Qué son los tokens
¿Qué son los tokens?
Espaciado
Espaciado
Grillas
Grillas
Bonus: Animando en CSS
Mi primer componente
Mi primer componente
Documentación
Documentación
Testing
Testing
Bonus: Debug en el navegador
Deploy y versionamiento
Cómo empezar en Github
Deploy y versionamiento
Design review
Design review
Cierre
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
Grillas
16/25Llegó el momento que nos pongamos rudos y definamos cómo se va a comportar nuestro sistema. Para esto necesitamos crear un sistema de columnas.
- Antes de hacerlo vamos a cuestionar si usaremos un layout al que tengamos que seguir, pues esto es bastante importante para la reglamentación de nuestro grid.
- Utilizaremos el sistema de doce columnas como lo hace Bootstrap, basados en un layout.
- Una vez definido tenemos cómo funcionan nuestras columnas, el departamento de diseño tienen que estimar cómo es que sus componentes se van a comportar y para ello este sistema les ayudara cuando estén diseñando.
- Una parte importante es que el documento de diseño como programación, siga las mismas reglas.
- Dentro de nuestro wrapper, donde definiremos el contenido construiremos los grid, podemos basarnos en librerías de grids que ya existen en internet, solo tenemos que modificar los estilos para que tengan sentido dentro de nuestro sistema.
- Hay tres cosas importantes qué definir dentro del grid de nuestro sistema:
- Nomenclatura de columnas
- Nomenclatura de los brakepoints
- Obtener los tokens de nuestro sistema para esta definición.
Aportes 16
Preguntas 0
CSS Grid Layout es el poder 😃
📂Vendors
∟animate.css
∟grid.css
∟normalize.css
wrapper = container
Y con display:grid; no es más fácil hacer esto en vez de usar estas columnas?
CSS GRID “El poder nuestro es”
Un colega de trabajo me explicaba que esta mal dicho asociar la palabra Grid = Grilla.
Mejor utilizar un termino como cuadricula, red de columnas. 👀
El tema de compatibilidad con navegadores es algo que siempre se olvida y pos aqui les dejo
https://css-tricks.com/browser-compatibility-css-grid-layouts-simple-sass-mixins/
Que buena clase
El sistema de Grillas que comparte el profesor en el curso de Preprocesadores es muy bueno.
Curso de CSS grid para entender como funciona:
https://platzi.com/clases/css-grid-layout/
También para esto sirven los frameworks como Bootstrap o Materialize, para usar sus sistemas de grid ya creados de una vez.
Gran clase
Hablando del sistema de 12 columnas:
El motivo es la mayor flexibilidad ajustada a la menor complejidad
Hay que partir del punto de que el sistema de 12 columnas se trata de una convención, no de un estándar, por lo que puede haber sistemas que funcionen con otro número de columnas porque para ellos resulte más eficiente o porque se ajusta más a sus peculiaridades.
He aquí el enlace con información mas detallada, saludos 😃
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.