{Carrer web log} ←

Handcrafted CSS + HTML Grid Calendar 2009

Tuesday, April 28, 2009 { 9 Comments }

Some time ago I saw this link Best of Calendar Design (via CSSGlobe) and I decided to make some experiments with css and grids in order to make CSS Grid Calendar for 2009. First I started to experiment with excel and in the end the result was: Google spreadsheet

I had two problems: the names of the days were in Italian and all the dates were taking too much vertical space. The solution: no names, no dates - just numbers. The numbers are universal. As a reference I took Sunday. It’s bold.



After some usability critics of my colleges I decided to change the concept and to add Monday to Sunday and I to XII. The result:



And you can download The Grid Calendar (zip)

9 Responses to “Handcrafted CSS + HTML Grid Calendar 2009”

1. //  Schalk Neethling // 4/28/2009

   Interesting, I would suggest using a table as this makes more semantic sense. You can also add a lot of usability and accessibility this way by using column scope, header, footer and the more advanced features of tables.
   
   See: http://www.w3.org/TR/html4/struct/tables.html  

2. //  Vladimir // 4/28/2009

   @Schalk: I could definitely used tables for this experiment, but I'm just to obsess with CSS Frameworks and pure CSS Grids.
   That is why I used: The Golden Grid for this project.  

3. //  Unknown // 4/29/2009

   Nice one. you can also stick the month at top of the page same as day you done.It will easy to guess the month.  

4. //  Dennison Uy // 4/29/2009

   Interesting approach. It could use a little more color, plus the white spaces in the corners make me eyes nerve endings go whacko. Having a black background might fix this.  

5. //  Vladimir // 4/29/2009

   @Dennison Uy: Great suggestion.I tryed pure black background and already looks more elegant.
   
   If anyone is interested to switch white to black background, just open the calendar html file and change
   .main { background-color:#fff; } to
   .main { background-color:#000; } or
   in second file
   .main { background-color:#000; width:1050px; }  

6. //  Unknown // 5/08/2009

   Sorry, I dont get the calendar.... A description of what we are looking at would be very useful.  

7. //  Vladimir // 5/08/2009

   @Terry: There are two calendars,in the first Sunday is in bold and it's not very clear that is why I built the second where I is January, II is February .. And M is Monday, T is Tuesday ..
   You probably saw only the first calendar.  

8. //  Pradeep CD // 7/10/2009

   Great calendar...  

9. //  website design New York City // 7/25/2009

   very nice post  

Post a Comment

<< Home