A while ago, I published an article explaining how grid systems work and how you can create one from scratch. I’ll like to complement that article by talking about functional CSS (Atomic CSS); you can find this approach with both names, but be careful “Atomic CSS” is not the same as Atomic design.
What the functional CSS is?
This approach consists of creating reusable and small CSS classes with only one purpose. We can create a class to change the background color, text color, paddings, etc. These are just examples; you can use your imagination to create the CSS classes appropriate for your project.
Let…
GDLJS (Talk): Grid systems and more
Pocos días después de haber escrito mi primer artículo, la comunidad de GDLS me abrió sus puertas para poder dar una quick talk de aproximadamente 20 minutos. En ella abordé algunos temas como:
- Que es un grid system
- Sus orígenes
- Funcionamiento básico
- Justificación de surgimiento
- Evolución
- Estado actual
- Cómo se construye uno
- Cuando vale la pena usarlos
Y algunos otros temas complementarios como:
- Metodologías de CSS usadas en CSS Frameworks
- Sass mixins para generar un grid system o functional CSS
- Crear un simple grid system con web component en React
- CSS grid
Grid systems
Posiblemente si estás leyendo este artículo ya sabes lo que es un grid system o por lo menos has trabajado con algún framework que tenga uno como, Bootstrap, Bulma, Tailwind, etc.
Aun así, si no sabes lo que es, te lo explico brevemente.
¿Qué es un grid system?
La traducción del idioma inglés al español sería, “Sistema de columnas”, pero ¿qué significa esto realmente?.
“In basic terms, a grid system is a structure that allows for content to be stacked both vertically and horizontally in a consistent and easily manageable fashion” — Sitepoint
Como menciona el artículo de Sitepoint, un grid system no es otra…
