{"id":13424156,"url":"https://github.com/oxalorg/sakura","last_synced_at":"2025-05-12T11:20:58.560Z","repository":{"id":37587489,"uuid":"62117510","full_name":"oxalorg/sakura","owner":"oxalorg","description":":cherry_blossom: a minimal css framework/theme.","archived":false,"fork":false,"pushed_at":"2024-11-18T06:16:56.000Z","size":425,"stargazers_count":4238,"open_issues_count":22,"forks_count":185,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-05-11T11:12:07.467Z","etag":null,"topics":["classless","classless-theme","css","css-framework","design","sakura","theme","web"],"latest_commit_sha":null,"homepage":"https://oxal.org/projects/sakura","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oxalorg.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-28T06:55:14.000Z","updated_at":"2025-05-10T18:44:39.000Z","dependencies_parsed_at":"2024-06-18T13:42:44.149Z","dependency_job_id":"0f7e9809-0abb-4ffc-92b3-835ac5e6e454","html_url":"https://github.com/oxalorg/sakura","commit_stats":{"total_commits":171,"total_committers":43,"mean_commits":"3.9767441860465116","dds":0.5321637426900585,"last_synced_commit":"850f5053403ff25f7d68819e2b808c55639e9f1e"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oxalorg%2Fsakura","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oxalorg%2Fsakura/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oxalorg%2Fsakura/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oxalorg%2Fsakura/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oxalorg","download_url":"https://codeload.github.com/oxalorg/sakura/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253554097,"owners_count":21926614,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["classless","classless-theme","css","css-framework","design","sakura","theme","web"],"created_at":"2024-07-31T00:00:49.550Z","updated_at":"2025-05-11T11:12:11.584Z","avatar_url":"https://github.com/oxalorg.png","language":"HTML","readme":"# [sakura](https://oxal.org/projects/sakura): a minimal, ***classless*** CSS *framework* / **theme**.\n\n[![npm][npm-image]][npm-url]\n\n[npm-image]: https://img.shields.io/npm/v/sakura.css.svg?colorB=982c61\n[npm-url]: https://www.npmjs.com/package/sakura.css\n\n[Go to [GitHub repository](https://github.com/oxalorg/sakura)]\n\n![The cherry blossoms](sakura160.jpg)\n\n\u003e The perfect blossom is a rare thing. You could spend your life looking for\n\u003e 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://oxal.org/projects/sakura/demo](https://oxal.org/projects/sakura/demo)\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/blog](https://oxal.org/blog/)\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://oxal.org/projects/sakura/bookmark](https://oxal.org/projects/sakura/bookmark)\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://www.reddit.com/r/webdev/comments/68zpdp/sakura_a_minimal_classless_css_theme_just_drop_it/).\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/HTML\n- Building a quick (but pretty) site/blog 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\u003e\u003c/img\u003e` 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\u003e` tag:\n\n    ```html\n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/sakura.css/css/sakura.css\" type=\"text/css\"\u003e\n    ```\n\n**Manually**:\n\n1. Download the file:\n\n    ```bash\n    wget \"https://raw.githubusercontent.com/oxalorg/sakura/master/css/sakura.css\"\n    ```\n\n    **OR** download directly:\n    [sakura.css](https://raw.githubusercontent.com/oxalorg/sakura/master/css/sakura.css)\n\n2. Link it from HTML:\n\n    ```html\n    \u003clink rel=\"stylesheet\" href=\"sakura.css\" type=\"text/css\"\u003e\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://github.com/necolas/normalize.css/)\nto reset *before* using sakura.\n\n## Sites using sakura\n\n* [https://oxal.org/blog/](https://oxal.org/blog/)\n* [http://computableverse.com](http://computableverse.com)\n* [https://gaiwan.co](https://gaiwan.co)\n* [https://www.softwareyoga.com/](https://www.softwareyoga.com)\n* [https://www.taazakitchen.com/](https://www.taazakitchen.com)\n* [https://audioviz.surge.sh/vex.html](https://audioviz.surge.sh/vex.html)\n* [https://chocopy.org](https://chocopy.org)\n* [https://wasmbyexample.dev/](https://wasmbyexample.dev/)\n* [https://ninjas.cl/](https://ninjas.cl/)\n* [https://minidown.atusy.net](https://minidown.atusy.net)\n* [https://jvanelian.dev](https://jvanelian.dev)\n* [https://mousikofidi.info/](https://mousikofidi.info/)\n* [https://ocamlbook.org](https://ocamlbook.org)\n* [https://monkeyjunglejuice.github.io](https://monkeyjunglejuice.github.io)\n* [https://reinforce.moe/about-en.md](https://reinforce.moe/about-en.md)\n* [https://4clojure.oxal.org/](https://4clojure.oxal.org/)\n* [https://yunru.se](https://yunru.se)\n* [https://articleparser.vercel.app/](https://articleparser.vercel.app/)\n* [https://bluelander.bearblog.dev/](https://bluelander.bearblog.dev/)\n* [https://onefetch.dev/](https://onefetch.dev/)\n* [https://nonwiz.dev/](https://nonwiz.dev)\n* [https://frost.kiwi/](https://frost.kiwi)\n* [https://kylenazario.com](https://kylenazario.com)\n* [https://progress.jackkershaw.net](https://progress.jackkershaw.net)\n* [https://bigdetector.com/](https://bigdetector.com/)\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: `./scss/sakura-earthly.scss`:\n\n```scss\n/* Duotone color scheming:\n   Uses blossom as the revealing/stark color\n   Uses fade as the more prominent color\n*/\n$color-blossom: #338618;\n$color-fade: #5e5e5e;\n\n/* bg color is used for the background of the page\n   bg-alt is used for code-blocks etc\n*/\n$color-bg: #f9f9f9;\n$color-bg-alt: #C7E3BE;\n\n/* color of all the text on the page */\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://unpkg.com/sakura.css/css/sakura.css\" media=\"screen\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/sakura.css/css/sakura-dark.css\" media=\"screen and (prefers-color-scheme: dark)\" /\u003e\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://github.com/Zhouzi).\n* The image is credited to\n[Deedster](https://pixabay.com/en/users/Deedster-2541644/).\n* Vite previews added by @spenserblack [SpenserBlack](https://github.com/spenserblack).\n\n## Share some \u003c3\n\n\u003e Between our two lives there is also the life of the cherry blossom.\n\u003e - *Basho Matsuo*\n\nPlease leave a star. :)\n","funding_links":[],"categories":["CSS","HTML","Class-less","UI Components \u0026 Styling","Frameworks / Resources"],"sub_categories":["S"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foxalorg%2Fsakura","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foxalorg%2Fsakura","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foxalorg%2Fsakura/lists"}