How to create an artwork package

CSS-ART.COM uses a simple package.json package format that is easy to setup and maintain.

The CSS and HTML are separated into individual files and it is possible to add links to your website, social media, avatar, original source URL, codepen etc.

An example artwork package can be found on the following URL

https://github.com/style-tools/css-art.com/tree/master/artwork/aku-aku-css-art

{
    "name": "aku-aku-css-art",
    "version": "1.0.0",
    "title": "Aku Aku CSS art",
    "description": "Crash Bandicoot: Responsive Aku Aku in CSS",
    "author": {
        "name": "João Santos",
        "avatar": "https://s.cdpn.io/profiles/user/16670/512.jpg?1502727078",
        "web": "https://jotavejv.github.io",
        "social": [{
            "title": "Codepen",
            "url": "https://codepen.io/jotavejv/"
        }, {
            "title": "Twitter",
            "url": "https://twitter.com/_jotavejv"
        }, {
            "title": "Google+",
            "url": "https://plus.google.com/u/2/communities/118377057769827266257"
        }]
    },
    "html": "aku-aku-css-art.html",
    "css": ["aku-aku-css-art.css"],
    "js": "",
    "thumbnail": "thumbnail.png",
    "splash": "splash.png",
    "keywords": ["animated", "css painting"],
    "original": "https://codepen.io/jotavejv/pen/VzyaeV",
    "codepen": "https://codepen.io/jotavejv/pen/VzyaeV"
}

It is possible to update a package publication via a GitHub pull request so that the publication remains in your control.

Publish a new artwork via a pull request

A new artwork can be added via a pull request. The following official GitHub documentation provides instructions:

https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request

Why publish a CSS artwork?

CSS-ART.COM is visited by tens of thousands of art viewers per week from almost all countries in the world. Publishing an artwork can provide free access to many potential customers or people for whom art might be personally meaningful and applicable.

About

CSS-ART.COM was originally setup as an open source crowd sourced test environment for $async, a high performance async script and CSS loader. Artworks often use the most advanced CSS and as a result, CSS-ART.COM helped to discover a CSS parser bug in Google Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=917522

Artwork: https://css-art.com/snowman-css-project/

Information about the bug discovery was posted on the forum: https://github.com/style-tools/css-art.com/issues/1

About the author

A fan of pure CSS design and once a regular follower of cssbeauty.com (down since 2006).