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