Yes, this is another round-up of fresh and useful Javascript techniques, tools and resources. But don’t close the tab yet, as you might find this one very useful. In this selection we present calendars, forms, buttons, navigation, debugging, optimization and compatibility tables as well as handy resources and tools. We also cover various jQuery-plugins that will help you extend the functionality of your website and improve user experience with ready components or coding solutions.

The last section also covers a number of useful educational resources such as a compilation of useful JavaScript coding practices, a detailed comparison of JavaScript frameworks and general JavaScript programming conventions. We are looking forward to your feedback.

You may be interested in the following related posts:

• 50 Fresh JavaScript Tools That Will Improve Your Workflow
• 45 Powerful CSS/JavaScript-Techniques
• 70 Useful AJAX And JavaScript Techniques

[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

Calendars and Timelines

jDigiClock – Digital Clock (HTC Hero inspired)
jDigiClock is a jQuery plugin inspired from HTC Hero Clock Widget.

jQuery Sliding Clock v1.1
jQuery transpearant Slider clock with CSS sprites.

Date / Time Picker
Note that this control is not designed to work in IE6; although it will function correctly in most cases, the positioning of the calendar may be way off depending on how your page is styled.

JavaScript Debugging and Validation Tools

Venkman JavaScript Debugger project page
Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Gecko-based browsers namely Firefox 3.x, the Netscape 7.x series of browsers, Netscape 9.x series, Mozilla Seamonkey 1.x and Mozilla Seamonkey 2.x. It does not include Gecko-based browsers such as K-Meleon 1.x, Galeon 2.x and Netscape 8.x. The debugger is available as an add-on package in XPI format. Venkman JavaScript Debugger has been provided as part of the Mozilla install distribution since October 3rd 2001.

CompanionJS
Companion.JS (pronounced Companion dot JS or CJS) is a Javascript debugger for IE.

How to Test your JavaScript Code with QUnit
QUnit is a powerful JavaScript unit testing framework that helps you to debug code. It’s written by members of the jQuery team, and is the official test suite for jQuery. But QUnit is general enough to test any regular JavaScript code, and it’s even able to test server-side JavaScript via some JavaScript engine like Rhino or V8.

JS Bin – Collaborative JavaScript Debugging
JS Bin is an open source collaborative JavaScript debugging tool.

Forms, Buttons & Navigation

Making a Google Wave History Slider
Here is shown how to create a Google Wave-like history slider. Using it will enable visitors to go back and forth in time to view the changes that take place on a comment thread.

Fancy Radio Buttons With jQuery
Creation of 2 mandatory option sets that a user could choose, while hiding off the radio button inputs and using an anchor links to make it a bit more usable.

Creative Button Animations with Sprites and JQuery
Fading hover effect for which the transition is smoothed with JavaScript, using jQuery library.

Password (un)Masking
JavaScript jQuery that toggles the masking and unmasking of the password field.

jQuery MagicLine Navigation
These “sliding” style navigation bars have been around a while, and turns out it’s really pretty darn easy. Here are put two examples together.

Fixed Fade Out Menu: A CSS and jQuery Tutorial
The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again. Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page.

jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields
The best way to explain what this plugin does is to mention Twitter. Twitter posts are limited to 140 characters. While typing the Twitter post there is this always present information about how many characters the users have before reaching the limit. The information is not only provided merely by displaying a number, there are different colors applied to certain stages to notify the user about the status.

Sliding Labels v2
Form label keeping the label inline, but sliding it off to the left rather than going away on click.

Ketchup Plugin
Ketchup is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality.

Layout tools

jQuery {css}designerGrid Plugin
{css} designerGrid is A jQuery Plugin developed for website interface developers who use the grid system of layout. {css} designerGrid is intended to assist these developers with CSS prototyping.

css-template-layout
JavaScript (jQuery) implementation of the CSS Template Layout Module

How to create a fluid grid with jQuery
Grid-based layout is probably the more preferred way to style up a webpage to give it more magazine-like look and feel. This tutorial is about how to use CSS and Javascript to create a fluid grid-based layout (See demo here). The algorithm/procedure used in this tutorial is very simple and straightforward. There are more advanced algorithms out there which can handle multiple scenarios. But the purpose is to understand the basic logic on how to create such layout. So here it goes…

closure-templates
Closure Templates are a client- and server-side templating system that helps you dynamically build reusable HTML and UI elements. They are easy to learn and customizable to fit your application’s needs. Closure Templates support JavaScript and Java and use a data model and expression syntax that works for either language. You can also use the built-in message support to easily localize your applications.

Useful jQuery Plugins

TipTip jQuery Plugin
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window. TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS. It’s also only 3.5kb minified!

jQuery Roundabout
Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!)

jParse – jQuery XML Parse Plugin
jParse is a jQuery plugin that allows you to parse XML that was fetched with the jQuery .ajax method (making it fully customizable).

jQuery Quicksand plugin
Reorder and filter items with a nice shuffling animation.

typeQuery, change website typography with jquery
typeQuery gives the flexibility to change the font-family for everything you define with class, id, or tag, this example is referring to the selected item on a select object with id=”tag” and the font-family value at select object with id=”family”: $($("#tag").val()).css("font-family", $("#family").val());

Flip! A jQuery plugin v0.9.9
Flip is a jQuery plugin that will flip easily your elements in four directions.

Data Encryption With JavaScript: jCryption
jCryption is a jQuery plugin for encrypting POST/GET data submitted by forms. It uses public-key algorithm of RSA for the encryption & has a PHP file for handling the decryption of data.

Minimalist jQuery: 11 useful plugins under 4K
jQuery makes our lives easier. So much so that it’s tempting to use it all the time, inadvertently slowing our page load times (cue YSlow and Hammerhead). Combining, compressing, and delivering scripts at the end of your page helps in the HTTP request department. On the file size front, below are jQuery plugins that give solid bang for your performance buck.

Undo/Redo in jQuery
An easy-to-use plugin for adding undo/redo capabilities to a jQuery application. It is based loosely on the Objective-C/Cocoa way of doing things.

editease
editEase – jQuery CMS | no fuss, no database, no worries

jsHub
jsHub is a single piece of JavaScript (a “tag”) that can handle reading different sorts of page information and then send them to many different vendors’ products. One piece of code to send to Google Analytics, Omniture SiteCatalyst, WebTrends and Mixpanel. Instead of one piece of JavaScript per vendor, jsHub has a single piece of code (the “hub”) and plugins that know how to translate into the required wire protocol for each vendor. Vendors only maintain the plugin for their product.

Educational JavaScript Resources and Tutorials

Caffeinated Simpleton
JavaScript is an amazing little language, but it’s got some quirks that turn a lot of people off. One of those quirks is this, and how it’s not necessarily what you expect it to be. this isn’t that complicated, but there are very few explanations of how it works on the internet. This article is an attempt to explain how this works and how to use it properly.

What You Need To Know About JavaScript Scope
This article discusses how JavaScript handles scope and how various JavaScript libraries provide methods for dealing with it and how they smooth out a few bumps. We’ll also look at how you can get back to basics and do some interesting scope wrangling without a library, a useful approach if you’re writing code that needs to stand alone.

Learning Advanced JavaScript
A very nice tutorial to learn JavaScript, containing code and discussion from the upcoming book Secrets of the JavaScript Ninja by John Resig.

Highlight search terms automagically with JavaScript and mark
Script surrounding the search term(s) with the mark element rather than a span, although the class searchword is retained in case you want to style these marks differently from others. In the CSS, the rule article mark is just added to turn it a gentle shade of pink.

10 Really Helpful Traversing Functions in jQuery
With jQuery, selecting HTML elements is laughably easy. But at times, we may wish to further refine the selection, which can be a hassle when the HTML structure is complicated. In this tutorial, we’ll explore ten ways that we can refine and extend a set of wrapped elements that we wish to operate upon.

Using keyboard shortcuts in Javascript
If you want to enhance your web app, Javascript keyboards shortcuts is definitely something to consider. In this article, you’ll learn to use JS keyboard shortcuts, with and without the JQuery framework.

Code Conventions for the JavaScript Programming Language
This is a set of coding conventions and rules for use in JavaScript programming.

jQuery – Select element cheat sheet
This cheat sheet helps you to find the index of a selected option, set the selected option by value, set the selected option by text, insert a new option before or after another and get the text or value of the selected option.

Compare JavaScript frameworks
Modern Web sites and Web applications tend to rely quite heavily on client-side JavaScript to provide rich interactivity, particularly through the advent of asynchronous HTTP requests that do not require page refreshes to return data or responses from a server-side script or database system. In this article, you will discover how JavaScript frameworks make it easier and faster to create highly interactive and responsive Web sites and Web applications.

Park your Horse, Code Cowboy: Professional JavaScript Workflows, Part 1
In this series, we’ll talk about tools & techniques you can use to cover those No’s, and cut a lot of strife & embarrassment from your JavaScript experience.

JavaScript Reference examples (example source code)
JavaScript Reference examples, organized by Objects, Properties, Methods & Collections. Some Event Handlers Reference are also available.

JavaScript best practices
A compilation of best practices and good advice I’ve amassed over the years, much of it learnt the hard way (experimentation and suchlike). Take the advice below to heart and keep it in a part of your brain that has a quick access route so you can apply it without thinking about it. I am sure you will find things to disagree with, and that is a good thing – you should question what you read, and strive to find better solutions. However, I have found that following these principles has made me a more effective developer and allowed other developers to build upon my work more easily.

wtfjs
JavaScript is a language we love despite it giving us so much to hate. This is a collection of those very special irregularities, inconstancies and just plain painfully unintuitive moments for the language of the web.

Related Posts

You may be interested in the following related posts:

• 50 Fresh JavaScript Tools That Will Improve Your Workflow
• 45 Powerful CSS/JavaScript-Techniques
• 70 Useful AJAX And JavaScript Techniques

Poll

What programming language should we cover in next round-up?surveys

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 6 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: AJAX, javascript, jquery

Harmony is a new drawing tool, a HTML5/Canvas experiment with great potential. It provides some unique brush styles, and can produce some great-looking charcoal pencil style sketches, among other things. Better to try it out than explain it in words.

Creator Mr. Doob (Richard Cabello) explains how he used Canvas to make it darker the more you draw over it:

The whole thing is quite modular so I can keep adding more brush styles whenever I get inspired. During the process I found out that, for some reason (apparently lack of hardware acceleration), Firefox and Opera do not support context.globalCompositeOperation = ‘darker’. This was on the HTML5 spec before but got removed. Just so you know what I’m talking about, this is like the “multiply” blending in Photoshop. Webkit does support it tho. I hope they put it back on the specs and all browsers support it.

You can also save images using data URI encoding.

As it works on webkit, he made sure it worked on the mobile Android and iPhone browsers. No multi-touch as yet, but the touch UI still makes a nice input mechanism.

(Thanks FND)

Although CSS is generally considered a simple and straightforward language, sometimes it requires creativity, skill and a bit of experimentation. The good news is that designers and developers worldwide often face similar problems and choose to share their insights and workarounds with the wider community.

This is where we come in. We are always looking to collect such articles for our posts so that we can deliver the most useful and relevant content to our readers. In this post, we present an overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.

You may want to look at similar CSS-related posts that we published last months:

• 45 Powerful CSS and JavaScript Techniques
• 50 Brilliant CSS3/JavaScript Coding Techniques
• 5 Useful Coding Solutions For Designers And Developers

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

CSS Layouts: Techniques And Workarounds

Facebook Style Footer Admin Panel
Learn how to re-create the Facebook footer admin panel with CSS and jQuery. Also check out part 2.

Adaptable View: How Do They Do It?
This tutorial explains how to manually change a layout, and it shows two great examples and “how they did it.”

Easy Display Switch with CSS and jQuery
A quick and simple way to enable users to switch page layouts using CSS and jQuery.

Quick Tip – Resizing Images Based On Browser Window Size
In fluid layouts, formatting text to adjust smoothly to window size is easy, but images are not as fluid-friendly. This quick tip shows how to switch between two image sizes based on the size of the browser, the DIV or whatever else you choose.

One Page Résumé Site
A clean layout on one page—literally (just one index.html file with optional images). It comes with contact information in microformats and a main area for the resume using a definition list (dl). And it prints well.

Pegs: Automate Display: fixed++
Chris Wetherell posts on Pegs, a strategy for having one scroll bar but independent scrolling areas. After the first one, click on the other items to flip between sizes. You will see that an area’s scroll depends on the configuration.

CSS 100% Height
A common problem among designers is how to get a div to stretch 100% of the window’s height. There are a few different techniques out there, and this tutorial shows one of them.

CSS3 Drop-Down Menu
A clean, simple a nice navigation menu, designed by Nick La.

CSS Trick for a Scrolling Transparent Background Effect
Scroll the page to watch a battle between good and evil take shape. The effect requires two images: one transparent and one tiled gradient image. The gradient scrolls under the transparent PNG. Because it matches the colors in the PNG, each set of images disappears, depending on the part of the gradient they’re on top of.

Fluid Images
By default, an image element that is 500 pixels doesn’t exactly play nice with a container as large as 800 pixels or one as small as 100. What’s a designer to do?

Scroll/Follow Sidebar, Multiple Techniques
A really simple concept: the sidebar follows you as you scroll down the page. There are a number of ways to go about it. Two are covered here: CSS and JavaScript (jQuery), with a bonus CSS trick.

Vertical Centering With CSS
There are a few different ways to vertically center objects using CSS, but choosing the right one can be difficult. Here is a list of the best ways and an explanation of how to create a nice centered website.

Create YouTube-like adaptable view using CSS and jQuery
Other than the “Turn off the lights” feature, YouTube has great stuff, such as the “change view” feature, which allows you to switch between normal and wide mode, thus expanding or shrinking the video area. Creating this is very simple.

How To Create a Horizontally Scrolling Site
If websites were made of wood, the grain would run up and down. Vertical is the natural flow of the Web. But browsers are equipped with vertical and horizontal scroll bars, right? We have the choice to go against the grain and create web pages that scroll primarily horizontally and that even expand horizontally to accommodate more content. Perhaps a slight blow to usability, but a cool creative touch nonetheless!

Purely CSS – Faking Minimum Margins
min-margin is non-existent in the CSS world. After you’ve pondered and Googled it, check out the solution here.

Create Sidebars of Equal Height with Faux Columns
CSS can be tricky business. Creating columns of equal height, where the content in one column is longer than the content in another, is frustrating. Here’s where the faux-column technique can help. Find out how this solution makes even the most complicated layout a breeze to code.

Setting Equal Heights with jQuery
Here is a script to match the heights of boxes in the same container and create a tidy grid, with little overhead.

Quick Tip: Centered Fake Floats
There were ways to center-align left-floated elements, but then inline-block became popular and everything changed. After a bit of tinkering, Zaharenia Atzitzikaki found an efficient and (mostly) cross-browser-compatible way to center elements without floats.

6 Flexible jQuery Plugins to Control Web Page Layouts Easily
A collection of six jQuery plug-ins to manage page layouts easily.

Four Methods to Create Equal-Height Columns
This article discusses ways to create equal-height columns that work in all major browsers (including IE6). All of the methods show how to create a three-column layout.

How to: CSS Large Background
A tutorial with various CSS examples for how to create a large background using either a single image or double images.

A Nice Little CSS Positioning Technique
Here, we have a basic unordered list (ul), with left-floated images where the text doesn’t wrap under the images. Of course, this technique could be deployed in loads of other instances.

Perfect Full Page Background Image
This technique allows an image to fill the page, with no white space. The image scales as needed and retains its proportions, without triggering scroll bars.

Smart Columns With CSS and jQuery
In observing liquid-width websites, Soh Tanaka sees two common techniques for displaying columns: fixed columns and liquid columns. He points out the drawbacks of both and pitches his solution.

Images And Visual Effects With CSS

A Beautiful Apple-Style Slideshow Gallery With CSS and jQuery
Create an Apple-like slideshow gallery, similar to the one used on Apple’s website to showcase products. It works entirely in the front end; no PHP or databases required.

Rolling a coke can around with pure CSS
Román Cortés is having a lot of fun doing CSS tricks these days. He just built a rolling coke can that uses background-attachment, background-position and a few other tricks to achieve the effect. No fancy CSS3 needed here!

Grayscale Hover Effect With CSS and jQuery
A few months ago, James Padolsey introduced a cool grayscale technique for non-IE browsers. His technique inspired Soh Tanaka to come up with a workaround with a similar effect. His solution relies on CSS Sprites and a few lines of jQuery, but it requires a bit of preparation before implementation. It is not recommended for large-scale projects; it is probably best for portfolio pieces.

Codename Rainbows
Some JavaScript and CSS magic is used here to apply a two-color gradient to text. Shadows and highlights can also be applied. This works especially well on big websites and for dynamic content where creating images for every instance would be impractical.

3 Easy and Fast CSS Techniques for Faux Image Cropping
This article summarizes three fast and easy CSS techniques for displaying only a portion of an image. All of the techniques need only a couple of lines of CSS. You are not literally cropping, which is why it’s called faux image cropping. These techniques can be helpful if you want to keep images to a certain size (for example, thumbnails in a news section). Being able to use CSS to control which portion of an image to display is great.

Image Rollover Borders That Do Not Change Layout
With CSS, the border of any block-level element is factored into the element’s size in the layout. So, if you add a border to an element on hover, the layout will shift. In this post, you will find how to use the regular border property and create inner borders to get around that.

Horizontal Stripes
This tutorial shows you how to create never ending horizontal stripes in your web design using CSS.

Nine Techniques for CSS Image Replacement
Put nine different techniques of image replacement to the test.

Bokeh effects with CSS3 and jQuery
This tutorial teaches you how to re-create the bokeh effect with CSS 3. With some help from jQuery, we can add some randomness in colour, size and position for the effect.

A Stationary Logo That Changes on Page Scroll with CSS
Here is an interesting effect that modifies the logo when the page is scrolled, using the CSS background-attachment property.

Silhouette Fade-Ins
To achieve the effect in the image above, first we need a DIV with the silhouettes as a background image. Then we put four images in that DIV, all the exact same size, with each band member highlighted. These images are hidden by default. Then you absolutely position four regions on top of the DIV; these are the roll-over link areas. With jQuery, we apply hover events to them, fading in the appropriate image.

Creating Triangles in CSS
Few people realize that a browser draws borders at angles. This technique takes advantage of that. One side of the border is given the color of the arrow, and the rest are transparent. Then you give the border a large width; the ones above are 20 pixels.

A parallax optical illusion with CSS: The Horse in Motion
Time for some fun with CSS and optical illusions.

Pure CSS Line Graph
The idea here is not only to offer data visualization to people who aren’t comfortable using scripting languages, but to demonstrate the power of CSS and offer a different way of using CSS. If you are not a fan of line graphs and data visualization, you may still benefit from this article. Think of it as a CSS experiment, and learn a thing or two about CSS Sprites and positioning.

Zooming with jQuery and CSS
This post is about text zooming with jQuery and CSS. This is a basic-level tutorial about changing a style using a jQuery script. A simple way to zoom website content.

Create Resizing Thumbnails Using Overflow Property
This tutorial teaches you how to control thumbnail sizes. Sometimes we don’t have enough space to fit large thumbnails, and yet we would rather avoid small indecipherable images. Using this trick, we can limit the default dimensions of thumbnails and show them at full size when the user mouses over them.

Cross-browser drop shadows using pure CSS
Most methods of adding drop-shadows to content blocks require additional HTML mark-up and one or more PNG images. But by combining the Glow and Shadow filters, something that fairly closely resembles the rendered CSS3 shadow can be achieved.

Date Badges and Comment Bubbles for Your Blog
One of the things you have to deal with when your blog grows is having to cram more info into less space to show everything you want to show. One thing you can do is add an icon for the date and then a bubble over it with the number of comments for that post.

CSS Tables And Web Forms

UX trick: display form data as tabular data
This is a little trick to enhance the user experience of forms. It displays editable form data as readable tabular data.

Tables: Not As Evil As You Think
Tables are evil, right? Yes and no. For tabular data, they’re not, of course. That’s what tables are for in the first place. CSS can do an excellent job of styling a properly formatted table, and the table structure provides good scaffolding for JavaScript calls. But what is addressed here is using tables for non-tabular data (i.e. for the layout). Yes, that’s right: using tables for layout.

Perfect Drop-Down Log-In Box Like Twitter Using jQuery
This shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form.

Make a Select’s Options Printable
When printing a Web page with select elements on it, the select drop-down prints just as it looks on the Web. This of course is practically useless on the printed page. One option for handling this is to follow every select HTML element with an unordered list that duplicates the content. Hide the unordered list in your main CSS file and reveal it with your print style sheet. This is a reasonable approach, except that it’s a big ol’ pain in the butt to deal with all the time. Let’s rely on jQuery to do the heavy lifting instead.

Twitter-Like Log-In With jQuery and CSS
This post explains how to get the Twitter-like hide and show effect for logging in using jQuery and CSS.” Very simple: just five lines of JavaScript for the hide() and show() events and a little CSS.

Clean and Pure CSS Form Design
This tutorial illustrates how to design a pure CSS form without using HTML tables.

CSSG Collection: Free Comment Styles
This is the second CSSG collection from CSS Globe.

Have a Field Day with HTML5 Forms
Here is a look at how to style a beautiful HTML5 form using some advanced CSS and the latest CSS3 techniques. You will definitely want to re-style your forms after having read this article.

Editable/Printable Invoice
Create editable and printable invoices using CSS and some JavaScript. This is version 2 from Vinh Pham.

How to Mask Passwords Like the iPhone
Many smartphones, including the iPhone, show the last character that you typed in a password field with a delay of a second or two. You can see that last character but not the entire password. But browsers don’t do what these mobile devices do. Here is a solution, with some fancy JavaScript and behind-the-scenes trickery.

Make Web Forms Suck Less With Labels
We’ve been filling out Web forms for years, and we all gripe that they could be better. Even with generous padding, the fields are too small. But hardly anyone has improved the most under-rated interaction of them all: checkboxes and radio buttons.

FancyForm: JavaScript checkbox replacement
FancyForm is a powerful and flexible checkbox-replacement script that changes the appearance and function of HTML form elements. It is accessible and easy to use, and it degrades gracefully on older non-supported browsers.

jQuery checkbox v.1.3.0 Beta 1
A lightweight custom-styled checkbox implementation for jQuery 1.2.x and 1.3.x.

Disabled labels and the Trilemma plug-in
The form above on the left makes use of the disabled attribute, but the default browser settings for disabled inputs don’t contrast as much as one would like. To better distinguish at a glance between which inputs are disabled and enabled, the labels of disabled inputs in the form on the right are styled with a faint gray color.

Fluid Search Box
Creating a fluid search box when you have only a single element next to it is trivial. What you should do is wrap the input in an element and use padding to create space for the fixed element; then position the fixed element absolutely (or relatively) in the space created by the padding.

Last Click

Browser Pong
A whole new pong game using three browser windows for the ball and racquets. Clever!

Related posts

You may want to look at similar CSS-related posts that we published last months:

• 45 Powerful CSS and JavaScript Techniques
• 50 Brilliant CSS3/JavaScript Coding Techniques
• 5 Useful Coding Solutions For Designers And Developers

(kk) (jb) (vf) (al)

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 48 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, jquery

Earlier today Venture Hacks announced the launch of the AngelList – a curated list of angel investors with an interest in early-stage funding pitches. According to a blog post by Venture Hacks cofounder Babak Nivi, legendary investors like FF Fund angel Dave McClure, Techstars’ Brad Feld and SoftTech VC’s Jeff Clavier are among the site’s first participants. ReadWriteStart caught up with Nivi to find out why he was moved to create the resource.

Sponsor

“Entrepreneurs are always asking us if we know any angel investors.” He says, “It’s one of the most common questions in the startup world. So we decided to make a list of the ones we know and also open it to ones we didn’t know. We also needed a place to keep track of the angels we know for our own reference. Hence AngelList!”

Anyone who has made $25,000 dollars in investments in 2009 and plans to do the same in 2010 is eligible to apply for the list. Participating investors receive information on three vetted startups per week and a place on the Venture Hacks blog and AngelList Twitter account. While some Angels may shy from displaying their contact info to the public, the list is actually a much better way to manage the pitch process as entrepreneurs are made well aware of investor objectives and interests. Startups can browse the site for contact information, investment criteria, trusted referrers and an investor’s current portfolio.

Explains Nivi, “Entrepreneurs spend a lot of time trying to get intros to investors – even the entrepreneurs who end up raising money from Ron Conway, Fred Wilson or Sequoia. We want to make it easy for qualified entrepreneurs to get the intros.”

To check out the list, visit venturehacks.com/angellist or to make your angel financing needs known, add yourself to the VentureHacks Startup List at venturehacks.com/startuplist.

Discuss

CSS and JavaScript are extremely powerful tools for designers and developers. However, sometimes it’s difficult to come up with the one excellent idea that would solve a problem that you are facing right now. Good news: almost every day designers and developers come up with fresh and clever CSS tricks and techniques and share them with other developers online. We regularly collect all these tricks, filter them, sort them, revise them and prepare them for Smashing Magazine readers.

In this post we present 45 useful CSS/JavaScript-techniques that may help you find clever solutions to some of your problems or just get inspired by what is possible with CSS. We cover interesting CSS-techniques, navigation menus, CSS typography, CSS lists and CSS buttons. The focus of this post lies on CSS; please notice that some of the techniques use JavaScript or PHP for enhanced functionality.

Please notice that this is the first part of our large round-up of fresh CSS/JavaScript-techniques. Other techniques (CSS tables, CSS layouts, CSS for Mobile and CSS forms) will be featured in an upcoming article. So don’t forget to subscribe to our RSS-feed and follow us on Twitter for similar articles and a stream of useful resources. Please also let us know what we should change or improve in our future posts!

We are aware that many readers are tired of “lists” floating around in the Web, but we are confident that the vast majority of our visitors will benefit from this post format and will find at least some of the techniques featured in this post useful.

By the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter.

Interesting CSS Techniques

Building the New Visual Annotations
These note overlays are composed of two main elements, an overlay with the shine and a border with the transparency. A very interesting, yet simple technique by the ZURB Design Agency, designers who have written a series of articles on Smashing Magazine as well.

Sexy Music Album Overlays
This aticle shows how to style your music streams and provides you some graphics to do so.

A Colorful Clock With CSS & jQuery
This tutorial describes how one can create a clock using basic CSS and JavaScript.

How To Create Depth And Nice 3D Ribbons Only Using CSS3
We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds. RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.

Advanced Event Timeline With PHP, CSS & jQuery
This Advanced Event Timeline is used with the help of PHP, MySQL, CSS and jQuery. The result: a nice time line with clickable events. Adding new ones is going to be as easy as inserting a row in the database.

CSS Navigation Menus

CSS 3D Meninas
“I’ve took the classic paint The Maids of Honour (Las Meninas) and created a CSS pseudo-3D / Parallax effect. It is pure CSS, no JavaScript or Flash is involved. It has been tested and is working on Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 and Konqueror 3.5, and it validates, too.

Sproing! – Make An Elastic Thumbnail Menu
“In an ongoing attempt to offer alternative methods to spruce up menus, I’ve pieced together an elastic thumbnail menu. It magnifies menu items when they are hovered over and menu items expand upwards.

How to Create Simple and Effective Sub Navs with Definition Lists
“When we need simple and effective on-page navigation, to either jump to content on the page or flip to another view, we use the dl element. Its sub elements, the dt and dd, make it very easy for us to create inline links with a clear label. Here we’re going to share with you a fast, lightweight method for how we’ll use CSS to do it.”

Sticky SideNav Layout with CSS
Learn how to create a fixed sidenav layout for your blog or website. Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling. The fixed navigation allows the user to cruise through the content without scrolling back up to the top to navigate through the rest of the site.

Unobtrusive Dropdown Page Changer
Using a <select> dropdown menu to create navigation isn’t as common as it once was, but it’s still around. It got ripped on pretty good for being an inaccessible / obtrusive. Indeed a lot of the scripts you’ll find out there for creating a menu like this are this way. Bummer. Let’s make one that works with or without JavaScript.

CSS Navigation: No JavaScript, jQuery or Image Required, Free CSS Navigation / Pagination with Tooltip
CSS-based navigation / pagination bar without JavaScript. There is a tooltip on hover for the ‘previous’ and ‘next’ page’s bullets that makes navigation easier.

How to Code an Overlapping Tabbed Main Menu
Main navigation menu is that part of a website design that makes the whole site look lively and complete. But the most common type of navigation menu style still being used a lot is the tabbed navigation menu. Here is a tutorial on how to code an overlapping tabbed menu.

Solution For Very Long Dropdown Menus
“I like to be confident with post titles, but the reality in this case is a possible solution for very long dropdowns. The problem with long dropdowns is that the dropdown itself can go below the “fold” of the website. That is, below the visible area of the browser window. So in order to access those menu items down below, you need to scroll your browser window. For those of us with scroll wheels of some kind on our mice (mouses?), it’s not a big deal. For those without, those lower menu items are totally inaccessible, because to use the browser scrollbar means mousing off the menu (and probably having it close).”

Mega Drop Down Menu w/ CSS & jQuery
When used properly, mega drop down menus can be quite efficient for large scale websites. Let’s experiment with different ways of implementing this technique. A tutorial by Soh Tanaka, Smashing Magazine’s regular author.

CSS Typography and Body Copy

How to Create a Cool Anaglyphic Text Effect with CSS
Anaglyphs are those amazing 3D images that are created by offsetting two of the red, green and blue channels, and are viewed with those nerdy looking 3D glasses with different coloured lenses. I don’t know if this effect works for real, as I’ve unfortunately misplaced my 3D specs, but it’s a pretty cool text effect nevertheless! Let’s take a look at how a similar style can be created for sprucing up your web designs, while taking into consideration semantics and avoiding the repetition of any markup.

Typographic work planner
Enter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff.

Thinning Text in Webkit (Safari)
Safari has a not-so-lovely way of bulking up text using sub-pixel rendering. On previous versions of Safari, this was fixed with a text-shadow declaration, but since Snow Leopard that method no longer works. Fortunately, there is an alternative.

Pseudo Drop Caps
They’ve been around for a while now, appearing in magazines, print and now the web. Designers and developers alike have experimented with multiple workarounds from using inline styles to using image replacement but with both of these solutions there are problems. For example, what happens when you recreate your site and decide that you no longer want to upload the drop cap images, you’re now going to left with a broken image at the start of every single post that you had previously created, this is obviously assuming you haven’t used text-indent. If you decided to go down on the inline style route then your are just bad, just very bad.

How to Create Perfect Pre Tags
If you operate a website that features lots of code examples, you know how important it is to spend some quality time styling the &tl;pre> element. When left unstyled, wild <pre> tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the <pre> tag quite differently, varying greatly in their default handling of font-sizing, scrollbar-rendering, and word-wrapping. Indeed, getting your preformatted code to look consistent, usable, and stylish across browsers is no easy task, but it certainly can be done. This article explains everything you need to create proper <pre> tags.

Improve your web typography with baseline shift
The baseline is an invisible line onto which all type characters sit, although of course some characters (including ‘j’, ‘p’, ‘g’ and ‘y’) have descenders that hang below the baseline. Baseline shift involves moving characters up or down in relation to the baseline and using it effectively can make a huge difference to the professional look of your type. Although baseline shift has traditionally been a part of using tools like InDesign or Quark, there are ways to accomplish the same results using CSS.

Typograph – Scale & Rhythm
This page is both an essay and a tool. It sets out to explore how two, intertwined concepts, often playful but sometimes cheeky, can be encouraged to dance in web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you are about to play upon it.

Fancy Quotes With jQuery, AJAX & CSS
Learn how to create a fancy quote rating system that will display a number of famous quotes and will enable site visitors to rate their favorites.

How To Create Simple, Stylish and Swappable Image Captions
Most image caption solutions require a lot of excessive HTML, make it difficult to redesign or don’t communicate clearly that they belong to an image. Let’s see what we can do to address these problems.

Styling photo captions with CSS
Sure, some photos are self-explanatory, but most photos are best served with text captions. It’s true for traditional media like newspapers and magazines, and just as true for blog posts and web articles. Here’s a quick tip on using photo captions and styling them nicely with the magic of CSS.

Image captions on Web pages
This document suggests three ways of presenting an image with a caption in HTML. Styling in CSS is also discussed.

Styling Post Headings That Stick Out
“Recently, I’ve noticed a trend in blog post headings where it sticks out of its base layout. I would like to share this technique for those who would like to give their post headings a new style. One tip to keep in mind when designing this is to make sure it fits your target audience screen resolution size. Note that this technique may vary depending on your design. My goal is for you to grasp the main concept in this tutorial so you can experiment and apply it to your own projects.”

Using ellipsis with HTML and CSS
If the text is too wide to fit into a container, a nice solution can be to have ellipsis to show there’s more information available. While not currently part of the official HTML specifications, it is possible to have ellipsis defined in CSS and it works for Internet Explorer, Safari, Chrome and Opera. It doesn’t work for Firefox but there’s a workaround that can be done with jQuery.

5 Message Boxes to Style your Notifications with CSS
This article presents free notification boxes to use/customize as well as a very simple technique to create your own ones inspired from this roundup.

CSS Lists

Create a Microsoft Word-Style Outline with CSS
As you can see, the browser doesn’t bother to vary the indentation style much, or change the list type from roman numerals to alphabetical characters and so on… all the things we’re so used to seeing because Microsoft Word and other writing programs do them by default. So let’s use a bit of CSS ingenuity to make a Microsoft Word-styled outline using ordered lists!

Pure CSS Timeline
“I wanted to build a CSS timeline for the “About” section of my site while using some clean and simple markup. I wanted to avoid using images as much as possible, so I spent a few minutes prototyping some options and came up with a solution using unordered lists. The result is a simple and clean looking timeline with some very straight forward markup. In this article I’ll share my approach to creating a timeline out of CSS and HTML which results in a nice looking, simple timeline.”

Automatic numbering with CSS Counters
When writing documents, it is often useful to number sections and have a table of contents. You can number these by hand, directly in the markup, but this can be time consuming if the order changes and you have to edit all the numbers. CSS2.1 gives us a automated way to generate numbers using CSS counters, and this article will walk you through how to use them. One word of note before we start is that CSS counters are not yet implemented in IE, although they are on the roadmap for IE8.

CSS tricks for custom bullets

Elastic Calendar Styling with CSS
A traditional calendar is a grid of numbered boxes on a page. As a web designer, you might go right for a table, and I wouldn’t fault you for that. Tables, though, can sometimes be tough to muscle into shape. The CSS purist in me gets pissed when I set the width of a table (or a cell) and it decides it knows better and grows or shrinks as it sees fit.
You can tackle calendar styling with pure CSS, and I feel it makes just as much sense semantically as a table does. What is a calender, if not an ordered list of days? By using CSS, we can even do some cool things like do all our sizing with ems so our calendar layout will be elastic. That is, grow in both width and height when text is resized in browsers, while greatly increasing accessibility.

Style a List with One Pixel
A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list.

Style Your Ordered List
By default, most browsers display the ordered list numbers same font style as the body text. Here is a quick CSS tutorial on how you can use the ordered list (ol) and paragraph (p) element to design a stylish numbered list.

Simulating a Table Using an Unordered List
Your first question immediately might be, “why would I want to simulate a table with a list, why not just use a table?” With the raise in popularity of AJAX sortable list elements, using list items to represent a multiple column data table can allow for easy sorting of various more “tabley” information. So let’s get started.

8 different ways to beautifully style your HTML lists with CSS
“The use of HTML lists (<ol> for an ordered list, <ul> for an unordered list) is very common these days. Today, we’re going to look a little bit further than creating regular lists, by showing 8 different ways to beautifully style your HTML lists with CSS. We’ll use some pure CSS techniques to make a bored list look awesome (and even have some extra functionality).”

Quick Tip – Simplify List Margins with CSS
Have you ever set default margins for a layout, and then had to go back and manually adjust all of your lists? By default, list item markers have a negative positioning in relationship to the list item itself. This means that zero-ing out margins automatically leads to an overflow if the list is contained inside anything else. Wouldn’t it be easier to put the list item marker at the same starting point as other elements instead? Lucky for us, there’s a style to help do just that. Let’s see what can be done with the list-style-position property.

Sexy HTML List Tricks
Behold the ubiquitous list elements, <ul> and <ol>. These two sexy elements help millions of websites display lists of information in clean, semantic fashion. Without them, we’d be crawling around like filthy cavemen, eating dirt and howling at the moon. But these list elements aren’t just sexy, they are also extremely flexible, enabling us humble designers to create robust list configurations that are semantically versatile and highly customizable.

Clickable <li>
I originally coded the markup to be a table, but discovered a problem when I tried to make the whole row clickable. I ended up with a list of articles instead.

CSS Buttons

Simply-Buttons v2
This technique presents buttons of the size that always fits the content. There are 3 states: inactive, active and hover. The technique works in all major browsers and doesn’t require JavaScript.

How to make sexy buttons with CSS
This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day.

Liquid & Color Adjustable CSS Buttons
When working on a large site with multiple buttons, it can be quite tedious to make all the buttons in Photoshop. Making future adjustments on the verbiage and colors can be also be time consuming. By having dynamic buttons, this scenario is much easier to handle, and by having liquid and color adjustable buttons with CSS, we are able to change the verbiage and colors in a flash.

Create a Button with Hover and Active States using CSS Sprites
Too many designers neglect the click state (active-property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it or are plain lazy. It’s a simple effect that improves usability by giving the user some feedback as to what they’ve clicked on but can also add depth to a design.

Recreating the button
“I thought it would be interesting to provide a portion of the background on buttons here, and discuss some of the iterations we’ve been through so far to get to the current state.”

Rounded form buttons

Google’s Imageless Buttons
An interesting discussion about various buttons design techniques to reconstruct Google’s imageless buttons.

Stay tuned!

This is the first part of our large round-up of fresh CSS/JavaScript-techniques. Don’t forget to subscribe to our RSS-feed and follow us on Twitter for similar articles and a stream of useful resources. Please also let us know what we should change or improve in our future posts!

Would you like to see more similar round-ups on Smashing Magazine in the future?(answers)

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 64 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, javascript, js

Advertisement

If you build and develop Wordpress themes often, you will probably be fed up of all the repetitive code writing, the constantly checking of your mark-up and all you really want to do is focus on the design and the project-specific features. The answer is a Wordpress development framework. A framework is designed to speed up the process of designing and coding a Wordpress theme by minimizing your time, and balancing your patience, on Wordpress’ back-end code that is repeated within every theme.

This post is not about finding the best framework, it is about finding the right framework that works for you. If you are an experienced developer then you will probably go for the powerful and feature rich Thematic or Carrington, or if you are a novice, you could try the Whiteboard framework or , even easier, download a stripped out and bare bones blank canvas theme, which you will find at the bottom of the post.

Which would you use?

Thematic – WP Framework

Thematic is a highly polished WordPress Theme Framework that is built upon the 960.gs. At first glance, its backend may look daunting and complex, but you will soon realise just how well organised it is and easy to use. Its power is based upon its flexibility and its simple customisation, you would be very hard pushed to find a project you couldn't use the Thematic WP Framework for.

• Thematic Homepage.
• View Thematic Demo.
• Download Thematic WP Framework.
• Thematic Support Forums.
• Thematic Customisation Guide.

Thematic Features

• Optional 2 or 3 column layouts.
• Up to 13 widget ready areas.
• Modular CSS with pre-packaged resets and basic typography.
• Fully Search-Engine Optimized.
• Can be used as it is, or as a blank WordPress theme.
• Dynamic post and body classes make it a hyper-canvas for CSS artists.
• Options for multi-author blogs.
• Great support available from the customisation guide and forums.
• Child Themes are available for upgrading the theme.

Thematic (child) Themes

Thematic uses Child Themes, these are essentially stripped down versions of a full WP theme, that needs the Thematic Framework for functionality. Upon download, Thematic comes packaged with a basic child theme, but you can download many more from the Thematic homepage. Download Thematic Child Themes.

Below, you will find a small selection of themes available for Thematic.

Acamas Child Theme

Second to None Child Theme

Gallery Child Theme

Boumatic Child Theme

Aether for all Child Theme

To activate a new Child Theme, all you have to do is rename and move the entire folder to the root level of wp-content/themes alongside Thematic and activate the new Thematic Child Theme like any other WordPress theme.

Carrington – The CMS Theme Framework

Being by far the most powerful of all WP frameworks, Carrington was built with both developers and end-users in mind, it truly is the complete Wordpress package. Upon download, the first time user may be put off by its undoubted complexity and its endless features and options, but don't be put off. You must persevere with this framework, and when you learn all the ins and outs (with help from its in-depth documentation and forums) you will receive your just rewards, you will see how beneficial, rewarding and time saving Carrington can be. As the tagline goes, it may just be the best thing since you the wheel and sliced bread.

• Carrington Homepage.
• Carrington Documentation.
• Carrington Official Forum.
• Carrington Downloads.

Carrington Features

• Flexible and powerful templating system.
• Rich, semantic markup.
• Four ready built themes.
• Stylish typography.
• Threaded comments.
• Page and category navigation menus.
• AJAX loading of posts in archive lists.
• AJAX loading of comments.

Carrington Official Themes

Carrington Blog
Carrington Blog is an elegant blog-style theme with advanced features like AJAX loading of content, customizable colors and header images, easy addition of analytics code, widgetized sidebars, stylish gallery features, and more. It is designed for bloggers looking for an “out of the box” experience.

Carrington Text
Carrington Text embraces simplicity with this elegant design. Text and content is the focus here – let your content take center stage.

Carrington Mobile
Carrington Mobile is an elegant mobile theme with that supports advanced touch browsers (iPhone, Android, BlackBerry) and is also backward compatible with older mobile devices.

Carrington Jam
Carrington JAM is a bare-bones theme skeleton. It is intended for developers and designers as a starting point for building a new theme, it is not designed for end-users looking for a blog theme that is ready to go.

Theme Hybrid

Theme Hybrid is Wordpress Framework developed by Justin Tadlock. As with all Justin’s’ Wordpress themes (the excellent Options theme), you know that you are getting a very powerful and versatile backend, but still very easy to use and develop upon. Theme hybrid truly is built with simplicity and power in mind.

The theme club has two types of membership, free and exclusive. Free members can download and use the themes for free and participate in the forums. For $25 you can join the exclusive club, which gives you access to tutorials and you are able to post questions on the support forums.

• Theme Hybrid Homepage.
• Theme Hybrid Blog.
• Theme Hybrid Forums.
• Theme Hybrid Memebership.

Theme Hybrid Features

• Advanced action and filter hooks.
• Child theme support.
• Each individual child theme is in its self choc-full of features.
• Search-Engine Optimized.
• 14 custom page templates.
• 9 widget-ready areas.
• Advanced breadcrumb menu.
• Support for attachment pages.
• Of course, it has valid code.
• Threaded comments.
• Great support, lots of tutorials and forums.

Theme Hybrid Child Themes

For all of these themes to work, you will need Hybrid installed first.

Hybrid
Hybrid is a user-friendly, search-engine optimized theme framework, featuring 14 custom page templates and 9 widget-ready areas.

Life Collage
A purely blogging theme, it has extra widget sections, drop-down menus, with a sleek design.

Hybrid News
This is a free News/Magazine theme, it has extra widget sections, double navigation menus, drop-down menus and a featured post slider.

Leviathan
This theme is clean and spacious, ideal for large images and large posts.

Old School
Old School is versatile enough to be used as either a blog or a magazine/news site, great design as well.

WP Framework

WP Framework is a great starting point when first learning about the Wordpresses structure and first stepping into theme development as well as for the experienced user for quick development. Under the hood its foundation it is very solid, and this framework will cut down on your theme development time and allow you to focus directly and from the off on project-specific features. WP Framework is completely extensible, flexible and the starting point for theme authoring and customization.

• WP Framework Homepage.
• WP Framework Getting Started Guide.
• WP Framework Forums.
• WP Framework Downloads.

WP Framework Features

• Microformats Compatabile.
• Search Engine Optimized.
• Modular CSS includes reset.css, base.css and screen.css.
• Gravatar enabled.
• Favicon & iPhone webclip placeholder images.
• jQuery enabled and screen.js.
• Basic print.css stylesheet ready for direct printing.

Buffet Theme Framework

The Buffet Framework is a WordPress theme framework designed not only for the theme developers who will be using the theme actions and filters to create child themes, but also for the end users who would be able to add and remove what they want. Like most WordPress theme frameworks, the Buffet Framework utilises WordPress actions and filters to allow theme developers to add additional content without editing the templates files using the child theme concept.

• Buffet Theme Homepage.
• Buffet Theme Quick Start Guide.
• Buffet Theme Downloads.

Buffet Theme Features

• Search Engine Optimised.
• Support for Microformats.
• jQuery powered comments form, SuperSleight for IE6, Superfish menus and jBreadcrumbs included.
• Packaged with 960gs and Blueprint CSS.
• Action & Filter Hooks
• Allow end-users to enable/disable features using the extensions feature.
• Localization – fully localized, ready for translation.

Buffet Theme Demo

Buffet Theme

Whiteboard – WP Theme Framework

Whiteboard will never be as powerful as the Carrington framework or the Buffet framework, it has been developed for simpler development requirements. Simply, it has been designed to speed up the process of designing and coding a Wordpress theme by eliminating the time spent on Wordpress’ back-end PHP that is repeatedly used in every theme. It is clean, noted, and very small, weighing in at 76kb, its amazingly compact.

• Whiteboard Theme Homepage.
• Download Whiteboard Theme.

Thesis Theme

The Thesis Theme is a framework that has been built with great typography, a dynamically resizable layout, intelligent code, airtight optimization, and with lots of flexibility that make it versatile enough for most projects. Have a look at this video review of Thesis 1.5.

• Thesis Theme Homepage.
• Thesis Theme Forums.
• Thesis Theme User’s Guide.

The WordPress Starter Theme Project

Similar in idea as the Whiteboard framework, The Wordpress Starter Theme Project was developed for those who hate repeatedly doing the same actions every time you start a new Wordpress project. This is a very easy to use framework, which is ideal for the novice to learn the basics of Wordpress structure.

• The WordPress Starter Theme Project Homepage.
• Download The WordPress Starter Theme Project.

Ashford WP Framework

Ashford has been built to be as simple as possible to use, it is also packed with many useful and powerful features. You can create and edit content with Adminbar, Hints and Admin-In-Place, choose from dozens of page layouts (including a content carousel), content can also be customized using widgets and multiple sidebars and of course all code validates and is fully SEO.

Ashford, like most frameworks, uses child themes, making it even easier to develop with. Unfortunately, child themes for Ashford are as yet limited.

• Ashford Homepage.
• Ashford Support.
• Ashford Blog.

Sandbox

The seemigly ageless Sandbox, is a useful tool for WordPress theme designers and developers, it can be easily developed solely with CSS, so beginners will feel comfortable not having to worry about PHP. Experienced developers and designers can accomplish almost anything with minimal work, thanks to the rich, semantic markup and profusion of classes dynamically generated by the Sandbox.

The main feature of the Sandbox, and the feature that has made it very popular, is its markup. The class-generating functions included with the Sandbox create an extensible and semantic XHTML structure. Please note, the Sandbox has only been tested up to WP 2.6.

• The Sandbox Homepage.
• The Sandbox Demo Page.
• The Sandbox Readme.
• The Sandbox Forums.

OnePress Community

The OnePress framework is an integrated website and forum solution. It is, simply, a WordPress theme to serve as the foundation and framework for your web site and online community. Leveraging both WordPress and phpBB projects, OnePress provides a set of features focused on helping you build and maintain your site from the inside out.

• Onepress Homepage.
• Download Onepress.
• Onepress Docs.
• Onepress Forum.

PSD Framework for Creating WordPress Themes

If you have ever found yourself reusing elements from previous designs when starting up Photoshop to create yet another WordPress theme, then this PSD download is just for you.

Homepage and PSD Downloads

Blank WP Themes

Blank themes are not a development framework, as such, they are a blank canvas for quickly and painlessly starting a Wordpress project. Below you will find the best of them.

Blank WP from Anna Linea
There are six themes within this download package.

Blank Wordpress Themes from Refueled
There are three themes available, two-column left sidebar, two-column right sidebar and blank three column.

Wordpress Naked Theme from Siftware

Starkers – Blank Canvas WP Theme from Elliot Jay Stocks

Related posts

You may be interested in the following related posts:

• CSS Frameworks + CSS Reset: Design From Scratch.

About the author

Paul Andrew is a freelance web designer. He is chief admin for Speckyboy – Design Magazine, a web design, web development and graphic design resource blog. Follow him on Twitter here: twitter.com/speckyboy.

© Paul Andrew for Smashing Magazine, 2009. |
Permalink |
89 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: frameworks, wordpress

The record industry has approached Apple’s App store with a somewhat amusing amount of hesitation. When the App Store first launched last summer, a few major artists tested the waters with some obnoxiously basic apps, sometimes consisting of little more than a splash screen and a handful of their songs. But things are beginning to change. Leading the charge has been Nine Inch Nails, which partnered with Tapulous last fall to release a special NIN version of Tap Tap Revenge and more recently launched a robust ‘NIN Access’ app that offers fans a library of rich media, news, and social features. The app’s reception has been overwhelmingly positive, with over 75% of reviewers giving it five stars.

Now the major record labels (and countless indie bands) are looking to get in on the action. Enter Mobile Roadie, a new application platform that allows bands to quickly deploy their own custom applications to the App Store. For a relatively small fee, bands can use Mobile Roadie’s mostly-automated system to build their apps and have them posted to Apple’s App Store in as little as a week (and the majority of the wait is from Apple’s still-mysterious approval process).

The application supports a wide range of content, including photo galleries, streaming music (which can be linked to songs for purchase on iTunes), YouTube videos, a list of upcoming shows, and interactive features, like a ‘fan wall’ where users can post comments and photos in real time for all to see. On the backend, bands will have access to an intuitive CMS, where they’ll be able to update photos and video, manage comments, and post news stories. They can also choose what price they’d like their app to sell for on the App Store.

CEO Michael Schneider acknowledges that there are other media platforms available, like Kyte, but says that these can run thousands of dollars apiece. Mobile Roadie is substantially cheaper, running $399 for intitial setup and then $29 a month after that. For larger bands that receive over 1000 installs, there’s an additional 1 cent per month, per install charge. The company is currently in talks with every major record label (some of which are already testing the app), and has forged an exclusive partnership with The Orchard, a leading indie distributor.

I’ve tried out a few of Mobile Roadie’s apps, and for the most part they seem to work quite well (though if a band doesn’t upload many media assets the app feels a bit barren). The company has positioned itself well in a space that is about to really take off, especially once the iPhone 3.0 software hits and users will be able to see updates in realtime from their favorite bands without having to open the application manually.

If you’d like to check out a band’s app built on the Mobile Roadie platform, you can see a directory of their apps here.

Crunch Network: CrunchGear drool over the sexiest new gadgets and hardware.

What it does

We all are becoming more and more accustomed to turning to Twitter when we have to look up information. It is only fit, then, that different directories will crop up, giving us a good overview on any concept that we may be interested in. That is exactly what this website does – it collects information on different Twitter businesses, many of which include promotions.

This database can be browsed both alphabetically and by number of followers – the latter will give you something of an idea of the standing of each business. Moreover, the homepage highlights these businesses that have attracted the biggest numbers of followers so far, so that you can always see who are making waves online in a more or less immediate fashion.

Appropriately enough, you can tweet every featured company as links for doing so are provided.

On the other hand, if you want to have your business featured on the site you can do so effortlessly. This process involves setting down tags and so on. Furthermore, you can let twitterers know about any promotions through the site, and draw more attention to your business this way.

In their own words

“Twibs was created by a small group of people with one purpose: Give twitter users a place to find businesses on twitter. We are big believers in the power of twitter to connect customers with businesses. We’re working on making it easy for consumers to find businesses, both local and national. Keep in mind, we’re just getting started, so there may be small glitches and features missing, but don’t worry, we’re working hard for you to keep helping consumers find your business on twitter!”

Why it might be a killer

It is a direct way of knowing which businesses you can count on when it comes to the famed micro-sharing platform.

Some questions

How many businesses are already featured on the site?

Link: http://www.twibs.com
Our Review: http://www.killerstartups.com/Web20/twibs-com-twitter-business-directory

Senator Leahy blogged on his support for binational lesbian and gay couples last Friday after he introduced the Uniting American Families Act (UAFA) of 2009:

On February 12, I was proud to reintroduce the Uniting American Families Act, which would allow U.S. citizens and legal permanent residents to petition for their foreign same-sex partners to come to the United States under our family immigration system.

Click here for the remainder of the blog.

.

Today, Change.org featured Immigration Equality and our work on the HIV travel ban, LGBT asylum, and our new transgender immigration law manual on their home page.