🌸 a minimal css framework/theme.
Alternatives To Sakura
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Bootswatch14,2641,6041783 days ago43July 28, 202345mitJavaScript
Themes for Bootstrap
Water.css7,854218 days ago3August 11, 202160mitCSS
A drop-in collection of CSS styles to make simple websites just a little nicer
Sakura3,7474721 days ago6July 20, 202216mitHTML
:cherry_blossom: a minimal css framework/theme.
2 years ago18mitHTML
A production-ready theme for your projects with a minimal style guide
Numl32947 months ago251March 25, 202222mitJavaScript
Atomic UI Framework based on Web Components and Runtime CSS Generation for rapidly building interfaces that follow your Design System 🌈
Ui188521a day ago320February 16, 202323otherTypeScript
🦄 Decentraland UI
a year ago7JavaScript
A maximalist css framework for making web apps fast
Jekyll Theme Hackcss118
a year ago3gpl-3.0HTML
Dead simple CSS framework now with Jekyll.
2 months ago23mitHTML
A minimalist classless CSS theme with dark mode support. Only 5 KB.
a month ago12April 18, 2022mitSCSS
👌 A simple CSS Framework, including dark mode.
Alternatives To Sakura
Select To Compare

Alternative Project Comparisons

sakura: a minimal, classless CSS framework / theme.


[Go to GitHub repository]

The cherry blossoms

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.


Compare a live page WITH and WITHOUT sakura.

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:

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


CDN (recommended):

  1. Simply add this in your <head> tag:

    <link rel="stylesheet" href="" type="text/css">


  1. Download the file:

    wget ""

    OR download directly: sakura.css

  2. Link it from HTML:

    <link rel="stylesheet" href="sakura.css" type="text/css">

Package Manager:

  1. Install from npm:

    npm install sakura.css
  2. Install from Yarn:

    yarn add sakura.css

(Optional) but recommended to use normalize.css to reset before using sakura.

Sites using sakura

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";

Dark mode

Add a media attribute as follows to choose a darker theme for dark mode.

<link rel="stylesheet" href="" media="screen" />
<link rel="stylesheet" href="" media="screen and (prefers-color-scheme: dark)" />


Please have a look at the instructions.


Share some <3

Between our two lives there is also the life of the cherry blossom.

  • Basho Matsuo

Please leave a star. :)

Popular Css Framework Projects
Popular Theme Projects
Popular Frameworks Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Css Framework