From b5a07abf51ffc004ebc28f18c401be49af0cb5fd Mon Sep 17 00:00:00 2001
From: dqnid <dani.heras@hotmail.com>
Date: Sat, 9 Sep 2023 16:48:13 +0200
Subject: [PATCH] Layout notes

---
 README.md | 35 ++++++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index bf9600d..907f9cf 100644
--- a/README.md
+++ b/README.md
@@ -69,4 +69,37 @@ Estados especiales de un selector (:hover, :link, etc.)
 
 ## SASS
 
-Preprocesador de css.
\ No newline at end of file
+Preprocesador de css.
+
+`$ live-server`
+`$ npm run compile:sass`
+
+## Bases of responsive design
+
+- Use fluid layouts
+- Use `%` instead of `px`, especially in images
+- Use `max-width` instead of `width`, especially in images
+- Use `rem` instead of `px`
+- Use media queries when the rest fails
+
+## Fluid Layouts
+
+- Float : older way of doing the same job
+- Flexbox : 1 dimensional rows
+- CSS Grid : 2 dimensional grids
+
+## Selectors
+
+- Select all the elements that starts with col-
+```css
+[class^='col-'] {
+    background-color: red;
+}
+```
+
+- Select all the elements that ends with col-
+```css
+[class$='col-'] {
+    background-color: red;
+}
+```
\ No newline at end of file