27 | 
32 |
33 |
28 |
31 | grid
29 |A simple guide to responsive design.
Made by Adam Kaplan.
32 | A simple guide to responsive design.
Made by Adam Kaplan.
32 | 
38 | We want our websites to be useable on all devices by responding to 40 | the user’s behavior, screen size and screen orientation.
41 |As of 2013, there are thousands 52 | of different devices and screen sizes that browse the internet, so it’s impossible to design layouts to target them 53 | all. Instead, we must take a more fluid approach to design.
54 |The term “mobile first” gets thrown around a lot lately. What it really means is to start with mobile 61 | styles and layer on styles optimized for larger screens only as needed. In other words, your mobile styles become 62 | the default and you no longer have to override them later. It’s much simpler!
63 |65 |70 |By assuming a flexible but simple layout by default, you can better guard against browsers—with viewports wide 66 | and small—that aren’t quite capable of the full responsive layout. So when we’re talking about layout, “mobile first” 67 | really means “progressive enhancement.”
68 | —Ethan Marcotte 69 |
76 | Introduce layout-specific rules only when you need them. Use min-width to layer complexity on your
83 | layout as the viewport widens. It’s easier to have all the media queries nearby, rather than at the end
84 | of the stylesheet or in a separate document.
Browsers will render your CSS differently. To avoid this, it’s a good idea to use a modern 95 | alternative to a reset like Normalize.css, 96 | which will render elements more consistently cross-browser. Remember to include it as-is before your stylesheet.
97 |Place in the <head> of your HTML. This enables use of media queries for cross-device layouts.
115 | It’s important to understand the basics, like how elements are generated and behave in the browser, before 122 | diving into responsive web design. The CSS Box Model consists of four distinct parts.
123 |
128 | The content of the box, where text and images appear.
130 |
134 | Clears an area around the content.
136 |
140 | A border that goes around the padding.
142 |
146 | Clears an area around the border.
148 |Place at the top of your CSS file. The * will target all elements on the page.
What was once a bug 167 | is now a widely used CSS property. It basically means you can choose whether or not to include borders and padding in 168 | the width of your content.
169 |
174 | Margin, borders and padding are drawn outside the set width of your content.
176 |
180 | Borders and padding are drawn inside the set width of your content. The margin is drawn outside.
182 |A container holds all elements and controls the page’s maximum width. Using a container will make designing for 192 | responsive easier!
193 |
202 | With mobile first, columns are block level (takes up the full width available) by default. No
210 | additional styles needed!
On larger screens, columns gain float: left in order to stack content horizontally. Columns now
241 | use padding for gutters, so you no longer need to worry about removing margins.
Columns are wrapped in rows to prevent other elements from stacking next to them, otherwise known as clearing
330 | issues. Rows are cleared using the popular clearfix, which was created by
331 | Nicolas Gallagher.
Add the class .flow-opposite to columns where you want content to display first on mobile but
366 | appear on the right on larger screens.
By following these simple steps, you are on the path to responsive 391 | web design mastery. Keep practicing and help make the web a better, 392 | more useable place.
393 |