Read: 01 - SMACSS and responsive web design

Responsive web design

• Web site responds quickly to change
• site changed fluently with changes in things such as viewport width

Adaptive web design

• easily modified for new purpose or situation

Mobile web design

• build separate web site for mobile

Flexible Layouts

• built with a flexible grid that adopts to different widths
• vw (viewport width), vh (viewport height), vmin (minimum of the viewport height and width), vmax (maximum of the viewport height and width)

Media queries

• The media query expression that follows the media type may include different media features and values, which then allocate to be true or false. When a media feature and value allocate to true, the styles are applied. If the media feature and value allocate to false the styles are ignored.
• logical operators in media queries
• and, not, and only

Mobile first

• it is common practice to create a website for mobile first since it is unusually less heavy, then you can add in extra media and effects when viewing on a bigger display

Floats

• Floated elements remain a part of the flow of the web page

  properties of float

• left, right, none, inherit

Clear

when “clear” is placed on an element it will not flow next to a floated element

properties of clear

• both, left, right, none