{Carrer web log}


Blog about web design & development

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. // Blogger 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. // Blogger 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. // Blogger SOHIL@google // 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. // Anonymous 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. // Blogger 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. // Blogger Terry // 5/08/2009

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

  7. // Blogger 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. // Anonymous Pradeep CD // 7/10/2009

    Great calendar...  

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

    very nice post  

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad
 

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License