New terms from treehouse – CSS Layout Techniques Part 1- Display Modes and Float Layout

Excited to start a new Deep Dive, and even more so to learn about layout techniques, as this is the part of CSS I feel like I am still most in the dark about.

Display Modes

Before planning out a page, you need to consider how a browser’s default styling might affect our layout. It may give certain elements like the body and lists certain margins and paddings by default. If you don’t reset these, the browser will use its own instead, which can lead to an inconsistency of our layout between browsers. A CSS reset is good to use because it removes most of those styles, giving you a clean slate to work from in all browsers. Below, you can see the page with normal browser styling.

Screen Shot 2014-05-31 at 4.08.13 PM

There are two common CSS reset methods used today.

  • Reset CSS – a method that zeros out every elements default browser styles. That means that for all properties like padding, margin, etc, they’re all set to zero or none. The line height and fonts are also affected. It should look exactly like it does below in every browser. You shouldn’t use all the of the reset CSS if you don’t need it – you can customize it and remove the selectors you don’t. You just copy and paste the styles on the site into your CSS.reset
  • Normalize.css – depending on the size of your project, this zeroing out might not be the best option. It may make a lot of elements unreadable, forcing you to spend time writing more CSS to produce the new default values. Normalize is more suitable for this, as a lot of the times is totally okay to leave in some of those default browser styles. It brings all browsers down to a even playing field, by leaving those useful default browser styles. However, it also styles elements with no common default styles, so it looks consistent in every browser. This is used in frameworks like Bootstrap and Foundation. You just link to it like any other CSS file. It’s pretty well split up and labeled, so you’ll know what each rule is doing and why. Once again, you can remove sections you don’t need for that specific project, or add things you do need.Screen Shot 2014-05-31 at 4.35.55 PM

Block vs inline elements – most elements are one of these by default, but you can modify that using the display property.

block level elements take up an entire line in the layout, so no elements can be positioned to their right or left.

In the example page we’re starting with, it’s missing a wrapper or main container, which are commonly used to center a layout and keep it from looking too wide or narrow, depending on the device or viewport width. There are two ways to do this. The first is using the body element as the wrapper, as the body is a container anyways. Start by giving it a width of 90%, which will prevent the layout from stretching out too wide, and setting the margin to auto will center it on the page. The advantage to this method is you don’t have to create an additional div element for our layout. However, with this method if you want to add a full background color or image, we’ll have to add it to the html element instead. This is ok, but adding a wrapper div gives you a little more control over the layout.

Screen Shot 2014-05-31 at 4.56.26 PMScreen Shot 2014-05-31 at 4.57.25 PMScreen Shot 2014-05-31 at 4.56.41 PM

Simply wrap all the content in a div, give it a class, then use that to set the width to 90% and the margin to auto.

Screen Shot 2014-05-31 at 5.02.40 PM

Now, in the normalize.css we set the body’s default margins to 0, so why is there a 24px gap above our header at the top? What we’re actually seeing here is the top margin of our h1 element. But, the h1 element is inside of its header element container, which has the green background, shouldn’t the margin show up there? This is called a margin collapsing issue. The reason this is happening here is because there’s no border, padding, content or anything to separate the top margin of the block level body element with the top margin of its first child (the main-wrapper div). If there’s nothing to separate those margins, then they collapse, which is why we’re seeing the margin for the h1 element outside of its parent element. This is also happening in the soon to be columns below.

Screen Shot 2014-05-31 at 6.13.19 PM

To fix this, give the parent element (in this case the header container) either a border or padding. In the example below, you can now see the backgrounds of the header container, the h1 and the list clearly defined.

Screen Shot 2014-05-31 at 6.16.02 PM Screen Shot 2014-05-31 at 6.16.23 PMNext, we give the h1 “logo” a display: inline. You can see it no longer takes up an entire line and we can now lay other elements next to it.

Screen Shot 2014-05-31 at 6.19.35 PM

Screen Shot 2014-05-31 at 6.18.20 PM

If you tried to set the class for the ul to display:inline as well, it wouldn’t look any different because the list items act as block level items. They’re actually set by the  browser to the list item display mode that generates a block level box. So, set the individual list items to display:inline as well. Below, I show what happens if you don’t set the ul element to inline as well, then what it looks like for both. The reason the first example still shows the list items on the second line is because the ul is still block level.

Screen Shot 2014-05-31 at 6.22.43 PM Screen Shot 2014-05-31 at 6.22.34 PM

Screen Shot 2014-05-31 at 6.24.15 PMScreen Shot 2014-05-31 at 6.24.25 PM

Next, we’ll give the h1 and the list items some padding and a border-radius to make them rounded, and give the h1 a margin-right to put some space between it and the list items.

Screen Shot 2014-05-31 at 6.27.24 PM 1 Screen Shot 2014-05-31 at 6.27.06 PM

Now, the downside to this inline method is that you can’t give inline elements a width or a top or bottom margin. There’s also a minor whitespace issue that happens with them, notice the default space between the list items. This won’t go away even if you set the margins and paddings to zero. The reason it’s happening is that it’s counting the line breaks in the html as whitespace (like spaces between words in a p element). One solution to this is to push the elements right next to each other in the html with no spaces, but obviously this sucks, as you don’t want to affect the presentation via the html.

Screen Shot 2014-05-31 at 6.31.13 PMScreen Shot 2014-05-31 at 6.31.23 PM

A better solution is to apply negative margins to the list items.

Screen Shot 2014-05-31 at 6.33.11 PMScreen Shot 2014-05-31 at 6.32.54 PM

Now, these are nav links, so we probably do want spacing. So, add use margin-right to make them bigger.

Screen Shot 2014-05-31 at 6.35.13 PM

Screen Shot 2014-05-31 at 6.34.38 PM

New issue – since the display is inline, when the browser gets narrow it gets all bunched up on itself as they wrap on themselves. It’s wrapping how text would wrap in a paragraph.

Screen Shot 2014-05-31 at 6.36.15 PM

To fix this you can give the .main-header a whitespace property of nowrap, but notice how now it breaks out of the container.

Screen Shot 2014-05-31 at 6.37.36 PM


To fix this, you can use the inline-block value for the display property. when you do this, notice how there’s more space now there as well, and that they’ll move to the next line if the browser width gets too narrow. This also lets us give these elements a width and a top or bottom margin. It treats elements as inline elements, that can be styled the same way as block level elements, but they’re still distributed as inline with other inline elements.

Screen Shot 2014-05-31 at 6.44.31 PM Screen Shot 2014-05-31 at 6.44.24 PMScreen Shot 2014-05-31 at 6.45.34 PM

It’s worth noting, the same whitespace issue for inline elements also happens for inline-block elements. The reason the size of the header container increased when we switched to inline-block is because we’re using a h1 element, and headings by default have a top and bottom margin, which normalize.css does not reset.

Screen Shot 2014-05-31 at 6.50.40 PM Screen Shot 2014-05-31 at 6.50.32 PM

If you were to hover, you’d notice the clickable areas for the lines in the logo and list items is small, it’s only on the text itself. To make the link hover target larger and take up the full width and height of its parent container element. To fix this, we need to set the display of the anchor elements to block, because display values are not inherited. We also took the padding from the h1 and list items, and gave it to the anchors as well. Note – even though the anchor elements are block level, since their parent elements are inline-block elements, they don’t display on the next line.

Screen Shot 2014-05-31 at 6.54.51 PM Screen Shot 2014-05-31 at 6.54.45 PM


Table is another handy display mode. It emulates the old school table based layouts that were used before css. It allows you to easily vertical align elements to the center of its parent container.

First, in the parent container you need to set the display property to table. You must also give it a width of 100%, so it takes up 100% of its own parent container div. Finally give it a min-height of 150px.

Screen Shot 2014-06-02 at 1.44.04 PMScreen Shot 2014-06-02 at 1.47.00 PM

You can see there is a bit of a box model bug appearing here. Because the header has 20px of padding all around, the browser is calculating that padding into the headers total width and height as well. This causes there to be 40 pixels of padding on the right there. To fix this, use the box-sizing property. You can actually declare it once, with the universal selector (*), and set it to border-box

Screen Shot 2014-06-04 at 12.39.30 PM

Screen Shot 2014-06-18 at 2.43.53 PMNext, we need the main-logo and main-nav elements to display as table-cell. This will make them display as a table-cell in a table. Now, we can make it align vertically with vertical-align: middle;. We’ll also remove the top margins of the list items and the logo (which I’ve commented out here so you can see where it was before), as our table display mode will take care of the spacing for us. Regardless of the height we set for the header, the logo and nav elements will always be vertically centered now.

Screen Shot 2014-06-18 at 2.53.49 PM

Screen Shot 2014-06-18 at 2.51.53 PM

To fix the spacing, we’ll add some padding-LEFT to the .main-nav, which is the ul.

Screen Shot 2014-06-18 at 2.54.43 PMScreen Shot 2014-06-18 at 2.54.51 PM

Now, if we had used a margin instead, it won’t work because you’re not able to use margins on elements that are displayed as table cells.

Finally, when the viewport is resized, things start to look strange. This is common behavior of table cell layout.

Screen Shot 2014-06-18 at 2.57.38 PM

To fix this, use a media query. We’ll set the logo and nav elements back to block with their initial padding and margins, and give the list items a little margin-top so they have some spacing between them. Now, when the browser is resized, everything looks good.

Screen Shot 2014-06-18 at 3.01.16 PM Screen Shot 2014-06-18 at 3.01.43 PM


Column layout with inline-block

We’re starting with this layout:

Screen Shot 2014-06-18 at 3.12.57 PM

Each div with content has the class col. We’ll start by setting their display to inline-block, and give them some padding, about 20px. We’ll also give them some widths, which add up to 100% of their parent container.

Screen Shot 2014-06-18 at 3.15.57 PMScreen Shot 2014-06-18 at 3.15.26 PM

Now, that doesn’t look right. The reason this is happening is due to the whitespace issue discussed before with the list items in the nav. Once again, the fix for that is to give these columns a negative margin-right of -5px. Apparently the negative pixel value depends on the font size we’ve set.

Screen Shot 2014-06-18 at 3.17.56 PM Screen Shot 2014-06-19 at 1.47.27 PM

One thing to note with inline-block, is you’ll see some that are vertically aligned bottom by default, like the secondary content div above. The best way to adjust this is to give the columns a vertical-align of top. This works similar to using floats, without the collapsing problem that comes with them.

 

Screen Shot 2014-06-19 at 1.49.30 PMScreen Shot 2014-06-19 at 1.49.37 PM

Sometime we’ll want the footer to be positioned at the very bottom of the viewport, regardless of how tall or short the columns of content are, which it’s not doing right now in the example above. There are a few methods to create what’s called a sticky footer, which will do that. The simplest way is as follows:

First, select all the main containers on the page (html, body, .main-wrapper, .col) and give them a height of 100%. This height of 100% is calculated based on the height of the parent element. So, if the height of all the main containers is set to 100%, we’ll get the desired result.

Screen Shot 2014-06-19 at 1.54.22 PMScreen Shot 2014-06-19 at 1.54.43 PMScreen Shot 2014-06-19 at 1.54.49 PM

We’ll then improve out footer by adding some padding styles to make it thicker and center align the text.

Screen Shot 2014-06-19 at 1.56.24 PM Screen Shot 2014-06-19 at 1.56.02 PM

Now, if you want the layout to span the full width of the viewport, simply remove the width and margin declarations for the .main-wrapper.

Screen Shot 2014-06-19 at 1.58.55 PMScreen Shot 2014-06-19 at 2.00.01 PM

We can now introduce new block elements and still maintain the flow of the document. We’ll add a new div with an h1 and a p element.

Screen Shot 2014-06-19 at 2.01.59 PM

We’ll then style it with a background color, some padding and align the text center. Notice how it lines up nicely with the other divs due to how we set this page up.

Screen Shot 2014-06-19 at 2.04.54 PM Screen Shot 2014-06-19 at 2.04.42 PM

Screen Shot 2014-06-19 at 2.06.33 PM

You can even put it somewhere else, like between the secondary content and the footer, and it will still work. It only won’t work if you put it between the primary and secondary content divs.

Screen Shot 2014-06-19 at 2.08.00 PMFinally, like always, we’ll add some media queries to ensure this looks nice on smaller screens. Remember again you can always hide sections you don’t need, so we’ll hide the banner as well.

Screen Shot 2014-06-19 at 2.10.02 PM Screen Shot 2014-06-19 at 2.09.57 PM


Float Layout

Floats come from print design, where a picture would be to the left and the article would flow around it’s right.  Using the property let’s you place it along the left or right side of its container, outside of the normal document flow.


 

Creating a horizontal Menu

Floats are technically block level elements, but they act like inline elements because they don’t exist on a line of their own. With floats, the surrounding content usually wraps around the floated element, because it exists outside of the normal document flow. This is what we’re starting with:

Screen Shot 2014-06-23 at 10.52.01 AM

 

We’ll start with the logo.

Screen Shot 2014-06-23 at 10.53.53 AMScreen Shot 2014-06-23 at 10.54.04 AM

That doesn’t look right, but makes sense. Notice how the nav links are ignoring the space that the logo element would normally take up on the page. But the content (Link 1, Link 2, etc) wraps around the logo element, because content wraps around the floated element.

So, we now need to float the list items.

Screen Shot 2014-06-23 at 10.57.16 AM Screen Shot 2014-06-23 at 10.57.08 AM

Now, we’ll mess with their margins to help them sit better.

Screen Shot 2014-06-23 at 10.59.19 AM Screen Shot 2014-06-23 at 10.59.11 AM

Screen Shot 2014-06-23 at 11.00.47 AM Screen Shot 2014-06-23 at 11.00.31 AM

Now, in this example we can just float the list items without having to float the main-nav ul element itself since it doesn’t have any of it’s own styles. But let’s say it did.Screen Shot 2014-06-23 at 11.03.47 AMScreen Shot 2014-06-23 at 11.03.32 AM

It appears like that because the main-nav ul is still in the normal document flow, even though it’s child elements are not. To fix this, simply make the main-nav ul float as well.

Screen Shot 2014-06-23 at 11.05.52 AM Screen Shot 2014-06-23 at 11.05.43 AM

We can also make it float right instead.

Screen Shot 2014-06-23 at 11.07.35 AMScreen Shot 2014-06-23 at 11.07.43 AM


The Float Clearfix

The floats added to the header elements above have caused another layout issue. Anytime we float an element, it takes it out of the normal document flow, which can sometimes cause the parent element to collapse, because it no longer honors the space of the content inside it. This is what’s happening in our header, since both of its child elements are floated. The reason it’s not collapsing now though is because it has a min-height set to 100px. If we were to remove that, we get this.

Screen Shot 2014-06-23 at 11.18.29 AM

This is an okay workaround, but it’s not future proof and leaves us with an fragile layout.  Now, if we were to also float the main-header left, and give it a width of 100%, it would actually fix the issue as well.

Screen Shot 2014-06-23 at 11.20.51 AMScreen Shot 2014-06-23 at 11.21.05 AM

But, this leads to a new issue where the elements below the main-header will now start wrapping around it. For example, if the width of the header was less than 100%.

Screen Shot 2014-06-23 at 11.23.45 AMScreen Shot 2014-06-23 at 11.23.57 AM

Though we could fix this, floating the main-header actually isn’t the best solution. What you should do is what’s called a clearfix, which forces the parent element to clear its children. We went over this before for the CSS foundations deep dive. We’ll use a ::after psuedo element with blank content, and clear:both here makes it so that it clears both the right and left sides of a float. The .group class will be used to group the child elements within the parent, to prevent it from collapsing. So, now anytime we need to clear a container, we simply need to give it the class .group.

Screen Shot 2014-06-23 at 11.40.05 AMScreen Shot 2014-06-23 at 11.40.12 AM  Screen Shot 2014-06-23 at 11.39.59 AM

Similar to inline block elements, floats move to the next line as the width of the viewport gets smaller.

Screen Shot 2014-06-23 at 11.41.39 AM

As before, we’ll use a media query to make this looks better.  We’ll set the float to initial and set the margin-right to 0 for the logo.

Screen Shot 2014-06-23 at 11.43.26 AMScreen Shot 2014-06-23 at 11.44.07 AM


Floating Columns and Images

We already have a .col class for the divs of content on the page. If we float them left, nothing really happens (except the footer wrapping around the last div).

Screen Shot 2014-06-23 at 12.05.42 PM Screen Shot 2014-06-23 at 12.06.06 PM

To fix this, we need to give the columns a width.

Screen Shot 2014-06-23 at 12.07.23 PMScreen Shot 2014-06-23 at 12.07.31 PM

Now, with the extra content div we can see we once again have the collapsing container issue. To fix this, we’ll add the .group class to the content-row container div it’s sitting in, to apply the clearfix.

Screen Shot 2014-06-23 at 12.10.33 PMScreen Shot 2014-06-23 at 12.10.39 PM

Notice how the grey part appearing in extra content before was actually the footer jammed up in there. The content in the footer is wrapping around the last floated element, the secondary content div, but it’s grey background is pushing back through the other parts.

Next, we’ll tweak the width of some of the columns. We’ll set the primary one to width: 40%. then use .col:last-child pseudo-class to select the last .col element in its parent container to float it right. I’m not sure why we did that last part though, as setting the width of the primary one have the same results.

Screen Shot 2014-06-23 at 12.52.46 PM Screen Shot 2014-06-23 at 12.52.29 PM

You can change the order they display by setting them to float:right;

Screen Shot 2014-06-23 at 12.54.12 PMScreen Shot 2014-06-23 at 12.54.20 PM

You can also reorder the content in the markup (like move extra above primary) and it will still fit together well.

Screen Shot 2014-06-23 at 12.55.55 PM

Next, we’ll make the layout 100% of the browser, by removing the wrap elements properties.

Screen Shot 2014-06-23 at 12.57.05 PMScreen Shot 2014-06-23 at 12.57.21 PM

Next, let’s inset an image into the primary content div.

Screen Shot 2014-06-23 at 1.00.46 PM

Next, we’ll make the text wrap around the image by setting it’s width to 50% and float:left;

Screen Shot 2014-06-23 at 1.02.49 PMScreen Shot 2014-06-23 at 1.02.04 PMTo create space between the image and text, give the image a margin. If we were to apply the margin to the text instead, it would not have the same effect. Since the image is outside of the normal document flow due to the float, margin for the text would only create space between it and the left side of the blue column it’s sitting in.

Screen Shot 2014-06-23 at 1.04.15 PM Screen Shot 2014-06-23 at 1.04.08 PMWe can give the image border and padding styles as well.

Screen Shot 2014-06-23 at 1.08.00 PM Screen Shot 2014-06-23 at 1.07.47 PM

Finally, we need to make it look good on mobile.

Screen Shot 2014-06-23 at 1.09.19 PM

We’ll use a media query and make it so we remove all the floats (which will make the columns display one after another in the normal document flow), and then also set the image’s width to 100% so that it takes up it’s full parent container.

Screen Shot 2014-06-23 at 1.13.10 PM Screen Shot 2014-06-23 at 1.13.04 PM

Even if we add more content, it will still fit well.

Screen Shot 2014-06-23 at 1.17.07 PM Screen Shot 2014-06-23 at 1.17.01 PM


Mobile First Layout

It’s better to start with mobile, then build bigger sites, rather than starting big then going smaller.  In the examples above, they’re using normalize.css to reset the values, then adding the property values for the site, then adding even more values with the media query. For example, we set a margin-right for one of the elements, then in the media query reset it back to 0 when the site viewport is under 768px. Same with the floats for the columns. This isn’t very efficient, as it forces the browser to load and parse all the css when it doesn’t have to.

So, we provide the minimal styling be default, then build on that with media queries. This will let the mobile site load faster. We’ll refactor the css for the main layout elements, which gets us this far.

Screen Shot 2014-06-23 at 2.14.52 PM Screen Shot 2014-06-23 at 2.14.41 PMNext, we’ll style the columns by adding some padding, and hide the extra content and banner divs because we don’t want them to appear on mobile.

Screen Shot 2014-06-23 at 2.16.28 PM Screen Shot 2014-06-23 at 2.16.12 PMNext, we’ll style the image to take up 100% of its parent container.

Screen Shot 2014-06-23 at 2.19.07 PMScreen Shot 2014-06-23 at 2.18.23 PM

Now that we have our mobile view on lock, we can build on that using media queries and the min-width media feature. First, we’ll style the header. Then we’ll style the columns so they float nicely. Then, we’ll add the clearfix rule to prevent the header container from collapsing since all its children are floated. Finally, we’ll restyle the image with a float so the content wraps around it.

Screen Shot 2014-06-23 at 2.29.01 PMScreen Shot 2014-06-23 at 2.29.09 PM  Screen Shot 2014-06-23 at 2.28.54 PM

 

 

New terms from treehouse – CSS Foundations Part 6 – Media Queries

Media Queries

Media queries allow us to style elements dynamically based on conditions of the output device, aka the viewport. This includes size, resolution, etc. Most commonly used in responsive web design.

Good examples of media queries being used: mediaquer.is – showcases sites that use them well.

A media query is a style block containing one or more logical expressions that are either true or false. The @media rule specifies the media type we want to target. There are several you can use. If you do not specify one, the all type will be applied, which specifies to all devices. For browsers, you select the screen media type. Next, you put in the and keyword, which is called a logical operator, and combines the screen media type, with the media feature/expression that will go inside the parenthesis. The expression is what checks for the true/false conditions of the media features defined. Some of the features you can include are width and height. All usable are listed here.

We’ll set this one max-width: 768px. Note, for these you do NOT use a semicolon at the end. You then enter the css rules inside the curly brackets, which will be applied when the conditions are true. So, if the media type is a screen, and the browser viewport is 768px or less, these styles will be applied.

Remember: max-width is anything equal to or less than the width defined. min-width is anything equal to or greater then the width defined.

Screen Shot 2014-06-11 at 2.44.22 PM Screen Shot 2014-06-11 at 2.44.08 PMScreen Shot 2014-06-11 at 2.44.16 PM

Now, we’ll add a second media query for a smaller screen size. Notice how the font is still white. That’s because the color property from the first one is still true (the screen is less than 768px), we only overwrote the background color.

Screen Shot 2014-06-11 at 2.50.34 PM Screen Shot 2014-06-11 at 2.51.35 PM

Now let’s say you wanted these changes only at a certain range. You can combine expressions to get more specific. In the example below, by using and again we’ve combined the two media features, so the styles will only be applied if both are true. Now the text does not maintain the white color because the conditions are no longer true.

Screen Shot 2014-06-11 at 2.54.54 PM  Screen Shot 2014-06-11 at 2.54.39 PMScreen Shot 2014-06-11 at 2.54.45 PMScreen Shot 2014-06-11 at 2.54.49 PM

There are other ways to create media queries in a document. You can have them in a separate stylesheet, then link that to the html document like you would any other one with the link element. Be sure to list them below the main stylesheet, or they’ll be overwritten by it. You also use the media attribute to specify the conditions that must be true for the styles in that stylesheet to be applied. The downside to this method is we need to include multiple link tags, one for each media query, which mean multiple requests to the server, which mean it will slow things down. Another drawback is that these stylesheets still have to download, even if the media query returns false and its styles don’t apply to anything. What’s better about the first method is they’re only loaded when the conditions are true.

Screen Shot 2014-06-11 at 3.00.00 PM

Finally, you can also add them via an import directive. These work the same way as the example above, and will import the files if the conditions are true. But, like mentioned before, @import can cost you performance, as each one is a different server request.  The best way is still the first way we went over.

Screen Shot 2014-06-11 at 3.05.05 PM

Lastly, let’s make it so that the text doesn’t get too wide when the browser is really wide. In the example below, when the browser size is at least 1000px, the new width is applied to the wrapper div.

Screen Shot 2014-06-11 at 3.09.10 PM Screen Shot 2014-06-11 at 3.09.35 PM


Adaptive layouts with media queries

Logical operators allow you to create more complex media queries (like and seen early, which combines the screen media type with the media feature listed in the parenthesis). Other ones include not, which is used to negate an entire media query. It will return true if the media query would otherwise return false. In the example below, we’re telling the browser that if its not on a monochrome screen (like a black and white one), then make the background color red. Since we’re on a color display, the browser sees it as true (since it’s not a monochrome one).

Screen Shot 2014-06-11 at 8.18.01 PMScreen Shot 2014-06-11 at 8.18.07 PM

If we were to change the media feature to color, the browser would see this as false, because it’s not not color. So, it would turn the background red only if the screen was not color.

Screen Shot 2014-06-11 at 8.20.32 PM Screen Shot 2014-06-11 at 8.20.22 PM

Currently the page has a one column layout regardless of screen width, but in reality we’d probably only want that for smaller, mobile browsers. Because our base styles are already optimized for that, there’s not much we need to do. This is the mobile first approach that we saw with the first treehouse lesson on “How to make a website”. Now we just need to add media queries on top of that for our larger viewports.

If some of the parts of the page aren’t necessary for when you first view the mobile page, you can temporarily hide them, then reveal them as the screen gets larger. In the example below, since we’re doing a mobile first approach, we can set the base style for the Extra div to display: none;, then change it later with a media query.

Screen Shot 2014-06-11 at 8.36.53 PM

Screen Shot 2014-06-11 at 8.38.00 PM

Screen Shot 2014-06-11 at 8.38.10 PM

 

Next, we’ll make it so the content becomes two columns after a certain width. With the media query below, we’re saying that when the viewport width is at least 481px, apply these styles. We’ve made the div’s (each with the class .col) float left, then set widths for them with super exact percentages so they’ll scale nicely with the page. We then added a margin-left for the second one as well to put some space between them (we could have also added an equivalent margin-right to the first div, the effect would have been the same).

Screen Shot 2014-06-11 at 8.43.15 PMScreen Shot 2014-06-11 at 8.46.29 PMScreen Shot 2014-06-11 at 8.46.36 PM

 

Another logical operator is only, which is used to apply the styles only if the entire query matches. This is useful for preventing older browsers that do not support media queries from applying the given styles, otherwise they’d apply all styles in any media query immediately. The browsers that do support media queries will ignore the only and apply the styles like they normally would according to the conditions set.

So, finally we want to adjust the styling for desktops. First, we’ll add a media query that tells the browser only to apply it when the viewport is at least or greater than 769px. Then, for the styles we floated the .logo (for the logo) left and the nav links to the right, since the screen’s too wide for them to remain in the center. Then, we made the Extra div reappear by setting its display:block;, and gave it a width and a margin-left and readjusted the width of the .main div to have them all fit nicely in one row.

Screen Shot 2014-06-11 at 8.55.43 PMScreen Shot 2014-06-11 at 8.55.56 PM

Now, notice that the margin-left code was repeated for the .extra and .secondary div from the previous media query. To make this cleaner, remove it from the second and put it in the first media query to combine them into one selector.

Screen Shot 2014-06-11 at 8.58.56 PM

Screen Shot 2014-06-11 at 8.58.39 PM

Finally, let’s once again add a media query to keep things at a fixed width once the viewport gets very wide. By setting the .wrap div to a set width, we ensure the content within it never gets too stretched out. It’s saying is the width is at least or greater than 1024px, then apply this style.

Screen Shot 2014-06-11 at 9.01.27 PM Screen Shot 2014-06-11 at 9.01.10 PM


Device-specific media-queries

The previous media features were based on things like viewport width and height, but there are more device specific ones we can use that refer to the entire screen area. They don’t look for a specific device, but instead its capabilities, like min or max device width or pixel ratio or resolution.

Here, we start with a fluid, responsive site with a breakpoint for mobile devices. However,  if you were to open the site on an iphone, it wouldn’t use the media query.

Screen Shot 2014-06-16 at 2.20.44 PM

 

This is because smartphones use a virtual viewport that’s larger than the actual screensize, which lets it fit everything in to its screen. To fix this, there’s a special html meta tag that instructs the device on how to handle the viewport size on mobile devices. Set the name attribute to viewport and the content attribute to device-width. The width property sets the size of the viewport, and the value device-width is 100% of the viewport screen. You can see how this make the media query work now, since the viewport’s width is adjusted to what it actually is.

 

Screen Shot 2014-06-16 at 2.24.15 PM

Screen Shot 2014-06-16 at 2.27.05 PM

 

Now for some device-specific media features. The device-width one defines the whole width of the devices screen based on its orientation These can also be prefixed with min and max like before. In the example below, any device with a viewport equal to or less than 479px would have these styles applied and hide the comments section. Notice how it does not work on the web browser, as this is only affecting devices with a full screen of 479px or less. Even thought the web browser’s viewport width is less than 479px, it’s not actually checking for that. It’s actually checking for the entire screen width of the computer desktop.

Screen Shot 2014-06-16 at 2.33.57 PM Screen Shot 2014-06-16 at 2.33.51 PM

The orientation media feature indicates whether the device is in landscape or portrait mode. Portrait means taller than it is wide, and landscape is wider than it is tall. In the example below, when the device is in portrait mode, the body’s background color will turn red, but not if it’s in landscape mode. If we set orientation: landscape, the opposite results would be true.

Screen Shot 2014-06-16 at 2.33.57 PM Screen Shot 2014-06-16 at 2.37.23 PM Screen Shot 2014-06-16 at 2.38.13 PM

 

You need to be careful with orientation though because it will also affect desktop browsers. With the code below, if the browser is wider than it is tall, then is will be considered to be in landscape mode and the styles will be applied. If it’s taller than it is wide, it will be in portrait mode and the styles won’t be applied.

Screen Shot 2014-06-16 at 2.41.14 PMScreen Shot 2014-06-16 at 2.41.29 PM  Screen Shot 2014-06-16 at 2.41.59 PM

However, due to the variety of devices that are out and will come out, to future proof it’s best to avoid device-width and orientation, and use min-width and max-width instead.


Two of the most useful device media features are device-pixel-ratio and resolution. These let us detect the difference between the device pixels and the logical pixels, or the physical resolution vs the logical resolution.

The device-pixel-ratio is the difference between the device’s logical pixels and physical pixels. For example, the iphone has a ratio of 2, because the physical resolution on a retina display is double the logical resolution. It has twice as much pixel density. The physical resolution on the latest iPhone is 640 x 1136 pixels, while the logical resolution, or the actual size of the screen, is half of that, 320 x 568.

So, for example, when developing for a device with a pixel ratio of 1, one CSS pixel will be exactly one physical pixel on screen. But if the pixel ratio is 2, then one CSS pixel will be depicted on screen as two physical pixels. It doubles it.

When we switch to the retina view in the simulator, the window gets twice as big, because the desktop doesn’t have the resolution to support it. If we were using a retina display then it could support it.

Screen Shot 2014-06-16 at 2.51.33 PM Screen Shot 2014-06-16 at 2.50.58 PM

You can also use min and max as a prefix for these as well . In the example below, when the device-pixel-ratio is at least 2 or bigger, the styles will be applied. You should use the -webkit- prefix to support older webkit based browsers that don’t support resolution yet.

Screen Shot 2014-06-16 at 2.56.37 PM

The resolution media feature has much stronger device support, and describes the resolution of the device, aka the pixel density. The display resolution of a screen is the total amount of pixels available. ppi and dpi are describing the same thing.Screen Shot 2014-06-16 at 2.58.50 PMHigh resolution displays can really affect how elements appear, especially images, which can look blurry or grainy is not optimized for higher resolution screens. In the example below, the pic was only 45px wide, so in the retina display, everyone of its pixels is being doubled.

Screen Shot 2014-06-16 at 3.00.54 PM

We can fix this with the media features mentioned above, by having it use a higher definition picture based on the resolution of the screen. In the example below, these two media queries are testing for the same feature. Remember, -webkit-min-device-pixel-ratio is only for those older, webkit based browsers that don’t support the resolution media feature. The comma between the two is just like using the word or. So, we’re telling the browser, if it’s a webkit based browsers with a device-pixel-ratio of 2 or high, or a device with a minimum resolution of 192dpi or greater, then apply this style.

Screen Shot 2014-06-16 at 3.04.13 PMHow do we know the min-resolution value?

Screen Shot 2014-06-16 at 3.07.54 PM

So, 2 x 96 = 192dpi.

Now, it’s using the new, higher res image, but it looks too big.

Screen Shot 2014-06-16 at 3.09.00 PM

This is good, because it shows the media query is working. Now we just need to adjust the background size.

Screen Shot 2014-06-16 at 3.10.32 PMScreen Shot 2014-06-16 at 3.10.45 PM

A good catch all for high resolution devices is a min-device-pixel-ratio: 1.5 and a min-resolution of 144dpi. If you don’t want to do the math (1.5 x 96), you can use the new unit dppx which represents the number of dots per pixels. This maps perfectly to the ratio value of min-device-pixel-ratio, so you don’t need to do the multiplication for dpi. This does lack some browser support though, so use dpi for now.

Screen Shot 2014-06-16 at 3.16.21 PM


Print Stylesheets

Many users rely on being able to print pages from websites, so you can create a print stylesheet to format a webpage so that when printed it is in a good format for that.

Sites that do this well: http://www.smashingmagazine.com/. Notice how it removes the non-article related stuff for the print version.

Screen Shot 2014-06-17 at 2.45.36 PMScreen Shot 2014-06-17 at 2.45.43 PM

http://thenextweb.com/

Screen Shot 2014-06-17 at 2.47.14 PMScreen Shot 2014-06-17 at 2.47.32 PM

We’ll start with the example site below. Right now the print format looks bad.

Screen Shot 2014-06-17 at 2.49.05 PMScreen Shot 2014-06-17 at 2.49.56 PM

When making a print stylesheet, you need to look at the elements and think about what you can cut back, as you’re limited to a physical space of 8 1/2 by 11″. So, you may want to remove the comments and navigation sections. Also, since print is static, you must consider the interactive elements like links.

You use the print media type rather than the screen one, and tells the browser to apply the styles only when printing a page. We’ll start with some basic styles that are needed for print to prevent excessive printing, like setting the background to transparent (which turns off any background images), the font color to black and turning off shadows. !important makes it so this rule will be applied over any others, and the * is the universal selector which selects all elements on the page.

Screen Shot 2014-06-17 at 2.58.48 PM

Next, we’ll remove some elements we don’t need, like the search, sidebar, main-nav, comments and footer sections. Already it’s looking way better.

Screen Shot 2014-06-17 at 3.01.49 PMScreen Shot 2014-06-17 at 3.02.02 PM

Next, we’ll fix the margin for the header, remove the blue border at the top, and center align it.

Screen Shot 2014-06-17 at 3.03.45 PMScreen Shot 2014-06-17 at 3.04.16 PM

Next, we’ll create print friendly links. We’ll use the attribute selector to select links that have the href attribute, then the ::after psuedo element to insert content after them. In this case, the content is the value of the href attribute.

Screen Shot 2014-06-17 at 3.06.51 PMScreen Shot 2014-06-17 at 3.07.00 PM

Now, you normally don’t want every link displayed, you’ll want to avoid relative links, which are typically used for images and page anchors. To fix this, use the begins with substring matching attribute selector to only select links that begin with http.

Screen Shot 2014-06-17 at 3.09.57 PM

 

You can define margins around the printed page using the @page rule. Physical units work well here. This also appears to have removed the date and page markings.

Screen Shot 2014-06-17 at 3.12.28 PM Screen Shot 2014-06-17 at 3.12.08 PMUsing @page with the :first pseudo class allows you to apply styles to only the first printed page.

Screen Shot 2014-06-17 at 3.14.17 PMScreen Shot 2014-06-17 at 3.14.33 PM

You can also determine page breaks, like if you wanted to prevent them after headings or unordered lists with the page-break-after property, by setting it to avoid. This will force it to break before them (in this case ul and h2) instead.

We can avoid orphans and widows by using the orphans and widows properties. Orphans are the single words or straight line that are left alone after a page break and widows are the ones that fall before a page break. By setting each to 3, the page won’t orphan or widow anything less than the 3 lines specified here.

Screen Shot 2014-06-17 at 3.19.56 PM

 

You also should probably reduce the font size. We’ll use the previous rule (remember, DRY!) and add ul as a selector, then use a physical unit for the font-size.

Screen Shot 2014-06-17 at 3.21.59 PM~Screen Shot 2014-06-17 at 3.22.08 PM

Finally, you can remove images if you don’t need them. Once again, we’ll use the rule we already have and just add the img selector to it.

Screen Shot 2014-06-17 at 3.23.46 PMScreen Shot 2014-06-17 at 3.23.56 PM

And holy moly, that’s it! Finally done the CSS Foundations Deep Dive! Woooooooo! Only took like 1 and a half months, but it was worth it to get such good notes out of it.