Created
October 7, 2010 13:15
-
-
Save danott/615084 to your computer and use it in GitHub Desktop.
CSS to style the page based on the time of day.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! | |
| * time_of_day.css | |
| * Time Sensitive CSS | |
| * @danott in reply to @kalebheitzman's tweet http://twitter.com/#!/kalebheitzman/status/26639173336 | |
| * | |
| * Here is a basis of class names for how I would approach a time-sensitive CSS stylesheet. | |
| * | |
| * Along with these classnames, I'd use side-by-side PHP and Javascript functions to add classes to | |
| * the body element of your html document. | |
| */ | |
| /* DAY OR NIGHT | |
| * In the beginning... God separated the light from the darkness. | |
| * I'm guessing a big piece of how you want to apply time sensitive CSS is on a daily basis between | |
| * daytime and nighttime. These classes are prefixed with .light-. | |
| */ | |
| .light-yes {} | |
| .light-no {} | |
| .light-dawn {} | |
| .light-dusk {} | |
| /* 12 HOUR TIME | |
| * Doing things hourly? Apply classes for hour and am/pm. | |
| * Prefix .h12- | |
| * Could then style specific hours such as .h12-1.h12-am {}. | |
| */ | |
| .h12-1 {} | |
| .h12-2 {} | |
| .h12-3 {} | |
| .h12-4 {} | |
| .h12-5 {} | |
| .h12-6 {} | |
| .h12-7 {} | |
| .h12-8 {} | |
| .h12-9 {} | |
| .h12-10 {} | |
| .h12-11 {} | |
| .h12-12 {} | |
| .h12-am {} | |
| .h12-pm {} | |
| /* 24 HOUR TIME | |
| * For those military CSS Developers | |
| * Prefix .h24- | |
| */ | |
| .h24-0 {} | |
| .h24-1 {} | |
| .h24-2 {} | |
| .h24-3 {} | |
| .h24-4 {} | |
| .h24-5 {} | |
| .h24-6 {} | |
| .h24-7 {} | |
| .h24-8 {} | |
| .h24-9 {} | |
| .h24-10 {} | |
| .h24-11 {} | |
| .h24-12 {} | |
| .h24-13 {} | |
| .h24-14 {} | |
| .h24-15 {} | |
| .h24-16 {} | |
| .h24-17 {} | |
| .h24-18 {} | |
| .h24-19 {} | |
| .h24-20 {} | |
| .h24-21 {} | |
| .h24-22 {} | |
| .h24-23 {} | |
| /* DAY OF MONTH | |
| * Want the first of the month to always look different? | |
| * Make it easily doable. | |
| * Prefix .d- | |
| */ | |
| .d-1 {} | |
| .d-2 {} | |
| .d-3 {} | |
| .d-4 {} | |
| .d-5 {} | |
| .d-6 {} | |
| .d-7 {} | |
| .d-8 {} | |
| .d-9 {} | |
| .d-10 {} | |
| .d-11 {} | |
| .d-12 {} | |
| .d-13 {} | |
| .d-14 {} | |
| .d-15 {} | |
| .d-16 {} | |
| .d-17 {} | |
| .d-18 {} | |
| .d-19 {} | |
| .d-20 {} | |
| .d-21 {} | |
| .d-22 {} | |
| .d-23 {} | |
| .d-24 {} | |
| .d-25 {} | |
| .d-26 {} | |
| .d-27 {} | |
| .d-28 {} | |
| .d-29 {} | |
| .d-30 {} | |
| .d-31 {} | |
| /* MONTH OF YEAR | |
| * Want each month to look different? October could look like Halloween! | |
| * Prefix .m- | |
| * | |
| * Why is this useful? | |
| * If you wanted something to only apply on Christmas, using day and month could look like | |
| * .m-12.d-25 {} | |
| */ | |
| .m-1 {} | |
| .m-2 {} | |
| .m-3 {} | |
| .m-4 {} | |
| .m-5 {} | |
| .m-6 {} | |
| .m-7 {} | |
| .m-8 {} | |
| .m-9 {} | |
| .m-10 {} | |
| .m-11 {} | |
| .m-12 {} | |
| /* YEAR SINCE JESUS WAS BORN | |
| * Want your website to look different for an entire year? | |
| * Prefix .y- | |
| */ | |
| .y-2010 {} | |
| .y-2011 {} | |
| .y-2012 {} | |
| /* End of file time_of_day.css */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment