sakura:a minimal,classlessCSSframework/theme.
[Go toGitHub 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 dropsakura.cssinto 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 thecss
folder of this repository.
Compare a live pageWITHandWITHOUTsakura.
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):
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:
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-responsivein<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
CDN(recommended):
-
Simply add this in your
<head>tag:<linkrel= "stylesheet"href= "https://cdn.jsdelivr.net/npm/sakura.css/css/sakura.css"type= "text/css">
Manually:
-
Download the file:
wget"https://raw.githubusercontent /oxalorg/sakura/master/css/sakura.css"ORdownload directly: sakura.css
-
Link it from HTML:
<linkrel= "stylesheet"href= "sakura.css"type= "text/css">
Package Manager:
-
Install from npm:
npm install sakura.css
-
Install from Yarn:
yarn add sakura.css
(Optional)but recommendedto use normalize.css to resetbeforeusing sakura.
- https://oxal.org/blog/
- http://computableverse
- https://gaiwan.co
- https:// softwareyoga /
- https:// taazakitchen /
- 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://solely.gay
- https://bluelander.bearblog.dev/
- https://onefetch.dev/
- https://nonwiz.dev/
- https://frost.kiwi/
If you're using sakura, please let me know or make a pull request adding in
your name. I would be super happy!!^_^
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";Add a media attribute as follows to choose a darker theme for dark mode.
<link rel= "stylesheet" href= "https://unpkg /sakura.css/css/sakura.css" media= "screen" />
<link rel= "stylesheet" href= "https://unpkg /sakura.css/css/sakura-dark.css" media= "screen and (prefers-color-scheme: dark)" />
Please have a look at theinstructions.
- Bookmarklet was added byZhouzi.
- The image is credited to Deedster.
- Vite previews added by @spenserblackSpenserBlack.
Between our two lives there is also the life of the cherry blossom.
- Basho Matsuo
Please leave a star.:)
