oxalorg/sakura — a UI/UX project — sits at 4.4k GitHub stars in the UI / UX space. :cherry_blossom: a minimal css framework/theme.
Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.
WHY NO REVIEW YET
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.
sakura: a minimal, classless CSS framework / theme.
[Go to GitHub repository]
The perfect blossom is a rare thing. You could spend your life looking for
one, and it would not be a wasted life.
Just drop sakura.css into any webpage and go from an ugly-looking 1900s
website to a pretty, modern website in literally 0 seconds.
It's easy to customize and build on top of sakura.
Sakura supports extremely easy theming using variables for duotone color
scheming. It comes with several existing themes, which can be found in the css
folder of this repository.
Demo
Compare a live page WITH and WITHOUT sakura.
https://oxal.org/projects/sakura/demo
Also, my blog is a nice place to check sakura in action with heavy text (it has
a "change theme" button on the top as well):
oxal.org/blog
Bookmark
Don't want to develop using sakura but instead want to use it on websites with
outdated 90s design (i.e. no CSS)?
If so, enable sakura on any website using the following
instructions:
https://oxal.org/projects/sakura/bookmark
Why? - Reasons to use sakura
How exactly does sakura help you? I had a discussion about this on the
reddit thread.
Just drop it in, even on existing HTML content, to get a pretty-looking
website (everything "just works")
Quick prototyping, especially when working on backend sites and can't yet be
bothered to fidget with CSS/HTML
Building a quick (but pretty) site/blog for your best friend or aunt!
No need to remember tons of different class names for every other CSS
framework
Works amazingly with markdown-generated HTML pages (eliminates the need for
hacks like including .img img-responsive in <img></img> tags generated
from markdown-parser
Wonderful for people who aren't really good or interested in design as sakura
is nothing but a set of reasonable defaults
(Optional)but recommended to use
normalize.css
to reset before using sakura.
Sites using sakura
https://oxal.org/blog/
http://computableverse.com
https://gaiwan.co
https://www.softwareyoga.com/
https://www.taazakitchen.com/
https://audioviz.surge.sh/vex.html
https://chocopy.org
https://wasmbyexample.dev/
https://ninjas.cl/
https://minidown.atusy.net
https://jvanelian.dev
https://mousikofidi.info/
https://ocamlbook.org
https://monkeyjunglejuice.github.io
https://reinforce.moe/about-en.md
https://4clojure.oxal.org/
https://yunru.se
https://articleparser.vercel.app/
https://bluelander.bearblog.dev/
https://onefetch.dev/
https://nonwiz.dev/
https://frost.kiwi/
https://kylenazario.com
https://progress.jackkershaw.net
https://bigdetector.com/
https://chordtransposer.val.run
If you're using sakura, please let me know or make a pull request adding in
your name. I would be super happy!! ^_^
Theming
You can make your own themes by overriding some variables for colors.
Here is an example file: ./scss/sakura-earthly.scss:
/* Duotone color scheming:
Uses blossom as the revealing/stark color
Uses fade as the more prominent color
*/
$color-blossom: #338618;
$color-fade: #5e5e5e;
/* bg color is used for the background of the page
bg-alt is used for code-blocks etc
*/
$color-bg: #f9f9f9;
$color-bg-alt: #C7E3BE;
/* color of all the text on the page */
$color-text: #4a4a4a;
$font-size-base: 1.8rem;
@import "main";
Dark mode
Add a media attribute as follows to choose a darker theme for dark mode.
The most recent commit recorded on oxalorg/sakura was 7 months ago, based on the GitHub push timestamp. The repository has 182 forks — one of the better signals of community interest.
How does oxalorg/sakura compare to other UI / UX projects?
oxalorg/sakura is tracked by TopGit in the UI / UX category, with 4.4k GitHub stars and written in HTML. Browse the UI / UX topic page on TopGit to compare it against similar projects by stars and activity.
How many stars does oxalorg/sakura have?
oxalorg/sakura has 4.4k GitHub stars — refresh the page for the live number, or check github.com/oxalorg/sakura. TopGit mirrors GitHub's count but does not claim minute-by-minute accuracy.
Is oxalorg/sakura open source?
Yes — oxalorg/sakura ships under the MIT license, which makes its source code freely readable (and, depending on license terms, forkable and reusable). Source: github.com/oxalorg/sakura.
What is oxalorg/sakura?
oxalorg/sakura (oxalorg/sakura) is a HTML project on GitHub. From the project's own README: :cherry_blossom: a minimal css framework/theme.
Where do I read more about oxalorg/sakura?
This TopGit page is a snapshot — the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/oxalorg/sakura is the definitive source.
Read full README in the tab above.
Is sakura worth your time?
ChatGPT, Claude and Perplexity can all read this page. Ask one of them what it makes of sakura.
/sakura
