Today, I am opening that vault and releasing my three favorite for free— Crossed Up, Zig Zag and Waves.

Crossed Up Tiling Image

Zig Zag Tiling Image

Waves Tiling Image

Download Package

With the download, you get the original layered PSD files for all 3 tiles, .jpg images and a Photoshop .pat file to install. I hope you find these to be useful to you in some way. Feel free to alter, change, warp or distort at will and be sure to share what you’ve been able to used them for.

Download Patterns .zip File

Today we are releasing a set of seamless paper textures, in six different color flavors, for you to download and use immediately in your next website design project.

These are low resolution images and not intended for print use.

The zip archive has everything you need from individual jpg images to a Photoshop Pattern set containing all six patterns. Play with the demo and switch between the 6 different textures.

View Demo

What you get in the download

• one (1) jpg image – Purple
• one (1) jpg image – Red
• one (1) jpg image – Orange
• one (1) jpg image – Blue
• one (1) jpg image – Brown
• one (1) jpg image – Green
• 1 Photoshop Pattern set containing all six colors

You can use these openly and freely as well as redistribute as long as there is a credit and link back to this post. Please do not directly link to the download file.

Download File

Well, one of the many reasons why I exclusively went from using TextMate by MacroMates to Coda by panic was the ability to create a Code Clips library to increase my work flow. This not only sped up my level of productivity but, as I often have the proclivity of doing, made sure I didn’t type any incorrect syntax on items I use for nearly every site.

So, if you are new to Coda, have the software installed and haven’t started your own library of code snippets, I want to share 4 of my most commonly used CSS snippets. (Note: These are a combination of my own home grown code snippets and tricks I’ve learned along the way from other developers. I am not advocating that these examples are the only way to achieve the end results.)

Installing code clips in Coda

To install any of the snippets, copy the code from this page. Launch Coda and choose Windows » Clips. This will bring up the Clips window with the default clips that were installed with the application. For organization, I would recommend creating categories (I have categories for HTML, CSS, and WordPress). Once your categories are set, select the one you want to add a clip to and click the plus sign. Give it a title and past the code. Simple.

How to use code clips in Coda

Using the code clips are even easier than installing them. Simply open the Clips window, choose and clip and click Insert. The clip will be inserted in the active document window at the current location of the cursor.

1. CSS Clearfix

If you hand code your own CSS, you know that clearing floats is a beast unto itself. Some developers, including myself in the past, will place an empty div class named “clear” after the floated elements. In their stylesheet, this class will have property of clear: both. What I didn’t like about this solution was that you would end up with all of these empty divs throughout your page. And then, someone introduced me to the CSS Clearfix solution and I was sold.

.clear {
     display: inline-block;
}
 
.clear:after {
     clear: both;
     content: ".";
     display: block;
     height: 0;
     visibility: hidden;
}

This bit of code is quite ingenious and works flawlessly in IE 6 (which is a gift by itself). To implement, append this class to any div that contains floating elements and you are in business.

<div id="whatever" class="clear">
     <!-- Insert floated elements -->
</div>

2. The Wrapper

Some of us call this class a “wrapper” others call it a “container”, but we all use it to control the width of the content on our pages. I know that I personally use the exact same width size of 960px for the content on every site I design (this does not include background decorative elements). This snippet insures me that my body content will center and fit nicely on all monitors.

.wrapper {
     margin: 0 auto;
     position: relative;
     width: 960px;
}

As the name indicates, this element will “wrap” around all of the elements on the page, constraining them to 960px and centering it for you. (Note: You can alternately have another snippet that does not center by removing the margin property.) And, since this is a class and not an id, I can use this several times throughout a page which comes in handy when I split up content with different backgrounds.

<div class="wrapper">
     <!-- site content goes here -->
</div>
 
<div class="wrapper">
     <!-- more content -->
</div>

3. Site Logo Image Replacement

I will state up front that not everyone uses image replacement for website logos. It is a method I learned many moons ago and I haven’t found a good reason to drop it yet (which doesn’t mean that I won’t). What you basically are doing is giving an h1 tag a class of “logo” and replacing the text with your logo image. You also want your logo image to be an anchor, usually to your home page, so you need to have a style for this class’ anchor tag for this as well.

h1.logo {
	background: url(pathtoimage/nameofimage) no-repeat 0 0;
	display: block;
	height: ; /* your logo image height */
	text-indent: -9999px;
	width: ; /* your logo image width */
}
 
h1.logo a {
	display: block;
	height: 100%;
	width: 100%;
}

This one is quite simple. You mark up your h1 tag like you would normally and give it a class name of “logo”. If you look under the hood of every site I’ve coded, you will see the following code:

<h1 class="logo"><a title="" href="#">Text</a></h1>

4. Floating Left & Right

A CSS property you will find yourself using more often than not is the float property. Instead of assigning these properties to every necessary selector in my stylesheet, I will sometimes create a class of “right” and “left” that I can use at will in the mark up that will reference the necessary property.

.left {
     float: left;
}
 
.right {
     float: right;
}

Now I am free to add the necessary class to any div element, including an element that already has a class, without having to write a specific float property for that element. I cannot tell you how much time this saves me when developing a site.

<div id="whatever" class="left">
     <!-- whatever you are floating left -->
</div>
 
<div id="something" class="right">
     <!-- whatever you are floating right -->
</div>
 
<div class="someclass left">
     <!-- add multiple classes to the same div -->
</div>

Conclusion & Other Resources

I know that none of these snippets are reinventing the wheel by any stretch of the imagination. Whether you are new to hand coding or a Jedi master, I hope you are inspired by this post to start your own library of code snippets in Coda. This bit of work now will streamline your work flow and eventually save you hours of headache.

For a more advanced list of clips, check out Coda Clips and CSS Tricks. You can even download the clips right into the application without copying and pasting.

Remember, Illustrator is not a native layout application and complex layouts should be created using Adobe InDesign or Quark. But, for simple projects, I find Illustrator to be a quick and dirty solution.

The individual templates included in this package are:

• One (1) 11” x 8.5” Tri-Fold Brochure Template
• One (1) 8.5” x 11” Letterhead Template
• One (1) 3.5” x 2” Horizontal Business Card Template
• One (1) 2” x 3.5” Vertical Business Card Template
• One (1) 9.5” x 4.125” Envelope Template

Each template contains all of the necessary bleed, trim and safe guides for professional printing and is compatible with Adobe CS, Adobe CS2, Adobe CS3 and Adobe CS4.

Download Files

How to Install the Templates

Once you have downloaded and unzipped the package, locate the folder named “pixel8 AI Print Templates”. Place this folder inside your Templates folder (which will be located in the Cool Extras folder inside the Adobe Illustrator application folder).

Now, launch Adobe Illustrator. From the top menu, choose File » New From Template and select the template file you would like to work. You will notice that your file has been named “Untitled-1”. This is because Illustrator will open an instance of the template and not the template itself. You can now begin working.

That’s it! I hope you find these files to helpful and they should save you hours of work flow time. Let me know by leaving a comment.

Included in the zip archive, you get the fully editable shapes to load in Photoshop and the original Adobe Illustrator vector file these shapes were created from. And, because these are vector based, you can resize them to whatever proportional dimensions you like without losing any detail.

Download Now

Buttons

Icons & Logos

Icons & buttons included in the set:

• E-mail icon & button
• Search icon & button
• Twitter icon & button
• Facebook logo & button
• Digg logo & button
• RSS icon & button
• Generic User icon & button
• iPod icon & button
• Tag icon & button
• Document icon & button
• Shopping Cart icon & button
• Home icon & button
• Digitial Camera icon & button
• Security icon & button
• WordPress logo & button