SMACSS and Responsive Web Design
Responsive Web Design
Responsive Overview
Responsive websites are about how do build websites that are suitable for all users regaurdless of the platform they are on.
Responsive vs. Adaptive vs. Mobile
- Responsive: react quickly and positively to any change
- Adaptive: easily modified for a new purpose or situation
Flexible Layouts
Responsive web design is broken down into three main components
- flexible layouts
- media queries
- flexible media
Flexible layouts is the practice of building the layout of the website wit a flexible grid capable of resizing to any width.
Flexible Grids are built using relative length units, most commonly percentages or em units. These relative lengths are then used to declare common grid property values such as width, margin, or padding.
Media Queries
There are a couple different ways to use media queries, using the @media rule inside of an existing style sheet, importing a new style sheet using the @import rule, or by linking to a separate style sheet from within the HTML document.
All About Floats
What’s A Float?