CSS Zen Garden
How does it work?
It uses gists as themes and builds static pages incremently with Next.js. Url like
https://czg.vercel.app/theme/[gistid] will be built with the corresponding gist's content when viewed. Thank to this stack, you can share your own theme freely. Any gist can be viewed as a theme in this way, as long as it confronts to specifications of a theme gist.
The theme gist is supposed to have these things at least:
gist ├── theme.css └── manifest.json
All contents of the gist can be accessed with
https://czg.vercel.app/api/theme/[gistid]/[filename] like https://czg.vercel.app/api/theme/f4b657c4e3b99c63281b079f66d4dc34/theme.css.
You can take the default theme we use as an example.
All private gists of csszen will be included as an offical themes. You may submit an issue labeled
theme request for theme fork request if you want to make your theme one of our page's theme choices like csszen/garden#4.
Note that keep a track of forkings for upcoming updates, we may delete the forked theme and refork the lastest version.
How can I use images in my theme?
The problem is actually how to save images to gist in our circumstances.
Or you may choose to push images directly into a gist with git, take how-to-add-image-to-gist.md as a hint. You can fetch the image like
/api/theme/10a7af172c2469f0b6481eedfb4ce63c/robot.png. And you can use them as relative path in themes like
These rules all work when it comes to fonts.
How can I use fonts in my theme?
You may add import css declartion in your theme like the default theme. It looks like
Or you may mannully attach fonts to the gist like images and declare font faces in your theme.
Is postcss tools built in? Can I write Sass?
Yes. You can enable Sass by editing the
manifest.json and set
scss, the editor will add
theme.scss and compile it to
theme.css automatically when you edit it. Take http://czg.vercel.app/submit?theme=cadbc727a641595682916bea906346d0 as an example.
What's the point of this project since we can use codepen/jsfiddle .etc to customize themes and see what they look like?
First, speed. Vercel provides an extremely fast and stable rendering exprience.
Second, we always need a place/project to gather things around. We need a project to maintain the site for issues. And we need a real website.
No, it's easy to implement, but you shouldn't. Let's explore and see what we can do with the Zen of CSS.
What's relation between this project and the original?
This is unofficial and personal maintained currently. Submit an issue for things related to development or things other than that.
Contributions welcomed. Thoughts welcomed.
Started here, heading...?
Recent years, we finally find that we are living on the earth that has days and nights. So, is light/dark theme shift necessay?
Open to new thoughts. Let me know what you think about it at csszen/garden#3.
You may join the slack workspace where most of discussions on development take place.
Next.js, it's easy to get envolved with only a basic knowledge of react.js framework required. If you know how to use react, I believe that you are supposed to know how to clone a repository and install requirements with
To run it on your machine, just run
npm run dev and the prompt will guide you to page served on localhost.
To load theme choices from gists, you are supposed to declare your Github token at
/.env.local. You may follow github's official lead to create a personal access token. Its absence will display no choices silently, no errors will be raised.
CC0 1.0 Universal