Garrett Murphey » Cascading Style Sheets http://gmurphey.com New Media Interactive Developer Fri, 23 Apr 2010 02:02:40 +0000 en hourly 1 http://wordpress.org/?v=3.0 My Ideal Cascading Style Sheet: Organization http://gmurphey.com/2007/03/12/my-ideal-cascading-style-sheet-organization/ http://gmurphey.com/2007/03/12/my-ideal-cascading-style-sheet-organization/#comments Mon, 12 Mar 2007 05:13:37 +0000 Garrett Murphey http://gmurphey.com/2007/03/12/my-ideal-cascading-style-sheet-organization/ I am not the most organized person and I’m not afraid to admit it. It’s one of the things that has drawn me to designing with HTML and programming with Javascript and PHP. With HTML things are designed to fit into a hierarchy of nested tags, and most programming languages are organized by functions and methods. There’s inherent organization. But one crucial piece of the web developer’s toolkit is missing syntactical design — that being Cascading Style Sheets (CSS).

Here’s how I write my most of my CSS now.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
 
#menu ul li {
	height: 1.2em;
	line-height: 1.2em;
}
 
#menu ul li a {
	color: #006699;
}
 
#menu ul li a.here {
	color: #999999;
}

Now that’s not very hard to read, but amongst hundreds, if not thousands, of other lines of CSS, it’s quite easy to lose track of those 18 lines. And I, being the unorganized designer I am, tend to throw lines of CSS in the middle rules that should otherwise be grouped together. And those relationships are quite important when we need to debug a design issue caused by a child inheriting styles from a parent. The CSS syntax really lends nothing to natural organization.

One way I’ve tried to become a more efficient with the current CSS model is through rule and style separation by files. For instance, I may create files like design.css, typography.css, etc. But then I run into scenarios where I can’t decide which files to keep certain rules in, since they may apply to both, and eventually that system collapses upon itself.

I’ve thought long and hard about how CSS can improve (and hopefully make us more productive). One idea is illustrated below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#menu {
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		li {
			height: 1.2em;
			line-height: 1.2em;
		}
	}
	a {
		color: #06699;
		.here {
			height: #999999;
		}
	}	
}

As you can see, I’ve nested my styles within parents to show relationships more efficiently. Nothing can come between any of the rules for the #menu element.

Another way this solution could help is by making it much easier to collaborate. My colleagues rarely organize their CSS files exactly like mine, and when we’re trading these files back and forth, there’s a lot of time spent familiarizing ourselves with each other’s personal style. I’m not saying that a syntax like this would completely cut out a “familiarization period”, but it would definitely reduce it by creating a rule-grouping standard.

I’m curious to know how you think CSS could be made more efficient and cleaner. It’s definitely a subject I want to discuss more.

]]> http://gmurphey.com/2007/03/12/my-ideal-cascading-style-sheet-organization/feed/ 3 Vertical Alignment with Cascading Style Sheets http://gmurphey.com/2006/09/27/vertical-alignment-with-cascading-stylesheets/ http://gmurphey.com/2006/09/27/vertical-alignment-with-cascading-stylesheets/#comments Thu, 28 Sep 2006 03:59:11 +0000 Garrett Murphey http://gmurphey.com/2006/09/27/vertical-alignment-with-cascading-stylesheets/ td tag that I sorely miss -- valign. I used to find it very annoying that valign would always default to middle and that, for the most part, I'd have to go through every table cell and set valign="top". Now that I've moved to a complete CSS workflow, there's no valign and, to be honest, I kind of missing the little guy. So, I decided to bring the power of valign to the twenty-first century.]]> It’s not often that you’ll hear me say I miss something about designing with tables. Cascading style sheets have made my markup cleaner, slimmer, and much easier to maintain. And, for the most part, designing with CSS has been a blast. I can’t believe I actually resisted moving to CSS for a while. But, there’s one attribute from the good old td tag that I sorely miss — valign. I used to find it very annoying that valign would always default to middle and that, for the most part, I’d have to go through every table cell and set valign="top". Now that I’ve moved to a complete CSS workflow, there’s no valign and, to be honest, I kind of missing the little guy. So, I decided to bring the power of valign to the twenty-first century.

It’s actually not as hard as you might think to set vertical alignment in CSS. Say we had some HTML that looked like this.

1
2
3
4
5
6
7

<html>
	<body>
		<div id="container">
			<div id="element">valign me</div>
		</div>
	</body>
</html>

And that HTML was styled like so.

#container {
	width: 410px;
	height: 50px;
	padding: 0 10px;
	background-color: #CCCCCC;
}
 
#element {
	width: 150px;
	height: 20px;
	line-height: 20px;
}

We’d get something that looks like this, right?

align_noscript.gif

That was a little anticlimactic. Let’s try that again with a few more styles.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#container {
	position: relative;
	width: 410px;
	height: 50px;
	padding: 0 10px;
	background-color: #CCCCCC;
}
 
#element {
	position: absolute;
	top: 50%;
	margin-top: -10px;
	width: 150px;
	height: 20px;
	line-height: 20px;
}

align.gif

That’ll do it. See all that positioning going on in the stylesheet? If anyone doesn’t know, positioning an element absolutely within a relatively positioned container will position the element based on the container. Basically what’s happening is that we’re telling element to position itself halfway down from the top (top: 50%) of container. Where did the margin-top: -10px come from, though? To align the horizontal centers of the container and element, we have to pull the element up half of its height (20px / 2 = 10px).

And there you have it — a pretty painless method of vertically centering an element. But wait, there’s more. Let’s make our lives a bit easier.

A Dynamic Solution (Javascript)

Don’t worry, I hear you. You don’t want to have to calculate the margins for each individual element you want vertically align. Or there may be cases where you’re attempting to load content dynamically and you really have no way of to calculate the margin yourself. I ran into this problem a few times with both my gallery and slideshow applications (coming soon, I promise). The result was a javascript align method I wrote. It wasn’t always so complex. Until yesterday, it could only vertically and horizontally center. But now (with a little work on the original method) we can do things like the following.

// vertically center the element within its container
align('element', { vAlign: 'middle' });
 
// horizontally align to the right and center vertically
align('element', { hAlign: 'right', vAlign: 'middle' });
 
// horizontally center and vertically align to the bottom
align('element', { hAlign: 'center', vAlign: 'bottom' });

The method takes every combination you can think of. If you’d like some help constructing the method with parameters, head over to the sandbox.

Resources

The script in this post uses Sam Stephenson’s Prototype library. There’s some very good documentation for Prototype written by Sergio Pereira and over at script.aculo.us (another great javascript library).

Download the Source

All source code is provided under the Creative Commons Attribution-Sharealike License. If you agree to these terms, please view and download the entire source now.

]]> http://gmurphey.com/2006/09/27/vertical-alignment-with-cascading-stylesheets/feed/ 15 Distributing Elements Within a Container http://gmurphey.com/2006/09/06/distributing-elements-within-a-container/ http://gmurphey.com/2006/09/06/distributing-elements-within-a-container/#comments Wed, 06 Sep 2006 05:15:41 +0000 Garrett Murphey http://gmurphey.com/2006/09/04/distributing-elements-within-a-container/ text-align:'justify', you are able to justify lines of text within their container, but there's really no equivalent for non-text elements.]]> One aspect of HTML and CSS I’ve always felt is lacking is the ability to distribute elements evenly within its container. Using the CSS rule text-align:'justify', you are able to justify lines of text within their container, but there’s really no equivalent for non-text elements.

This became a problem a few weeks ago when a client requested that their site menu span the entire width of the page. Before discovering CSS, I would accomplish this using tables and images. But since then, I’ve learned that images are quite inaccessible and can be very difficult to maintain when the menu changes, and since this site was being built using CSS, I wanted to keep tables out of the design as much as possible. So, for the time being, I created something like the following.

1
2
3
4
5
6
7
8
9
10
11

<html>
	<body>
		<ul id="container">
			<li>Home</li>
			<li>About Us</li>
			<li>Services</li>
			<li>Resources</li>
			<li>Contact Us</li>
		</ul>
	</body>
</html>

distribute_noscript.gif

That was all well and good, but it wasn’t going to fly with the client.

After digging through CSS documentation and finding little that addresses this problem, I decided the best way to accomplish this effect was to use javascript to dynamically generate CSS. I’m hoping a feature is added to CSS soon since I’m not a big fan of using javascript for design.

While scripting this method, I made a list of characteristics I’d like to see it have.

  1. Utility
  2. Scalability
  3. Simplicity

With those goals in mind, I came up with this frame for the method.

distribute(container, elements, [direction = 'horizontal', className = null])

Container (required)
The id attribute or HTML object of the container.

Elements (required)
The tag name of the element(s) you want to distribute within container (e.g. ‘li’, ‘img’, ‘div’).

Direction (optional)
The direction you wish to distribute elements. This can either be ‘horizontal’ (default) or ‘vertical’.

ClassName (optional)
If you have multiple instances of elements and only want to distribute certain elements, you may attach a class to those tags and pass that to the method. This property is null by default.

Let’s take a look at the script (the following script was written with Prototype).

1
2
3
4
5
6
7
8
9
10
11
12
13

var containerDimen = Element.getDimensions(container);
var element = $A($(container).getElementsByTagName(elements));
 
if (direction == 'vertical') {
	var containerHeight = containerDimen.height;
	containerHeight -= 
	(parseInt(Element.getStyle(container, 'padding-top')) 
	+ parseInt(Element.getStyle(container, 'padding-bottom')));
} else {
	var containerWidth = containerDimen.width;
	containerWidth -= 
	(parseInt(Element.getStyle(container, 'padding-left')) 
	+ parseInt(Element.getStyle(container, 'padding-right')));

The first thing we need to do is collect all elements within the container. We’re using the $A() method to make the results Enumberable so we can run them through an each() loop a little later. After we’ve gathered all the elements, we need to calculate the container width or height (depending whether direction is set for ‘horizontal’ or ‘vertical’). Since the box model calculates width as the sum of width and padding, we have to subtract the padding from the width to get the real width of the container.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

var elementWidth = 0;
var elementHeight = 0;
var i = 0;
 
element.each(function (e) {
	if ((className == null) || ((className != null) 
		&& (Element.hasClassName(e, className)))) {
		i++;
		var elemDimen = Element.getDimensions(e);
		if (direction == 'vertical') {
			elementHeight += elemDimen.height;
			Element.setStyle(e, { 
				marginTop: 0, 
				marginBottom: 0 
			});
		} else {
			elementWidth += elemDimen.width;
			Element.setStyle(e, { 
				marginLeft: 0, 
				marginRight: 0 
			});
		}
	}
});

Now that we have the container width (or height), we need to calculate the total width (elementWidth) of all the elements. If there were any margins applied to the elements for a noscript version, we remove them. i is used to count how many elements match the search criteria since className may or may not be null.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

if (direction == 'vertical')
	var leftover = containerHeight - elementHeight;
else
	var leftover = containerWidth - elementWidth;
 
var marginNum = i - 1;
var margin = Math.floor(leftover / marginNum);
 
element.each(function (e) {
	if ((className == null) || ((className != null) 
		&& (Element.hasClassName(e, className)))) {
		if (direction == 'vertical') {
			if (e != element[element.length - 1])
				Element.setStyle(e, {
					marginBottom: margin + 'px'
				});
		} else {
			if (e != element[element.length - 1])
				Element.setStyle(e, {
					marginRight: margin + 'px'
				});
		}
	}
});

We’re just about done! With the elements and container width calculated, we figure out how much space is leftover. The leftover space is divided by i minus one (we’ll only be applying margins to the right side of elements) to figure out how much space should be between each element. All that’s left to do after that is to place those margins on each of the elements.

With the javascript written, all that’s left to do is make a little modification to the HTML.

1
2
3
4
5
6
7
8
9
10
11

<html>
	<body onload="distribute('container', 'li')">
		<ul id="container">
			<li>Home</li>
			<li>About Us</li>
			<li>Services</li>
			<li>Resources</li>
			<li>Contact Us</li>
		</ul>
	</body>
</html>

distribute.gif

That’s it. It’s probably a good idea to add default margins to the elements for users with javascript disabled (any default margins get removed by the script). Enjoy!

Resources

The script in this post uses Sam Stephenson’s Prototype library. There’s some very good documentation for Prototype written by Sergio Pereira and over at script.aculo.us (another great javascript library).

Download the Source

All source code is provided under the Creative Commons Attribution-Sharealike License. If you agree to these terms, please view and download the entire source now.

]]> http://gmurphey.com/2006/09/06/distributing-elements-within-a-container/feed/ 11