[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10845":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},10845,"sakura","oxalorg\u002Fsakura","oxalorg",":cherry_blossom: a minimal css framework\u002Ftheme.","https:\u002F\u002Foxal.org\u002Fprojects\u002Fsakura",null,"HTML",4375,185,30,13,0,1,5,28.81,"MIT License",false,"master",true,[25,26,27,28,29,5,30,31],"classless","classless-theme","css","css-framework","design","theme","web","2026-06-12 02:02:27","# [sakura](https:\u002F\u002Foxal.org\u002Fprojects\u002Fsakura): a minimal, ***classless*** CSS *framework* \u002F **theme**.\n\n[![npm][npm-image]][npm-url]\n\n[npm-image]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fsakura.css.svg?colorB=982c61\n[npm-url]: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fsakura.css\n\n[Go to [GitHub repository](https:\u002F\u002Fgithub.com\u002Foxalorg\u002Fsakura)]\n\n![The cherry blossoms](sakura160.jpg)\n\n> The perfect blossom is a rare thing. You could spend your life looking for\n> one, and it would not be a wasted life.\n\nJust drop `sakura.css` into any webpage and go from an ugly-looking 1900s\nwebsite to a pretty, modern website in literally 0 seconds.\n\nIt's easy to customize and build on top of sakura.\n\nSakura supports extremely easy theming using variables for duotone color\nscheming. It comes with several existing themes, which can be found in the `css`\nfolder of this repository.\n\n## Demo\n\nCompare a live page **WITH** and **WITHOUT** sakura.\n\n* [https:\u002F\u002Foxal.org\u002Fprojects\u002Fsakura\u002Fdemo](https:\u002F\u002Foxal.org\u002Fprojects\u002Fsakura\u002Fdemo)\n\nAlso, my blog is a nice place to check sakura in action with heavy text (it has\na \"change theme\" button on the top as well):\n\n* [oxal.org\u002Fblog](https:\u002F\u002Foxal.org\u002Fblog\u002F)\n\n## Bookmark\n\nDon't want to develop using sakura but instead want to use it on websites with\noutdated 90s design (i.e. no CSS)?\n\nIf so, enable sakura on any website using the following\ninstructions:\n\n* [https:\u002F\u002Foxal.org\u002Fprojects\u002Fsakura\u002Fbookmark](https:\u002F\u002Foxal.org\u002Fprojects\u002Fsakura\u002Fbookmark)\n\n## Why? - Reasons to use sakura\n\nHow exactly does sakura help you? I had a discussion about this on the\n[reddit thread](https:\u002F\u002Fwww.reddit.com\u002Fr\u002Fwebdev\u002Fcomments\u002F68zpdp\u002Fsakura_a_minimal_classless_css_theme_just_drop_it\u002F).\n\n- Just drop it in, even on existing HTML content, to get a pretty-looking\n  website (everything *\"just works\"*)\n- Quick prototyping, especially when working on backend sites and can't yet be\n  bothered to fidget with CSS\u002FHTML\n- Building a quick (but pretty) site\u002Fblog for your best friend or aunt!\n- No need to remember tons of different class names for every other CSS\n  framework\n- Works amazingly with markdown-generated HTML pages (eliminates the need for\n  hacks like including `.img img-responsive` in `\u003Cimg>\u003C\u002Fimg>` tags generated\n  from markdown-parser\n- Wonderful for people who aren't really good or interested in design as sakura\n  is nothing but a set of reasonable defaults\n\n## Installation\n\n**CDN** (*recommended*):\n\n1. Simply add this in your `\u003Chead>` tag:\n\n    ```html\n    \u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fsakura.css\u002Fcss\u002Fsakura.css\" type=\"text\u002Fcss\">\n    ```\n\n**Manually**:\n\n1. Download the file:\n\n    ```bash\n    wget \"https:\u002F\u002Fraw.githubusercontent.com\u002Foxalorg\u002Fsakura\u002Fmaster\u002Fcss\u002Fsakura.css\"\n    ```\n\n    **OR** download directly:\n    [sakura.css](https:\u002F\u002Fraw.githubusercontent.com\u002Foxalorg\u002Fsakura\u002Fmaster\u002Fcss\u002Fsakura.css)\n\n2. Link it from HTML:\n\n    ```html\n    \u003Clink rel=\"stylesheet\" href=\"sakura.css\" type=\"text\u002Fcss\">\n    ```\n\n\n**Package Manager**:\n\n1. Install from npm:\n\n    ```bash\n    npm install sakura.css\n    ```\n\n2. Install from Yarn:\n\n    ```bash\n    yarn add sakura.css\n    ```\n\n**(Optional)** *but recommended* to use\n[normalize.css](https:\u002F\u002Fgithub.com\u002Fnecolas\u002Fnormalize.css\u002F)\nto reset *before* using sakura.\n\n## Sites using sakura\n\n* [https:\u002F\u002Foxal.org\u002Fblog\u002F](https:\u002F\u002Foxal.org\u002Fblog\u002F)\n* [http:\u002F\u002Fcomputableverse.com](http:\u002F\u002Fcomputableverse.com)\n* [https:\u002F\u002Fgaiwan.co](https:\u002F\u002Fgaiwan.co)\n* [https:\u002F\u002Fwww.softwareyoga.com\u002F](https:\u002F\u002Fwww.softwareyoga.com)\n* [https:\u002F\u002Fwww.taazakitchen.com\u002F](https:\u002F\u002Fwww.taazakitchen.com)\n* [https:\u002F\u002Faudioviz.surge.sh\u002Fvex.html](https:\u002F\u002Faudioviz.surge.sh\u002Fvex.html)\n* [https:\u002F\u002Fchocopy.org](https:\u002F\u002Fchocopy.org)\n* [https:\u002F\u002Fwasmbyexample.dev\u002F](https:\u002F\u002Fwasmbyexample.dev\u002F)\n* [https:\u002F\u002Fninjas.cl\u002F](https:\u002F\u002Fninjas.cl\u002F)\n* [https:\u002F\u002Fminidown.atusy.net](https:\u002F\u002Fminidown.atusy.net)\n* [https:\u002F\u002Fjvanelian.dev](https:\u002F\u002Fjvanelian.dev)\n* [https:\u002F\u002Fmousikofidi.info\u002F](https:\u002F\u002Fmousikofidi.info\u002F)\n* [https:\u002F\u002Focamlbook.org](https:\u002F\u002Focamlbook.org)\n* [https:\u002F\u002Fmonkeyjunglejuice.github.io](https:\u002F\u002Fmonkeyjunglejuice.github.io)\n* [https:\u002F\u002Freinforce.moe\u002Fabout-en.md](https:\u002F\u002Freinforce.moe\u002Fabout-en.md)\n* [https:\u002F\u002F4clojure.oxal.org\u002F](https:\u002F\u002F4clojure.oxal.org\u002F)\n* [https:\u002F\u002Fyunru.se](https:\u002F\u002Fyunru.se)\n* [https:\u002F\u002Farticleparser.vercel.app\u002F](https:\u002F\u002Farticleparser.vercel.app\u002F)\n* [https:\u002F\u002Fbluelander.bearblog.dev\u002F](https:\u002F\u002Fbluelander.bearblog.dev\u002F)\n* [https:\u002F\u002Fonefetch.dev\u002F](https:\u002F\u002Fonefetch.dev\u002F)\n* [https:\u002F\u002Fnonwiz.dev\u002F](https:\u002F\u002Fnonwiz.dev)\n* [https:\u002F\u002Ffrost.kiwi\u002F](https:\u002F\u002Ffrost.kiwi)\n* [https:\u002F\u002Fkylenazario.com](https:\u002F\u002Fkylenazario.com)\n* [https:\u002F\u002Fprogress.jackkershaw.net](https:\u002F\u002Fprogress.jackkershaw.net)\n* [https:\u002F\u002Fbigdetector.com\u002F](https:\u002F\u002Fbigdetector.com\u002F)\n* [https:\u002F\u002Fchordtransposer.val.run](https:\u002F\u002Fchordtransposer.val.run)\n\n***If you're using sakura, please let me know or make a pull request adding in\nyour name. I would be super happy!! `^_^`***\n\n## Theming\n\nYou can make your own themes by overriding some variables for colors.\n\nHere is an example file: `.\u002Fscss\u002Fsakura-earthly.scss`:\n\n```scss\n\u002F* Duotone color scheming:\n   Uses blossom as the revealing\u002Fstark color\n   Uses fade as the more prominent color\n*\u002F\n$color-blossom: #338618;\n$color-fade: #5e5e5e;\n\n\u002F* bg color is used for the background of the page\n   bg-alt is used for code-blocks etc\n*\u002F\n$color-bg: #f9f9f9;\n$color-bg-alt: #C7E3BE;\n\n\u002F* color of all the text on the page *\u002F\n$color-text: #4a4a4a;\n$font-size-base: 1.8rem;\n\n@import \"main\";\n```\n\n## Dark mode\n\nAdd a media attribute as follows to choose a darker theme for dark mode.\n\n```\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Funpkg.com\u002Fsakura.css\u002Fcss\u002Fsakura.css\" media=\"screen\" \u002F>\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Funpkg.com\u002Fsakura.css\u002Fcss\u002Fsakura-dark.css\" media=\"screen and (prefers-color-scheme: dark)\" \u002F>\n```\n\n## Contributing\n\nPlease have a look at the [instructions](CONTRIBUTING.md).\n\n## Contributors\n\n* Bookmarklet was added by [Zhouzi](https:\u002F\u002Fgithub.com\u002FZhouzi).\n* The image is credited to\n[Deedster](https:\u002F\u002Fpixabay.com\u002Fen\u002Fusers\u002FDeedster-2541644\u002F).\n* Vite previews added by @spenserblack [SpenserBlack](https:\u002F\u002Fgithub.com\u002Fspenserblack).\n\n## Share some \u003C3\n\n> Between our two lives there is also the life of the cherry blossom.\n> - *Basho Matsuo*\n\nPlease leave a star. :)\n","Sakura 是一个极简的无类（classless）CSS 框架\u002F主题。其核心功能在于仅需引入 `sakura.css` 文件，即可迅速将网页从老旧样式转变为美观现代的设计，无需额外编写复杂的 CSS 代码。它支持通过变量轻松实现双色调配色方案，并提供了多种预设主题以供选择。此外，Sakura 对 Markdown 生成的 HTML 页面友好，非常适合快速原型设计、后端站点美化或为非设计师用户提供简单易用的网站构建工具。无论是个人博客、小型项目展示还是需要快速改善视觉效果的老网站，Sakura 都能提供简洁高效的解决方案。",2,"2026-06-11 03:30:27","top_topic"]