sakura: a minimal classless css framework / theme.
[Go to Github repository]
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.
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.
Compare a live page WITH and WITHOUT sakura.
-
Download the file:
wget "https://raw.githubusercontent.com/oxalorg/sakura/master/css/sakura.css"
OR download directly: sakura.css
-
Link it from html:
<link rel="stylesheet" href="sakura.css">
(Optional) but recommended, use normalize.css to reset before 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";
Please leave a star :)