Using a Mobile First Approach6:32 with Guil Hernandez
When you use a mobile-first layout approach with CSS, you serve the basic layout styles and minimal amount of code to style a page for a small, mobile device first. Then, using media queries, you add breakpoints which adjust the layout for wider screens and devices.
70%allows the container's width to grow and shrink with the browser window size. The
1000pxestablishes the maximum size that the growing is allowed to reach. For example, in a browser viewport that is 1400 pixels or wider, the container will always be 1000 pixels wide and will not grow any wider.
- Brad Frost - Mobile First Responsive Web Design
- Box-Sizing: The Secret to Simple CSS Layouts
- Take Control of the Box Model with box-sizing
- In theory, It's easier to build a mobile layout when you're first starting out because you don't have to worry about much of the complex features of wider, desktop layouts.
- Mobile layouts are usually simple one column layouts
- When you use a mobile-first layout approach, you define all the common layout styles before adding any media queries.
box-sizing: border-box;forces any padding and borders into the width and height of an element instead of expanding it.
Modern layouts are built with mobile devices in mind from the start. 0:00 It's easier to build a mobile layout when you're first starting out because you 0:04 don't have to worry about any of the complex feature of wider desktop layouts. 0:08 Mobile layouts are usually simple one column layouts 0:13 because of the narrow screen width on a mobile device. 0:16 This is easier than creating a complex layout on the desktop first, 0:20 then trying to figure out how to arrange it for smaller screens. 0:24 When we use a mobile first layout approach with CSS, we serve the basic layout styles 0:28 and the minimal amount of code to style a page for a small mobile device first. 0:34 Then using media queries, we add break points which adjust the layout for 0:40 wider screens and devices. 0:44 In other words, 0:46 we define all the common layout styles before adding any media queries. 0:47 You can check the teacher's notes of this video for more resources and 0:52 videos about the mobile first approach. 0:55 I'm gonna start with a really simple example of mobile first layout. 0:59 So the current styles in the CSS apply to all browsers, 1:03 from phones to desktop computers. 1:07 However, on a small screen, the 70% width of the container 1:10 makes less sense because it's going to look too narrow on the screen. 1:15 So, I should expand the container so 1:20 that it fills the smaller screen of a mobile device. 1:22 So I'm going to define one media query in my CSS. 1:26 So first I'll select and copy one of the main comment flags in my CSS and 1:30 paste it at the very bottom of my style sheet. 1:36 And I'll change the text to media queries 1:40 because this is where I'll add any media queries. 1:43 So right below the comment flag, I'm going to create a new media 1:49 query by typing @media. 1:53 Now, the mobile first approach uses the min-width media feature 1:58 since you're building the layout up from narrow screens to wider screens. 2:03 I want this media query to target any device or viewport width that's 2:08 769 pixels or wider so I'm going to set the min-width value to 769px. 2:13 The mobile first approach is the approach we'll use from this point foreword. 2:18 So throughout the course, we're going to add advanced layout styles and 2:24 overrides for larger screens inside this media query. 2:27 I'm gonna start with one simple CSS rule, so you can see the mobile first in action. 2:31 So every browser, from phones to desktop, will load the CSS outside the media query. 2:37 These are the base rules that define the common styles 2:44 shared across all screen sizes and devices. 2:48 And only those devices that are 769 pixels or 2:51 wider will load the CSS inside this media query. 2:55 So I want the container elements to be 100% wide in small screens so 2:59 they should take up the full width of the screen. 3:05 So back in my style sheet I'm going to remove the width and 3:08 margin declarations from the base container rule so 3:12 I'm going to select both declarations and cut it out of the container rule. 3:16 Then I'm going to declare them inside the media query instead. 3:22 So inside the media query I'll create a new rule that targets container and 3:25 I'll paste in the width and margin declarations inside this container rule. 3:33 And I'm also going to add a max width value of 1,000 pixels so 3:39 that the layout container does not get any wider than 1,000 pixels in larger screens. 3:43 I also want to give my layout containers left and 3:50 right padding to separate the content from the left and right margins of the page. 3:53 So I'm going to add the padding properties in the base container rule, 3:58 since they'll be shared by all screens and devices. 4:03 So I'll add a padding-left property first, and I'll set the value to 1em, and 4:06 below that I'll set the padding-right value to 1em as well. 4:14 So when I save my style sheet and take a look at my layout in the browser, 4:19 you can see that there's some nice white space around the content in small screens. 4:23 Now in a later video, we'll use the space that opens up when the viewport is 4:29 769 pixels or wider to display horizontal columns in our layout. 4:34 If I open my developer tools and inspect any of the container devs, 4:40 I can see that the left and right padding I applied to the container elements 4:46 makes the layout wider than 70% of the browser, and 4:52 it's going to make it wider than the 1,000 pixel max width I apply to the container. 4:55 Well that's because it's adding the 1em of padding on both sides to its total width. 5:01 Now I want the layout's width to be exactly 70% of the browser viewport and 5:10 the max width to be exactly 1,000 pixels. 5:15 So this is a quirky CSS box model behavior 5:19 you've seen before in previous CSS courses. 5:22 So I'm going to use the box sizing property 5:25 to prevent any padding in border width values from expanding and 5:28 possibly breaking my layout containers as I add more content to the page. 5:33 Back in my style sheet, I'm going to create a new rule 5:38 up top in my base rules using the universal selector so 5:40 that every element inherits this box sizing declaration. 5:45 In the rule I'm going to type the box sizing property and 5:49 set the value to border-box. 5:53 The value border-box forces the padding and borders into the width and 5:57 height of the elements, instead of expanding them. 6:02 So now my containers take up exactly 70% of the viewport width and 6:06 the max width will be exactly 1,000 pixels. 6:11 Now I've posted a lot of helpful articles and videos about mobile first and 6:14 the box sizing property in the teacher's notes of this video. 6:20 Up next, I'll show you how to keep the footer at the bottom of the page at all 6:23 times and remove any gaps between the bottom of the viewport and the footer. 6:27
You need to sign up for Treehouse in order to download course files.Sign up