zeitgeist.css is a crowdsourced, extendable basic CSS file that imparts a design based on current design aesthetics to any simple HTML file, such as those produced by compiling markdown.
zeitgeist.css has the following goals:
- Enable any HTML page to maintain a modern appearance effortlessly.
- Ensure any page can easily embrace basic design best practices for readability, usability, accessibility, and compatibility.
- Provide a central repository for community knowledge and examples of these best practices, and a history of how they change over time.
zeitgeist.css contains basic CSS normalization and best practices from HTML5 Boilerplate. Responsive design rules for desktop, tablets, and mobile phones are included, a set of styles for printing, and styles for projectors as well.
Any page that links to the current version of zeitgeist.css will have a design that changes as zeitgeist.css changes. These changes are based on contributions and community decisions regarding the current state of web aesthetics, technology, and platform support.
Alternatively, a page can use a zeitgeist.css revision for any point in time in order to present a design reminiscent of that time period. The repository is tagged at the end of every month in order to facilitate linking to a revision from a specific point in time.
Link directly to the current, regularly-updated master:
<link rel="stylesheet" href="http://zeitgeist.rnf.me/zeitgeist.min.css" />
Link to a specific tagged version (e.g. for tag 2012-july):
<link rel="stylesheet" href="http://zeitgeist.rnf.me/archive/2012/july/zeitgeist.min.css" />
Since zeitgeist.css is supposed to be representative of the opinions and knowledge of the web community as a whole, it needs the input of a large part of that community in order to be successful. If you're a designer, developer, or anyone else who feels the current state of zeitgeist.css doesn't reflect current design aesthetics or best practices, there are two ways to contribute:
-
Open a new issue describing your opinion or idea. Provide example code and/or links. This will allow the community to debate your suggestion and decide as a group if it should be included.
-
Fork the code, make the necessary changes, and submit a pull request. Include a description of and rationale for the changes you've made. This will also require community feedback, but it's much easier for me to merge your changes.
Necessarily, I must make the final decisions about what ends up in zeitgeist.css and what doesn't. Consider this a benevolent ************; as I'm not a designer, I will allow the will of the community to guide my decisions fully, and make sure all issues are thoroughly discussed before a decision is made.
After you have forked and cloned the zeitgeist.css repo, make your changes to the zeitgeist.css file, and open examples/index.html in your browser. By clicking the grey stylesheet toggle box in the upper right, you can switch between the current master stylesheet and your local version, to easily compare the changes you're making. You'll need to refresh your browser each time you save the file in order to see your latest modifications. When you are satisfied with your changes, commit them to your local repo, push to your github fork, and submit a pull request.
zeitgeist.css is a work of the design community as a whole. The project was started by Ryan Freebern. Please follow @rfreebern on twitter.
As a product by and for the web design community as a whole, zeitgeist.css is public domain.