DevGrow » Freebies

20 Free Fonts Every Web Designer Should Have

Monji — Mon, 23 Aug 2010 23:24:02 +0000

As a web designer I’m always on the lookout for great-looking free fonts to use in my projects. I’ve compiled a list of some of my favorite fonts from 3 great sites: DaFont, 1001 Fonts and FontSpace. Check them out and leave a comment if you use them:

Bebas Neue

Swansea

Katy Berry

Bradbury Sans Light

SF Old Republic

28 Days Later

PTF Nordic

Que FONTita!

Grantham

Bandung Hardcore

Ghetto Marquee

Sansumi

Times New Yorker

Expressway

Elementale

Clementine Sketch

Caviar Dreams

Boister

Comfortaa

Base

Conclusion

Like I said above, if you use any of these fonts, leave a comment or a link so we can check it out. If you have any other free font suggestions leave those as well, as I’d love to add them to my collection.

And as always, please subscribe to the RSS feed and follow us on Twitter!

Free Photoshop Invoice Template

Monji — Mon, 02 Aug 2010 22:14:17 +0000

I finally got around to redesigning my client invoice template and I’ve decided to share it with you guys. It’s in PSD format and you’re free to use it for whatever you’d like! Simply open the document in Photoshop, add new items, save it as a PDF and email it to your clients – a few quick steps to a professional invoice.

Invoice Preview

Download

The following is a PSD organized into multiple layers and folders. Use the invoice template however you’d like, feel free to change it and redistribute it as you see fit!

Download PSD (zip file)

Feedback

The invoice design itself takes a lot of influence from several web apps, including Ballpark, Freshbooks and Blinksale. I personally don’t send that many of them so I haven’t signed up for their services, however if you work with a lot of clients on a monthly basis, be sure to check them out!

As always, any feedback is highly appreciated! Also, please be sure to subscribe to the RSS feed and follow us on Twitter.

20 Free Fonts Every Web Designer Should Have

Sharebar WordPress Plugin

Monji — Wed, 09 Jun 2010 20:50:14 +0000

Note: I’m moving support for this plugin from the comments to the Discussion Forum in hopes of keeping things more organized. Please post your support questions and requests there.

My first ever WordPress plugin! Sharebar adds a dynamic and fully customizable vertical box to the left of a blog post that contains links/buttons to popular social networking sites. For wide blogs, a vertical bar with popular sharing icons appears on the left of your post. If the page is resized, the vertical bar disappears and a horizontal sharebar appears under the post title.

This Sharebar isn’t a new idea at all, in fact the plugin is meant to mimic Mashable’s bar almost exactly. I most recently saw the effect on Inc. Magazine and after trying to find a plugin for it without success, I decided to make one myself. As with all of my plugins, I tried to keep things simple but customizable, so some effects were sacrificed for performance gains.

Try it Out!

I’ve enabled the plugin on this page so you can try it out – it should appear to the left of the post. If you resize the browser to less than 1000px, the sharebar should disappear from the left and a horizontal Sharebar will appear beneath the post title.

Download

You can view the plugin details at WordPress.org or view a simple demo.

Sharebar WordPress Plugin (zip)View Demo

Usage Instructions

WordPress makes the process pretty painless: download the plugin, upload it to your plugins directory and activate it in the WordPress admin panel. The plugin is enabled automatically when you activate it so that’s really all there is to it.

Settings and Customization

You can change nearly everything about the plugin from the Sharebar settings page (in the WordPress admin under Settings). The main page displays all of the active plugins – from here you can change their order, edit the button code or delete them. You can also add new buttons or reset them to the default configuration, which features TweetMeme, Facebook, Google Buzz, Digg and a standard e-mail button.

The Settings page allows you to disable the plugin from automatically adding the sharebars – this is useful if you’d like to position them somewhere other than before the post content. You might need to do this if your template or theme uses the overflow CSS position, as that may sometimes prevent the Sharebar from being visible outside of it’s container element. You can also disable the horizontal share bar that appears beneath the post title, change the location of the main vertical Sharebar (left or right) or adjust the offset/margin of the Sharebar element.

Lastly, you can also change the way the Sharebar element itself looks by modifying the CSS file found in the plugin folder. The design of the bar is meant to generic, feel free to customize it to fit your needs.

Compatability

I’ve tested the plugin on Firefox 3, IE7, Safari, Chrome and Opera – it seems to work fine in all of them. How it looks on your blog can depend on your theme and CSS files, however, so check those files first to identify the problem (the overflow:hidden; CSS declaration can hide the bar at times).

Final Remarks

Since this is my first WordPress plugin, please let me know what you think and if it’s useful to you. I’d love to hear suggestions on how to improve it. This is my first public foray into WordPress development but I’ve also been making a lot of progress on my custom themes framework, I think a lot of you will like them once they’re released as well. Also, all of the files are on Github, so feel free to fork away!

As always, please subscribe to RSS feed or follow me on Twitter for more posts and goodies like this.

iPhone Style Radio and Checkbox Switches using jQuery and CSS

Monji — Fri, 26 Mar 2010 18:29:42 +0000

For my latest project, I created a great interface for an administration panel, complete with great looking forms and buttons. The one thing that stuck out like a sore thumb, however, were the ugly radio buttons and checkboxes I had to use repeatedly throughout the panel, so I decided to fix them. I found a few plugins that achieved what I wanted, however they were all pretty hefty in file size. My version doesn’t look as cool but makes up for it in file size, weighing less than 3kb and using only one image.

Download Files Now

The Effect in Action:

This is in an iframe, however you can also view the page itself. In my example, I left the actual input fields visible, in a real world use you should hide them using CSS. Feel free to reuse the source code, or follow the steps below:

Prerequisites

You need just two things for this to work correctly: JQuery 1.3.2+ and the switch.gif image file used for the backgrounds (both included in the zip file). After you have those two files, follow the steps below:

Step 1 The HTML

1
2
3
4
5
6
7
8
9
10
11

<p class="field switch">
<input type="radio" id="radio1" name="field" checked />
<input type="radio" id="radio2" name="field" />
<label for="radio1" class="cb-enable selected"><span>Enable</span></label>
<label for="radio2" class="cb-disable"><span>Disable</span></label>
</p>
<p class="field switch">
<label class="cb-enable"><span>On</span></label>
<label class="cb-disable selected"><span>Off</span></label>
<input type="checkbox" id="checkbox" class="checkbox" name="field2" />
</p>

Step 2 The Javascript

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

$(document).ready( function(){
$(".cb-enable").click(function(){
var parent = $(this).parents('.switch');
$('.cb-disable',parent).removeClass('selected');
$(this).addClass('selected');
$('.checkbox',parent).attr('checked', true);
});
$(".cb-disable").click(function(){
var parent = $(this).parents('.switch');
$('.cb-enable',parent).removeClass('selected');
$(this).addClass('selected');
$('.checkbox',parent).attr('checked', false);
});
});

Step 3 The CSS

1
2
3
4
5
6
7
8
9
10

.cb-enable, .cb-disable, .cb-enable span, .cb-disable span { background: url(switch.gif) repeat-x; display: block; float: left; }
.cb-enable span, .cb-disable span { line-height: 30px; display: block; background-repeat: no-repeat; font-weight: bold; }
.cb-enable span { background-position: left -90px; padding: 0 10px; }
.cb-disable span { background-position: right -180px;padding: 0 10px; }
.cb-disable.selected { background-position: 0 -30px; }
.cb-disable.selected span { background-position: right -210px; color: #fff; }
.cb-enable.selected { background-position: 0 -60px; }
.cb-enable.selected span { background-position: left -150px; color: #fff; }
.switch label { cursor: pointer; }
.switch input { display: none; }

Alternatively, you could use a single hidden input field and change the value of it using JQuery. I used this method mainly to illustrate the effect works, as you can actually see the form values changing (to make sure it works).

I know it doesn’t have the fancy animation effects of the alternatives but give it a shot and let me know what you guys think!

Edit: If you look back a few posts, I mentioned that the new JQuery UI includes this functionality. While I considered it for this project, I didn’t need any of the other features offered by JQuery UI, so I opted to create my own simpler version (and save 30-40kb in file size).