5 Useful Coding Solutions For Designers And Developers

1. Designing a Slick CSS Timeline

Designing a timeline is one of the tasks that frequently need to be solved when it comes to the design of portfolios. Some designers present the timeline as an image, others use plain text or use a good old table. We found an interesting CSS-based solution of a timeline over at 37Signals.com. While timelines are usually designed horizontally, this one is vertical, zig-zagging down each time slot.

How is this done?
To achieve this zig-zag effect, we will be floating each row. By assigning an “even” class, we are able to specify a different style for the right-aligned time slots, controlling their colors and alignment.

Here is the HTML:

01	<div class="timeslot">

02	<span>2009span>

03	<p>Duis acsi ullamcorper humo decet, incassum validus, appellatio in qui tation roto, lobortis brevitas epulae. Et ymo eu utrum probo ut, jugis, delenit.

04

p>

05

div>

06	<div class="timeslot even">

07	<span>2008span>

08	<p>Duis acsi ullamcorper humo decet, incassum validus, appellatio in qui tation roto, lobortis brevitas epulae. Et ymo eu utrum probo ut, jugis, delenit.

09

p>

10

div>

And here is the CSS:
The default timeslot will float left and have a 100-pixel padding to the right. This leaves room for the year () to sit to its right. I also used absolute positioning for the year so that I could easily switch from left to right without worrying about colliding float issues.
Add a class of even to each even row, so that we get it right-aligned in red and the year positioned to the left.

01	.timeslot {

02	width: 235px;

03	float: left;

04	margin: 0 0 10px;

05	padding: 10px 100px 0 0;

06	border-top: 3px solid #ddd;

07	position: relative;

08

}

09	.timeslot span {

10	position: absolute;

11

right: 0;

12	top: 27px;

13	font-size: 3em;

14	color: #999;

15

}

16

.even {

17	float: right;

18	padding: 10px 0 0 100px;

19	border-color: #ca0000;

20

}

21	.even span {

22

left: 0;

23	color: #ca0000;

24

}

2. Custom Page Styling, CSS Drop Caps and Footnotes

One website that is truly unique is Jason Santa Maria’s. What’s impressive about Jason’s website is that each article and blog post is entirely unique, with its design tailored to the content. Looking at a recent article, “Mathematics of the Tootsie Pop,” we’ll go over a few techniques that stand out for us.

1. Custom Page Styling in WordPress

The first question that came to mind when visiting Jason’s blog was, “How did he give each post a unique design?” You can achieve this simply by referencing a custom style sheet to override the website’s default style. By using a combination of custom fields in WordPress and understanding CSS specificity, you can freely give each post a design of its own. So, how is this done?
Step 1. Customize post with custom style sheet
Start by creating a new style sheet, and name the file to match your post’s title. With a good understanding of CSS specificity, you can customize the look and feel of the post.
Step 2. Create custom field values
Log in to your WordPress admin area, and go to the edit page for the post. Scroll down to the “Custom Field” area, and enter a new custom field name called “customStyles”. Then, for the value of that custom field, enter the full URL of your custom style sheet.

Step 3. Call the custom style sheet
Open up the header.php file in your custom theme, and above your