Simple CSS Code Snippets for Coda

This journal entry was posted by Erik Ford 2 years, 173 days ago.

Let’s face it. Sometimes hand writing code is a repetitive action and can be very monotonous. This can quickly and easily lead to errors in your code without your knowledge which could ultimately turn into hours of debugging. Who wants that frustration especially when it turns out that all you did was forget to include a semi-colon or accidentally incorrectly spelled a CSS property?

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.