Tutorials

I recently developed a site for a client who requested their product listings be displayed similar to how Johnny Cupcakes (Street wear brand from Boston/Los Angeles) lays out their products (columns laid out in a zig zag pattern). My first instinct was to split each section into its own list, but since this site was running on a CMS, all products had to be spit out in one giant list.

I recently saw a hover over trick that caught my eye and I thought it was a pretty clever way of showing more details on an element. I decided to give it a try and the solution was quite simple.

There are many elegant and easy to install modal window (Popup) plugins out there, but there are times where the script interferes with some of the logic processed on the page. I recently had a situation where I was not able to use plugins like fancybox and prettyPhoto so I had to create my own modal window that pulled inline html within the page. Here is how I approached this situation:

With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash. With this in mind, I believe it is wise to build simple widgets like the image slider using HTML/CSS/Javascript, and leave more interactive applications for flash if needed.

This is Part 2 of the Facebook Style Footer Admin Panel, if you haven’t checked out Part 1 this is the perfect time to check it out.

Step 2. Styling the Chat Panel & Alert Panel – HTML & CSS

Just like developing a drop-down menu, have a nested sub-panel within the list item. Look at the image below to get an overview of how this is layed out.

The popularity of social media has been booming in the past few years and Facebook definitely has climbed high to the top of the social network rankings. Facebook has many Ajax driven features and applications that are very impressive, and one of the things I particularly like is the footer admin panel, where it neatly organizes frequently used links and applications.

This is my second article/tutorial for Smashing Magazine.

Instead of writing a tutorial for CSS beginners, this time Vitaly Friedman (editor-in-chief of Smashing Magazine) asked various questions regarding intermediate/advanced techniques found throughout the web, and how each of these methods were achieved.