sakura: a minimal classless css framework / theme.

[Go to Github repository]

The cherry blossoms

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 in sakura.css to any webpage and go from ugly looking 1900's website to a pretty modern website in literally 0 seconds.

Easy to customize and build on top of sakura.

Sakura supports extremely easy theming support using variables for duotone color scheming. Comes with several existing themes, can be found in the css folder of this repository.

Demo

Compare a live page WITH and WITHOUT sakura.

Bookmark

Don't want to develop using sakura, but instead want to use it on websites with outdated 90's 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

Installation

Manually (recommended):

  1. Download the file:

    wget "https://raw.githubusercontent.com/oxalorg/sakura/master/css/sakura.css"

    OR download directly: sakura.css

  2. Link it from html:

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

CDN:

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

    <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/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!! ^_^

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

Contributors

Share some <3

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

Please leave a star :)