Emastic CSS Framework

Emastic was created by Vladimir Carrer, a self employed web developer from Italy. The framework is lightweight weighing in at just below 4kb with the compressed version. Along with the download comes a grid system for aligning elements in a neat, well formed structure. (Emastic’s grid system has some problems, but I will discuss them later.) There is something special that Emastic offers to people, though, beyond saving them from writing their own CSS. This framework provides the developer a way to make beautiful elastic layouts using ems! To me this is the most compelling attraction to Emastic.

What is ems?

Most CSS designers out there (including me) use pixels for setting heights, widths, and font-sizes for the elements they are working with. This is all good and fun until you think a little bit about what that means for people who want to enlarge the text to see it better. In our pixel based layouts the text will get bigger but the elements themselves will stay the same pixel height/width.

If you are using ems for layout then you have given a more elastic component to the site. Now when the user enlarges the text on your page, all other elements will enlarge, too. It looks like the page is zooming in and out. If you use Firefox 3, it is similar to using the full page zoom feature.

This is what a site with an elastic layout will look like when you load it into your browser. Now if you think the text is too big or too small you can use the shortcut  + or  - to start resizing the text to a comfortable level. (I believe it’s Shift + and Shift - in Windows.)

When the pages layout is made with ems instead of pixels. This will happen:

Now the whole page looks as though you zoomed out away from it. All the elements are relative to one another!

Emastic makes creating and converting your site to ems very easy with all the prebuilt classes and id’s.

Typography

The style sheet dedicated to the overall typography of each page is pretty straight forward. Arial is used for paragraphs and beautiful Georgia is used for heading and caption text. Now not every page should use these two font-faces. In those cases simply editing the type.css file is easy to do. Locating and changing the font-family properties is no hard task since there are only four instances of the font-family property. 

Grid Work

Grids have become a popular development tool when making websites. They can be used to make very appealing layouts. Emastic, though, is lacking in the grid department. The framework comes with a grid overlay system but thats about it. The grid offers little room for customization and no vertical line adjustment, only horizontal. In my opinion being able to line up elements vertically is very important. Maybe even more important than horizontally aligning elements. 

I expect in later version Emastic this problem will be addressed, but I hope that it will be made a priority because just a little grid work can be a great asset to any site.

In Conclusion

Overall I deem Emastic a well thought out and excellent framework for any level of developer. Being that it’s only in beta right now, there is room for improvement. If Vladimir keeps actively developing his framework, he will be sure to see positive feedback and use of his product. 

To check out Emastic for yourself visit his google hosted site. You can also download the files directly.

To use TwitterThis simply drag this link TwitterThis to your bookmarks toolbar. Now whenever you are on a site that you would like to link to from twitter, just click the bookmark in your bookmarks bar and you will be taken to twitter and the url address of that page will be inserted into update area.

The Code

javascript:void(location.href='http://twitter.com/home?status='+escape(location.href))

update July 24, 2008
Gabe Jamison remodeled the script a little bit so that it will open up in a new window instead of opening in the same window. TwitterThisInAnotherWindowBesidesTheOneYouAreIn

javascript:void(window.open('http://twitter.com/home?status='+escape(location.href)))

The Reason

I know it’s not particularly hard to copy, go to twitter, and paste but this will save you a few clicks. So enjoy!

Ever had a similar experience?

As you can see, there is a very noticeable difference between the left and right sides of the above image. The left side is just what the image looked like in Photoshop before saving. The right side of the image is after “Saving for Web”. The colors are just faded and not quite as vibrant as I would like. 

After much searching I found someone to explain to me just what was going on with my images. The post on the Vidget design blog was straight forward and answered my question perfectly. 

This is what the above image should look like:

How to fix your rig

The amazing thing about this is that it’s really easy to persuade Photoshop to do what you want. Since Vidget already made a great post about this I will just skim through the process. There is no need to reinvent the wheel.

Step One

Edit > Color Settings > Monitor Color

Step Two

View > Proof Setup > Monitor RGB

Step Three

Save for web > (Circle w/ arrow in it) > Convert to sRGB (uncheck)

note: While in save for web mode you can toggle between checked and unchecked on the “Convert to sRGB” mode to see the difference in color.

Easy as pie. Now that pesky little problem of color shift should be gone. There might still be a discrepancy on mediums such as different monitors. That is just the way the monitor displays and it’s out of your hands.

To being with you will need the three images that will be the background, middle ground, and foreground.

HTML

< body >
< div id="content" >
< h1 >Go Green or the Incredible Hulk will kill you< /h1 >
< div class="push" >< /div >
< /div >
< div id="wrap" >
< div id="inner_wrap" >< /div >
< /div >
< /body >

HTML Explained

The body element will have the background grass image attached to is just like in How to Make the Parallax Effect.

The div with the id content is where this tutorial starts to differ from the last. Now we will be interlacing our content area with the div elements that construct the parallax to give even more of a three dimensional look. Now it will look like the content area is in front of the background grass, but behind the middle and foreground grass. As indicated by the heading 1 element, this is where the content of the page will go. 

The div inserted at the bottom of the content div is an empty element that is needed complete the sticky footer. I will discuss is later in in the CSS explanation. 

The following two divs wrapper and inner_wrap are what complete the parallax. Attached to these div elements are the middle and front grass images. 

note: The only place that actual content of the site should go is in the div with the id content. 

CSS

body {
	height:93%;
	background:#C6FF93 url(back_grass.png) repeat-x 10% bottom;
}
html {
	height:100%;
}
#content {
	width:600px;
	min-height:100%;
	height:auto !important;
	height:100%;
	margin:0em auto -5em;
	margin-bottom:-450px;
	margin-top:50px;
	background:#fff url(hulk.png) no-repeat center 130%;
	border:1px solid #87AF63;
}
#content h1 {
	font-family:arial;
	color:#4A6037;
	text-align:right;
	width:50%;
	margin:60px 20px 20px 200px;
}
.push {
	height:29em;
}
#wrap {
	width:100%;
	height:29em;
	background:url(middle_grass.png) repeat-x 50% bottom;
}
#inner_wrap {
	width:100%;
	height:29em;
	background:url(front_grass.png) repeat-x 100% bottom;
}

CSS explained

As mentioned previously the body element has the background grass image attached. Also you will notice that the height property is set to 93%. This starts the sticky footer process and will usually be 100% with most situations. With ours though, 93% was the optimal setting. 

Next in line is setting the height of the html to 100%. This can also vary depending one your implementation. If this isn’t set to 100% or close to it the divs will sort of shrink wrap to the content and not expand completely to the bottom of the browser window. 

Now the content div. This is where the code gets a little redundant. There little hacks in the code to cover different browsers. Such as newer browsers support the min-height property, but ie6 doesn’t. That is the reason for the multiple height property settings. The negative bottom margin is to pull the wrapper div up over the content div so that you get an overlay look with the images.

The div with its class set to push sets how the content part of the page will react to height adjustments. It kind of puts a stopper on the content div when the browser height is shortened. The height property should also be adjusted depending on your page. 

The height setting for the wrapper and inner_wrap divs should be set to the same height as the push div so that the content and grass all stop at the same time when resizing the browser. 

One problem that I have found with this code is that in Firefox the background image will keep going up with the browser when shortened. This is because the height of the body element is set to 100%. It works fine in Safari, but if anyone can find a fix for this I will update this post. 

First go with a parallax

Example

Using Adobe Illustrator and Photoshop I quickly put together the necessary images that were needed to create the effect.

Back most image

This rain drops in this image are smaller, lighter, and somewhat blurry considering that they will be the farthest away from the eye.

Middle image

The middle image is the focal point of three images. This image should be the most detailed and clear to see.

Front image

This image must be fairly blurred, large, and less detailed than the others. This is because it is the closest to the persons eye.

The code

Now that we have our three images made, all there is left to do is add the simple code to finish the effect.

HTML

Two empty div elements are all that are needed.

< div id="wrapper" >
	< div id="sub_wrap" >

	< /div >
< /div >

CSS

Attach the back image to the body element and horizontally position the said image to 10%. Do the same thing with the wrapper div and sub_wrap div using the last two images. Play around with the horizontal positioning of each of the images until you’re comfortable with the way that they move indifferently to each other.

* {
	margin:0;
	padding:0;
}
body {
	background:#D9E0FF url(back.png) repeat-x 10% 0px;
}
#wrapper {
	width:100%;
	height:320px;
	background:url(middle.png) repeat-x 30% 0px;
}
#sub_wrap {
	width:100%;
	height:320px;
	background:url(front.png) repeat-x 80% 0px;
}

See? It’s not hard at all. I was amazed at how easy it was to make it work. Keep in mind that the images should be transparent PNG’s so that you can see through to the images underneath.
Next I will show you how to make a parallax effect on the bottom of the browser. This uses another technique called a sticky footer to work properly.

Here is a sneak peak:

Other Sites

Here are some other sites that use the motion parallax effect.

SilverBackApp

Rissington Podcast

Kremalicious

Inner Geek (vertical parallax)

Really Worried

Viemo

Although not quite as apparent as the others. There is still some parallax action going on there.

update (8/31/08): Thanks to Tyler Stalder

webdev.stephband.info

This is a parallax effect created with javascript using the popular javascript framework JQuery.

Companies might use a bird logo because birds symbolize freedom, and no boundaries. This instills an emotional attachment in a user, and possibly influences them into being a loyal customer of their product or company.

Having noticed a few bird logos around the web, I decided to do a little searching for some more. Here is a round-up of the bird logos I have found.

Twitter

Twitter.com is a web startup from San Francisco that based their whole business off of birds. On the site you can submit tweets that are up to 140 characters, and allow you to say anything you want throughout your day.

Update: Tyler Stalder informed me in the comments that the first picture in the above set is actually the logo for Twitterific. A Mac OSX Twitter desktop client. 

Twitter uses a few different renditions of their logo, but their newest styles have gone for simplicity, which is always a good thing.

Adium

Adium is a free instant messaging application for Mac OS X that can connect to multiple instant messaging clients such as MSN, AIM, Jabber, Yahoo, and many more. Their logo is a small green duck that has a little more detail to it than the twitter logo.

Thunderbird/Firebird

Mozilla Thunderbird is a free, open source, cross-platform e-mail client developed by the Mozilla Foundation.

The picture on the left is the original Thunderbird logo. After going through a dramatic redesign, the logo changed considerably into the right image. This new logo is better suited with the Mozilla Firefox, a free open source web browser (logo pictured below). Firefox started off with a bird logo also. It was first called Phoenix, and then Firebird before revamping and becoming Firefox.

Linux

Linux is a free, open source, Unix-type operating system that is used world wide. Linux has a very popular logo, and has even gone so far as to name their mascot. This is a picture of Tux:

Chyrp

Chyrp is a blogging engine designed to be very lightweight while retaining functionality. Their bird logo is a sophisticated bird with a monocle and a top hat. While the bird is the mascot of the site, the actual logo accompanying the project name is three feathers floating in air.

Well thats it. These are some examples of using birds to build a brand around a company. There are many different styles used, and all are custom made to show some kind of personality about the company they represent. If you have any examples of other sites using a bird as their logo, let me know and I’ll update this post.

You can brand your logo everywhere with these promotional items including our personalized pens and company stress balls too. 

I had been following the comic for a little while, and thought it would be really cool to see myself as one of his characters. After a long wait I finally got my chance to shine.

Update

Recently on MyExtraLife Scott posted a video by ToonGoon that he made with the comic that I starred in. He did a pretty good job making the characters come to life. Scott actually did the voice.

There are quite a few different types of image replacement out there. I want to focus on two specific ones in this post. The Phark method, and the Shea method. These are, in my eyes, the best two types of image replacement techniques to date. I have created my own technique for image replacement, but usually use Phark, or Shea just for shear ease of implementation.

The Phark Method

Being so easy to use, the Phark method is probably the most widely used method. It consist of one image, and one css property. So here we go:
Say you have a heading element such as an H2 that you want to use a non-standard font for. First what you would do is set up the heading just like you normally would do.

<h2>Image Replacement</h2>

The next step is to create the image that you will want to replace the text. Here is and example that I quickly created using photoshop:

Set the width and height of the h2 element so that it will accommodate your image suitably.

h2 {height:67px;width:240px;}

Now add the image to the background of the heading tag, and also get rid of the currently overlaying text:

h2 {
background:url("img/image_replace.png") no-repeat left top
text-indent:-9999px;
height:67px;
width:240px;
}

Image Replacement

The text-indent property does the work of pushing (or pulling rather) the text off screen by giving it a negative indentation which is just a very large number beyond the width of most monitors. You might think that since the text is being pulled off the screen that far that the horizontal scroll bar will be able to scroll all 9999px’s to the text. This won’t happen, though, because your browser doesn’t respond to text-indentations.

Buuuuuut…

Of course with every problem there is a solution, and with every solution there is a but. If on the off chance that someone is browsing to your site with CSS turned on in the browser, but have images turned off. There will be a big blank spot where your crazy awesome picture once resided. This is taken car of with the Shea method.

With the Shea method all you need is one empty span tag placed in between the opening heading tag, and the actual heading word(s) as so:

<h2>Shea Method</h2>

Now all that is left to do is add the CSS.

h1 {
width:329px;
height:25px;
position:relative;
}
h1 span {
background:url(img/image_replace.png) no-repeat;
position:absolute;
width:100%;
height:100%;
}

What this does is overlays the span (with this image in it) on top of the h2 (with the text in it) hiding the text from view. So now if CSS is turned on but images off the user can still see underlying text. Tadaa!

Shea Method

Buuuuuut

Again another but?? They only problem with the Shea solution is that if the image being used for the heading has any transparency the underlying text will show through.

Shea Method

All in all there are a bunch of different methods for image replacement. None of them are perfect, but with a little compromise, I’m sure you’ll be able to find a method that will suit you well.

As I built out the new template, I would make sure to check firefox, ie6, and ie7 for compatibility. In all three browsers the colors weren’t as vibrant as I had created in PS. Even when using the colors with the “only web colors” option turned on. Again I just thought that there was some color loss in the saving process of the images. It was only after I checked in Safari and saw that the colors were beautiful, and just how I had originally created them that I wanted to find out why the other browsers didn’t display the correct colors.

Here are a few screen caps of the differences. Notice the differences in the oranges. I used the web only hexadecimal value #cc6600. The top orange part in each image is what is actually in the browser. The bottom orange part is the photoshop .psd file.

Notice how ie and Firefox display the orange the same, but are very different from Safari.

After doing some searching around the main piece of information that I found out was browsers like firefox, ie6/7, and others do not support ICC profiles.

The purpose of the ICC is to promote the use and adoption of open, vendor-neutral, cross-platform color management systems.

Safari on the other hand does have support for profiles 4 and 2. Essentially this means better, deeper, more vibrant colors for the user. Although I have not had a go with Firefox 3 beta version yet there is tell that it will have better ICC standards support, and also that Microsoft is putting some time into the coming up with a solution to this problem.

If you would like to know whether or not your browser supports these “Profiles” there is a very simple test you should try.

We can only hope to see browsers lacking support for these color standards work hard to quickly start implementing the ICC’s Profile Version 4 so that people can get the exact (or as close as current technology will allow) color matches between their original creation and their site.

Anyways to get the ball rolling with some new jive here at dylanbathurst.com I thought I would make a post about what I have been interested in lately:

Typography

After seeing a site called iLoveTypography.com on digg.com I was instantly hooked.

I have kept up on post on Johno’s site, and leave comments or questions in the comments. I have learned an incredible amount about typefaces and fonts. Before discovering this site I had never really given typography much thought, but reading about it from someone with a lot of passion towards typography has made the topic more appealing to me.

I discovered that my university offers a typography class, which I enrolled in right away. I’m not sure if I will get what I want out of it, considering this is a D2 college, and I have been disappointed by more than on of my past professors. I will give it my best though and try to take away as much as I can.

(Web) Comics

One great thing about my university is that one of the professors taught a 1 credit hour class about Comics & Film. I had always really enjoyed watching movies and cartoons that spawned from comic books, but never actually got into the comic books themselves. I was introduced to many different comic book characters, and got a lot of history about comics, and also about certain characters.

For the final in the class we had to write a minimum of 5 pages about a particular comic that was made into a movie. I chose “The Mask”, and set out to learn as much as I could about the similarities and differences between the comic and movie. Digging that deep into the comic and movie was oddly very fun for me. I’m not usually one to actually like research papers.

I ended up writing nine pages over all which you can download if you want to read through it.

Comics I read:

• The Mask
• The Ultimates
• Watchmen

Web comics I read:

• XKCD (favorite)
• Player vs. Player
• Penny Arcade
• Hijinks Ensue
• MyExtraLife
• Ctrl+Alt+Del

So there are a couple of the latest topics I’m into. Finding new interest is something I have been working on for quite a while now. It’s hard to get away from what is comfortable but picking up these new interests has helped me make new friends, and expand my horizon.

To my two faithful readers (and anyone else who accidentally finds this site) what are you all interested in lately?