Layout notes

README.md

@@ -70,3 +70,36 @@ Estados especiales de un selector (:hover, :link, etc.)
 ## SASS
 
 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;
+}
+```