New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

CSS: Page Layouts
Illustration by

Creating grid-based assets


From:

CSS: Page Layouts

with James Williamson

Video: Creating grid-based assets

If you are going to create a grid-based design, it's important that all page elements relate to the grid in some way. This will help your design achieve a more balanced composition and help you create consistent layouts from page to page, which is especially important for fixed layouts. To illustrate this, we will work with the addition of assets to our page and make sure that they follow the layout guides laid down by our initial grid. And to that end, I have a document here, the fixed_planning_elements, which is just a modified version of our earlier planning document. You can find the finished version of this in the Assets folder, directly in your exercise files.
Expand all | Collapse all
  1. 4m 20s
    1. Welcome
      54s
    2. How to use the exercise files
      3m 26s
  2. 1h 39m
    1. Box model review
      8m 47s
    2. Calculating element dimensions
      11m 11s
    3. Understanding margin collapse
      7m 59s
    4. Calculating em values
      7m 41s
    5. Calculating percentage values
      7m 51s
    6. Normal document flow
      13m 3s
    7. Controlling element display
      8m 53s
    8. Using CSS Resets
      7m 11s
    9. Fixed, fluid, and responsive layouts
      9m 9s
    10. CSS debugging tools
      6m 46s
    11. Using the Firebug Inspector and the WebKit Web Inspector
      11m 5s
  3. 53m 15s
    1. Page design workflow
      3m 6s
    2. Page design tools
      4m 56s
    3. Determining page structure
      7m 18s
    4. Creating image assets
      8m 58s
    5. Creating initial page structure
      7m 3s
    6. Adding meaning with classes and IDs
      5m 23s
    7. Structuring content with HTML5
      6m 6s
    8. Building internal structure
      10m 25s
  4. 1h 36m
    1. Floating elements
      7m 50s
    2. Clearing floats
      7m 28s
    3. Containing floats
      7m 50s
    4. Clearfix technique
      10m 38s
    5. Floating inline elements
      14m 34s
    6. Two-column floated layouts
      8m 17s
    7. Three-column floated layouts
      11m 30s
    8. Column height considerations
      7m 3s
    9. Creating equal-height columns
      10m 42s
    10. Floats: Lab
      5m 25s
    11. Floats: Solution
      5m 21s
  5. 51m 42s
    1. Relative positioning
      7m 59s
    2. Absolute positioning
      8m 59s
    3. Fixed positioning
      4m 23s
    4. Controlling stacking order
      8m 31s
    5. Clipping content
      8m 21s
    6. Controlling content overflow
      5m 38s
    7. Positioning elements: Lab
      3m 59s
    8. Positioning elements: Solution
      3m 52s
  6. 48m 46s
    1. Design considerations for fixed layouts
      3m 28s
    2. Establishing the layout grid
      7m 57s
    3. Defining column spacing
      9m 30s
    4. Applying the grid through CSS
      8m 56s
    5. Creating grid-based assets
      8m 26s
    6. Grid design resources
      6m 22s
    7. Building fixed layouts: Lab
      4m 7s
  7. 44m 35s
    1. Designing for flexible layouts
      2m 30s
    2. Calculating percentage values
      8m 45s
    3. Setting flexible width values
      6m 6s
    4. Making images flexible
      8m 10s
    5. Setting minimum and maximum widths
      7m 24s
    6. Building flexible layouts: Lab
      4m 53s
    7. Building flexible layouts: Solution
      6m 47s
  8. 49m 36s
    1. Responsive layout overview
      3m 49s
    2. Using media queries
      7m 16s
    3. Organizing styles
      8m 39s
    4. Making content responsive
      8m 33s
    5. Mobile design considerations
      7m 32s
    6. Building responsive layouts: Lab
      4m 23s
    7. Building responsive layouts: Solution
      9m 24s
  9. 1h 22m
    1. Creating multi-column text
      6m 36s
    2. Using borders to enhance design
      13m 59s
    3. Rounding corners
      6m 56s
    4. Adding drop shadows
      10m 35s
    5. Working with opacity
      6m 8s
    6. Utilizing the background property
      15m 5s
    7. Working with CSS sprites
      7m 58s
    8. Enhancing page design: Lab
      6m 22s
    9. Enhancing page design: Solution
      8m 38s
  10. 6m 25s
    1. Additional resources
      6m 25s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
CSS: Page Layouts
8h 57m Beginner Feb 07, 2012

Viewers: in countries Watching now:

CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.

Topics include:
  • Reviewing the box model
  • Calculating em and percentage values
  • Controlling how elements display
  • Creating fixed, fluid, and responsive layouts
  • Structuring content with HTML5
  • Floating elements
  • Using relative, absolute, or fixed positioning
  • Defining column spacing
  • Creating grid-based assets and layouts
  • Considering mobile-design-specific issues
  • Working with multi-column text
  • Enhancing page design CSS Sprites
Subjects:
Web Web Design
Software:
CSS
Author:
James Williamson

Creating grid-based assets

If you are going to create a grid-based design, it's important that all page elements relate to the grid in some way. This will help your design achieve a more balanced composition and help you create consistent layouts from page to page, which is especially important for fixed layouts. To illustrate this, we will work with the addition of assets to our page and make sure that they follow the layout guides laid down by our initial grid. And to that end, I have a document here, the fixed_planning_elements, which is just a modified version of our earlier planning document. You can find the finished version of this in the Assets folder, directly in your exercise files.

Again, it's not important that you have this open. We're just sort of going over some concepts here. This is another thing that I do when I plan sites. In addition to planning out the columns, I also plan out any type of assets that might go into my content and how it relates to that grid by creating some default measurements for it. As you can see in the left column here, I have several default sizes for assets, including assets that might go side by side. You are free to kind of play around with these and experiment with different sizes and sort of compare how they might relate to each other. For example, I could certainly work with the height of these, make a couple of them perhaps a little bit more vertical, but what I am doing is I am making sure that each one of these adheres to the grid in some way.

So you can see they are all divisible by 16. They all fit specifically into the grid itself. Now, I've set other policies in place too. For example, in the right-hand column, the only way I want assets to display in the right-hand column is all by themselves and sort of floating in the middle of the column, so I developed a default size to do that. Whereas in the left-hand column, I have to really think about these assets and how they are going to relate to the content. Will the content flow around them? Will the content be on a line all by itself? Will it sit aligned left, or will it float in the middle of the layout? Those are all things that I have to consider, but I can use this to sort of gain some measurements.

If I have two elements that are going to sit side by side like this, for example, I now know what their width is going to be, what the gap between them is going to be, that sort of thing. So this is something I want to plan out beforehand. These don't have to be just image assets. These could be any elements that you use in your page. They could be pull quotes. They could be asides within an article. So there are all sorts of different things that these could be. They could be video. So you start planning out where those assets are going to go and how they are going to adhere to the grid. So now I am going to go back into our code, and I have opened up the grid.htm file from the 05_05 directory.

Now, you are going to notice if you look in the exercise files that there's also an images folder in that directory, and you can see we have several images here. Those images were sized based on the measurements that we determined within the planning documents. So the names of the images correspond to their widths and heights. If I go through the code of my document, I can see that those images have been added to the page so that we can see how they relate to the content and how they fit within the grid. Now, if I scroll through my code, I can also see that we have two brand-new sections right here within the main column, with the class of news, that we are going to have to style in order to fit within our layout grid as well.

Now, if I go ahead and preview this page in our browser, I can see the images look more or less harmonious with the layout and with the grid, but of course, stylistically right now, they are not interacting with the content at all. So I am going to have to work on their styling. And if I scroll down, those two sections really aren't doing anything to differentiate themselves from the content, so we are going to need to work on the styling of those as well. So I am going to go back into my code, and I am just going to add these right here underneath the footer in our layout styles. So about line 53 or so, I am just going to create some empty space here.

So the first thing I want to address is how my content is going to interact with images. So I am just going to go ahead and write a selector for my images on the page, and I am just going to float the images to the left. And I am going to set their margin to 0 for top, 1em for right-- and what that will do is it will just sort of hold the text off of the right edge of the image--0 for bottom and 0 for left. So just setting some images there. Now, if I save this and refresh my browser and go up, I can see now, for these images, the text is floating around it, and it's looking okay. But remember, we wanted this image in the right-hand column to be centered and sort of all by itself so that the text isn't wrapping around it.

For this larger image, I don't think having a text around it is very advantageous either. I think, obviously, that's hard to read. It can be very confusing. People are going to wonder if that's a caption or if there was a mistake made there. So for both of these we really need those images to sort of stand alone and by themselves within the layout. So to do that, we are going to apply a class to them. So I am going to go ahead and write the class selector, and we'll just call it largeImg. So just large image, .largeImg. And then for the properties, we'll go ahead and set the display property to block.

We'll turn floating off, so we'll say float: none, so it doesn't float. And then for margin, what we'll do for margin is we'll do 1em top and bottom, and then we'll auto-margin the left and right sides, and as we know, that's going to center that content within those columns. Well, that's only part of it. We've got to go down to those images and we've actually got to apply that. So what I am looking for is down on Line around 101, we'll find this 448_400 image, so we are going to go ahead and grab that, and I'll go ahead and apply that class to that, the largeImg class. And then scroll down a little bit further, find the 256_256 image, which is in the side, and we'll go ahead and apply the largeImg class to that as well.

So we'll go ahead and save that. Now, if I go back into the browser and refresh this, you can see what that does to the image in the sidebar. It's now sort of on its own line, the text is not floating around it, and it's centered within the column. If we go down to our larger image, it's taking up its own space, it's centered within that column, and it's interacting with the layout in a much pleasing fashion. Then the last thing we need to do here is we are going to style these two elements so that they are sitting side by side each other. In our planning document we're able to sort of sit these side by side so we know exactly how much space we need between them, and we know what their width is going be.

In this case, the width is going to be around 240 pixels based on our fixed layout. So I am going to go back into my code. I am going to scroll up to our CSS, and I'll stick with the layout styles. And what I am going to do is create a news selector, because you may have noticed the class attribute on both of those sections is news. We are going to go ahead and give it a width of 208. Remember, total width and width are not the same thing. So if I set some padding on this, I'll set 16 pixels' worth of padding, so 16 on one side, 16 on another side equals 32, add that to the 208, and then we get our 240 pixels' worth of width.

For font-size, I am going to go to 90%, which is going to just decrease the font-size inside those discreet sections just a little bit. For line-height, I am going to go to 1.8 to give a lot of space in lines, and that's just personal preference. And then for background, we are going to go ahead and give this a background color as well. I am going to do rgb (237, 226, 197), and don't forget your semicolon. And then finally, I have to handle the spacing and the positioning of these, so the margin-right for this is going to be 32 pixels, and then finally, we are also going to float them to the left.

We are almost done. I know that seems like a lot, but it's really not too much styling on these. Remember, we are floating them side by side. The margin-right is going to give us 32 pixels' worth of space between them, and then we've just sort of qualified the dimensions of the elements as well. However, remember, we only want that spacing on one side, so I am going to come in here and write another selector. I am going to say, hey, anytime you find a news section following immediately after another news section, set its margin-right to 0. So I am going to go ahead and save that, and we are going to go back into our browser.

I'll refresh the page, and you can see now we've got those two elements. The space in between them is even. And because they are based off our grid, they relate to the rest of the layout quite well. Now, if we wanted to, we can certainly polish this layout up a little bit, but the overall organization and structure of the layout is quite sound, thanks to the underlying grid that we are using. Now, I use some sort of grid on almost all my layouts, regardless of what type of layout it is. To help underscore the importance of grids in design, I want to give you some excellent resources on designing with grids, and we are going to do that in our next movie before we move on to the lab.

There are currently no FAQs about CSS: Page Layouts.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Page Layouts.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.