advanced-css/Natours/starter

Run

$ 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-

[class^='col-'] {
    background-color: red;
}

• Select all the elements that ends with col-

[class$='col-'] {
    background-color: red;
}