Convert the sample HTML file (http://www.csszengarden.com/zengarden-sample.html) over to the new template, provide an alternate design list PHP file for the sample data.

Also, use .htaccess to force download of the sample HTML/CSS files to finally kill the large number of email I get asking how you download it.

Currently the design list exists as an array in includes/masterlist.php -- it would be really nice to have it in a universally-available JSON file instead, complete with PHP parsing to load that into the site's back end.

Probably won't get around to it any time soon, so this could be a way to contribute for anyone who could make quick work of it.

(Anyone interested in taking this on ought to wait until the full list is finalized though.)

The submission guidelines say,

While you retain copyright of your images, submitting a design to the Zen Garden requires open licensing of your CSS file so that your work may be shared, studied, and enjoyed by everyone else.

But which license it is? http://creativecommons.org/licenses/by-nc-sa/3.0/ ? If so, please include a copy in this repo as a LICENSE.txt file :)

AFAIK, these aren't used by search engines anymore.

I think we should still have a view for the older legacy version of the site. Partially to preserve our digital legacy, but mostly to restore the legacy that was Bruce Lawson's brilliant Geocities 1996 design.

http://csszengarden.com/?cssfile=http://www.brucelawson.co.uk/zen/sample.css

What would a version of the HTML that closely adheres to OOCSS and/or SMACSS principles look like?

When I click on "Download the example HTML FILE" it opens an empty page at https://www.csszengarden.com/examples/index

Also the link to http://www.mezzoblue.com/ in the footer should be changed because that site does not exist anymore.

I've converted the site and all existing designs to basic HTML5 semantics -- namely, header, footer, and a few discretionary uses of section and aside. I also killed the reliance on ids by adding better classes across the HTML (though ids remain for the sake of internal links)

How can this be pushed further? Some more divs could be changed to other structural elements like article, but is that necessary? Should heading levels by revised? Open to suggestions here.

The default design should be responsive. Work has started here:

https://github.com/mezzoblue/csszengarden.com/tree/responsive-001

So obvious, can't believe I missed it thus far.

The ?cssfile= pattern has long left the site open to XSS injections. Not something I've really been overly concerned with, but it might be nice to patch up. eg.

http://www.csszengarden.com/?cssfile=%22%3E%3Cscript%3Ealert(1);%3C/script%3E

Will cause the expected alert (Firefox). Some simple stripping of <, >, and any encoded variations ought to cover it.

There are a lot of extra spans in the markup -- mainly necessary for the sake of image replacement in the original batch of designs, but no longer needed.

The problem is getting rid of them while maintaining the 218 legacy designs. Ideally their usage could be swapped out for some other image replacement technique (generated content?) then the spans could go away.

The problem is doing this in a way that doesn't involve manually converting 218 designs.

The current JSON output contains HTML entities, which is probably not intended.

This is because includes/masterlist.php includes those entities.

There are two ways to fix this:

1. Remove the HTML character references from includes/masterlist.php and just use the raw Unicode symbols (why not?)
2. Monkey-patch the PHP script that generates the JSON, so it automatically replaces those entities with the raw symbols

I’m willing to submit a pull request for either one of these options. Option 1 would be best IMHO, but I’ll leave the decision up to @mezzoblue.

The .p1, .p2 etc. classes could probably easily go away with a global find and replace with :first-child, :nth-child(2), etc. up to :last-child.

Copying & pasting @GaryJones' comment on #1 here:

"One thing that would be worth reading is http://www.w3.org/TR/html-polyglot/ which outlines how to make the code into a polyglot document - one that can be read by HTML and XML parsers (i.e. can be served as HTML5 or the XHTML variant of HTML5). Since the markup is going to be controlled (rather than having user-added content), then it's perfect for something like this.

That would mean keeping in the otherwise optional closing slashes on empty elements (reverting #11)."

As you can see, the Garden Party theme breaks the "footer" with links, making it impossible to click on them:

Following the "Design archive" links seems a bit weird to me.

Starting from http://www.csszengarden.com/, one gets http://www.csszengarden.com/214/page1/ then http://www.csszengarden.com/214/page2/

Instead, I'd expect something like navigating all designs, for instance, staring with http://www.csszengarden.com/221/, then http://www.csszengarden.com/220/, etc. as in http://www.mezzoblue.com/zengarden/alldesigns/

Thanks in advance.

If we're going to showcase the modern web (html5, a/r design, css3/4, object literal JS, etc.), I believe we need to add a blank element into the markup. This would allow designers and JS programmers to really push the edge of animations on the site.

I'm curious if this is worthwhile for the csszengarden.com project because can become an entire programming project within itself and it could move away from having any constancy between projects. But maybe that's the point, to realize, 10 years later, how powerful html5 elements can be and how easily we can manipulate them with JS and CSS3 transitions.

Thoughts?

When on mobile in portrait (I'm on a Nexus 4 in Chrome) the sidebar overlaps the content. Sidebar needs to be moved to bottom or hidden as a "menu".

An issue to track inevitable bug reports on 214, the new default design. I'll lead with a known one:

• on a Retina MBP, the design nav overlaps the sidebar accent due to weirdness with the way CSS gradients appear to be calculated

After publishing the new mod_rewrite rules a few previously unnoticed issues have come up.

• External CSS files have always been permitted for the sake of previewing and testing. They no longer work:

http://www.csszengarden.com/?cssfile=http://www.skybased.com/css-zen-garden/css/screen.css

• This could be partially addressed by solving the above, but seems like it still might be a separate issue. Designs that rely on the older markup are meant to still be supported with the addition of /legacy/ in the URL. They now break in a slightly different way:

http://csszengarden.com/legacy/?cssfile=http://www.brucelawson.co.uk/zen/sample.css/

I noticed that in the example HTML file, the href attributes for the links near the bottom, for validation, github, etc, are empty. Not being able to edit the HTML I assume that gets fixed by some build process I'm not aware of? Or are we allowed to fill those in?

I've taken a first pass at converting the previous XHTML over to HTML5, but there's so much more that can be done here.

Semantics can be improved. Redundant spans will go away. ARIA hooks can be added. It's all up for discussion.

I sometimes want to show the css zen garden HTML based presentations, so I put it in an iframe. But my slides are typically served over https, and embedding an http iframe in an https document is not allowed.

Serving the css zen garden over https in addition to http would be greatly appreciated.

Hopefully, this can easily (and cost free) be done with https://letsencrypt.org/.

Once upon a time I tried to change the URLs from this:

http://www.csszengarden.com/?cssfile=/045/045.css&page=5

to something this:

http://www.csszengarden.com/045/page5

You can read the entire history and a lot about the syntax we tried 8 years ago (!) here:

http://mezzoblue.com/archives/2005/03/04/rewrite/

Now is probably a good time to take another crack at this.

If you decide to step up, please take a look at the comment thread on that post (you can just read my replies to see where we got and who else to read) before starting. There are some subtleties you should be aware of, this isn't an easy job.

In the requirements section it says:

CSS 3 & 4 should be limited to widely-supported elements only, or strong fallbacks should be provided. The CSS Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public.

Only IE 6 - 8 don't support CSS3.

According to StatCounter all (old) IE versions combined have a market share of 10.71 %. And that gives us the information that the browsing public ♥ CSS3.

And as a side note: There is no such thing as CSS4.

pull request #87 (french translation) is not corectly updated on http://www.csszengarden.com/tr/fr/.
for example:

51 - "participation-p2" => '... la feuille de style dcomme ...',
52 + "participation-p2" => '... la feuille de style comme ...',

I see always: la feuille de style dcomme

As an alternative to PHP.

Slightly more ambitious than killing the superfluous spans -- the extra divs at the bottom could easily be replaced with judicious ::before and ::after usage. The problem is that, like killing the spans, it's another manual job across all 213 designs.

Three things to do here:

1. get PHP in line with index.php
2. update the HTML to match index.php
3. change tokens to ISO shortcodes, add redirects to .htaccess

@mezzoblue I remember when CSS Zen Garden came on the scene and over the years, I've moved from a student to a professional to a professor. I've always pointed to CSS Zen Garden to showcase the power of CSS to produce amazing designs (without modifying the HTML).

I recently looked up the project on GitHub and was surprised to see you had moved it here. I'm so glad you have.

Reviewing the latest commits, it looks like while the website stays up (thank you), the project is not maintained.

I'm wondering if you're willing to bring on one or more maintainers to the project to clean up some bugs (like #108) and to hopefully invite the new generation of designers to submit their designs to the project.

I'd like to create a core set of guidelines before anything is done to the project for you to review and sign off on (if you'd like). The base of the guidelines would be not breaking old designs, focusing on open standards, and welcoming new designs.

I'm open to hearing your thoughts on this.

Thank you

We need to include ARIA attributes. Which ones, and where?

Some of the links aren't available. For example when clicking "View all designs". I think all the links which have "http://www.mezzoblue.com" in it aren't online any longer.