Unfortunately, there are a handful of people who think that CSS is so couched inside a box that there is almost no chance for individuality. The reason they give is mainly concentrated on the fundamental concept of CSS that everything must be within the x and y axes. Perhaps, that is true. True indeed for people who do not understand grids and wire frames and how the x and y axes are properly used in constructing pages. This article was taken from Jina Bolton’s article at http://www.sitepoint.com/article/breaking-out-of-the-box. What goes below are portions of her discussion on this topic.
Some definition of terms you really have to be aware of before proceeding with the rest of this article.
• A grid provides organization. A grid can act as your page layout’s “blue plan.” Well-planned grids can be aesthetically pleasing, as well as providing organization to your content.
• A grid can define more information. A well-organized layout can help provide consistency from page to page, and define what type of information is being provided at various points (for example: a sidebar can be used to provide secondary information; copyright and legal information, etc. might be placed in the page footer, and so on).
• A grid can unify a series. Having a planned guide for the placement of logos, headlines, images, and/or text in any medium (business cards, advertisements, web site layouts, etc.) can help “tie” everything together. Therefore, a grid can be a very important element of a brand.
For web design, wireframes are used to plan a site’s grid. Wireframes are a basic visual guide used to suggest the layout and placement of fundamental design elements within the interface. Wireframes also provide a guide for your site’s markup and style sheet. For example, if your site has a multi-column layout (a content area, and one or two sidebars), you can use markup (usually a <div> tag, though this can vary depending on the content) to define those areas, styling them into columns, rows, or whatever is determined by your wireframe. You can take the same approach to style your header, or masthead, and footer.
Knowing the “setup” on the front end will give you more insight into how the site should be structured (which is a good thing to have in the back of your mind when you do start applying artistic detail).
Now, normally, in the typical design workflows with which I’ve been involved, the design is finalized after the wireframe is created. The content is then created before any coding begins. However, for the purposes of this article, the content is being created on a whim, so the code will come into play early on, just for learning purposes. Once this process comes more naturally, a “regular” workflow can be established. But for now, let’s just explore the power of CSS. (Wow, that last bit sounded dramatic!)
Starting our Design
Here’s an example of a grid that you may typically see on a web site:
I decided to take advantage of the width of 960px: I divided by five, which gave me 192px. I used this as my grid unit — columns will be this width, and all other design elements will be proportional to it. The header is 192px tall as well.
The markup and style for this layout could be pretty straightforward; it would probably look something like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<title>Example Layout</title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<link type=”text/css” rel=”stylesheet” href=”style.css”/>
</head>
<body>
<div id=”page”>
<div id=”header”>
<p>Header content</p>
</div>
<div id=”content-primary”>
<p><strong>Primary content.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pharetra, arcu in dapibus sagittis, felis leo rhoncus erat, non porttitor urna libero vitae nibh. Ut convallis eros sed magna.</p>
<p>Aenean enim purus, adipiscing a, vehicula ut, tempor vitae, justo. Nam laoreet mauris vitae elit. Vivamus eros quam, euismod bibendum, pellentesque ut, tristique ut, nisl. <a href=”#”>Vestibulum ante ipsum primis</a> in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse non metus. Nullam tempor dictum sapien. Duis enim. In ligula. Cras ut enim. Sed dapibus ante in eros. Nulla facilisi. In rhoncus eleifend nunc. Sed risus nulla, pretium in, porta eget, lacinia eu, nunc. In hac habitasse platea dictumst. Vestibulum feugiat lectus et justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed aliquet dolor nec ipsum.</p>
<p><a href=”#”>Ut erat nibh</a>, aliquet ut, congue at, tempus in, nunc. Ut aliquet leo et lectus volutpat molestie. Vivamus nunc. Nulla facilisi. Suspendisse dictum nunc tempus elit. Nullam urna quam, bibendum quis, tincidunt a, nonummy euismod, metus. Etiam convallis, dui venenatis feugiat elementum, justo lacus lobortis libero, vel iaculis nibh lectus eu urna. Vivamus arcu. In facilisis quam et lacus. Suspendisse sit amet neque ac enim lobortis ullamcorper. Etiam faucibus sapien ut nunc. Nullam consectetuer vehicula arcu.</p>
</div>
<div id=”content-secondary”>
<p><strong>Secondary content.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pharetra, arcu in dapibus sagittis, felis leo rhoncus erat, non porttitor urna libero vitae nibh. Ut convallis eros sed magna. Aenean enim purus, adipiscing a, vehicula ut, tempor vitae, justo. Nam laoreet mauris vitae elit. This is interesting information. Ut erat nibh, aliquet ut, congue at, tempus in, nunc. Ut aliquet leo et lectus volutpat molestie. Vivamus nunc. <a href=”#”>Read more →</a> </p>
</div>
<div id=”footer”>
<p>Footer</p>
</div>
</div>
</body>
</html>
Here’s the CSS:
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
#page {
margin: 0 auto;
width: 960px;
text-align: left;
}
#header {
height: 192px;
}
#content-primary {
float: right;
width: 768px;
}
#content-secondary {
float: right;
width: 180px;
}
#footer {
clear: right;
}
.clear {
clear: both;
}
The margins and padding on all elements are reset using an asterisk (*). This sets the styles to be applied to everything.
This example uses the standard method of centering the design: I’ve set text-align: center for the body, margin: 0 auto, a width (in this case, 960px), and text-align: left for the containing div (which I’ve called “page”).
Next, the content divs (content-primary and content-secondary) float to the right. content-primary appears first in the markup, so this is the direction needed to align the columns properly next to each other. Finally, the columns are cleared in the footer.
So far, this is what we have:
Tags: Grids and Wireframes
english
español
Deutsch
français
Italiano
Português
русский
Loading ...
Leave a reply