grid
A simple guide to responsive design.
Made by Adam Kaplan.
A simple guide to responsive design.
Made by Adam Kaplan.
We want our websites to be useable on all devices by responding to the user’s behavior, screen size and screen orientation.
As of 2013, there are thousands of different devices and screen sizes that browse the internet, so it's impossible to design layouts to target them all. Instead, we must take a more fluid approach to design.
Place in the <head> of your HTML. This enables use of media queries for cross-device layouts.
It's important to understand the basics, like how elements are generated and behave in the browser, before diving into responsive web design. The CSS Box Model consists of four distinct parts.
The content of the box, where text and images appear.
Clears an area around the content.
A border that goes around the padding.
Clears an area around the border.
Place at the top of your CSS file. The * will target all elements on the page.
What was once a bug is now widely used CSS property. It basically means you can choose whether or not to include borders and padding in the width of your content.
Margin, borders and padding are drawn outside the set width of your content.
Borders and padding are drawn inside the set width of your content. The margin is drawn outside.
A container holds all elements and controls the page's maximum width. Using a container will make designing for responsive easier!
A column is a class used for stacking content horizontally. The first margin is removed using the
pseudo-class first-child.
Add size classes to columns to create a reuseable grid system.
Columns are wrapped in rows to prevent other elements from stacking next to them, otherwise know as clearing
issues. Rows are cleared with either a clearfix or overflow: hidden. This clearfix was
created by Nicolas Gallager:
If the browser's screen size is within a set range, a media query will replace the CSS the browser uses. This is the bread and butter of responsive web design.
By following these simple steps, you are on the path to responsive web design mastery. Keep practicing and help make the web a better, more useable place.