sakura: a minimal classless css framework / theme.

  • By Mitesh
  • Last update: Jan 8, 2023
  • Comments: 17

sakura: a minimal classless css framework / theme.

npm

[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 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.

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):

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

  • Just drop 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 of hacks like including .img img-responsive in markdown-parser generated tags
  • Wonderful for people not really good or interested with design as sakura is nothing but a set of reasonable defaults

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 tag.

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

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

Contributing

Please have a look at the instructions.

Contributors

Share some <3

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

Please leave a star :)

Github

https://github.com/oxalorg/sakura

Comments(17)

  • 1

    Build CSS with GitHub action

    This uses a GitHub action to build the CSS files. If possible, it will attempt to commit the built CSS.

    Examples

    Changes to master

    https://github.com/spenserblack/sakura.css/commit/474d836a7bf1c7e4e9558ce3ccf8f09b11476e1c https://github.com/spenserblack/sakura.css/actions/runs/2699137732

    Pull Request

    https://github.com/spenserblack/sakura.css/pull/2

    For #77 (first list item)

  • 2

    Code runs out of the code block

    Hello, I wanted to use sakura with my org-mode notes however when I export my notes to HTML the code runs out of the code block like this:

    image

    So is there any way to add a horizontal scroll bar in the code block if the code is too long?

  • 3

     font smaller than 
     font in a minimal html

    Opening the following minimal html in a browser:

    <!DOCTYPE html>
<html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="content-type">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link rel='stylesheet' href='https://unpkg.com/normalize.css/' type='text/css'>
  <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">
</head>
<body>
  <pre><code>I am smaller </pre></code>
  <pre>I am bigger</pre>
</body>
</html>

    I see this:

    image

    I have no idea why this happens. Opening in the same browser (Chrome Dev 85.0.4183.102 on Windows 10) sakura standard demo (https://oxal.org/projects/sakura/demo/) I see the correct size for code element. I have tried inspecting the elements to see differences and also tested with a fresh local sakura.css but I was not able to find the issue. I also opened a locally downloaded copy of above demo and I still see it correctly.

    Can somebody reproduce this? Some explanation for this effect?

    Edit

    I found an explanation for why this does not happen with sakura demo. testing a stripped down version of the demo containing only two elements like in the above file I realized that the demo never uses a <pre> element alone, but always with a <code> element inside. The strange font-size behaviour happens for <pre><code> element when a <pre> element without <code> is on the page.

    Is it supposed to be like this?

    Incidentally, a HTML5 test page like the one used in latex.css (https://latex.now.sh/elements#text__code) could be useful to be available also on top of the demo and I suspect it might show the same issue.

    Further Edit

    I was initially confused and at some point thought the mere presence of an isolated pre tag somewhere caused the reduction of size for the font of all <pre><code> tags in the page. Of course, that would have been crazy and nothing of the sorts happen 😅

  • 4

    No CSS for a:visited

    Thank you for sakura!

    It seems that there's no specific CSS for visited links (a:visited). I think it would be a great addition, considering this is a basic feature of browser, and removing it I think makes the browsing experience a bit worse.

  • 5

    Add `prefers-color-scheme` to recognize dark mode

    Don't like it myself :-) but some folks really like dark mode, and evidently adding the following media query works:

    @media (prefers-color-scheme: dark) {
    // ... dark styles ...
}

    Thanks for doing Sakura! I like it a lot.

  • 6

    Add a bookmarklet to directly inject the CSS

    /u/jogai-san on reddit asked for making a bookmarklet, so I'm creating an issue since I'm not sure what would be the best way to go about doing this.

    • Should we just have static css inside the bookmarklet, or let it download the most updated one and then embed it?
    • Will directly embedding <link> tag work on all sites?
    • What about it conflicting with other stylesheets?
  • 7

    slight updates to README (includes link inclusion)

    it's my first time fiddling around with oxalorg/sakura and I can say right off the bat it's just as simple as I'd hoped to be!! in response, I'd like to have my blogpost url added on here, alongside a lil minor fix.

    (if merge fails automatically, you can still have the option to merge it manually!)

  • 8

    add https://articleparser.vercel.app/ as sakura user

    I've started that project yesterday BTW

    I discovered the lib from other activities (probably stars) then did a PoC using a Golang cloud function with an article parser library I already used and I think the result is as good as the alternatives provide.

    I am the backend-like of guy and for the frontend, I often use things like Chakra UI but sometimes React is pretty overkill.

    That site neither uses flexbox nor javascript and does all the page crunching on the cloud function.

    Awesome work, guys. The styling was really the easiest part of this project xD

    The repo: https://github.com/lucasew/readability-web

  • 9

    Add Name IN Sakura List

    Hi @oxalorg I saw that the readme states that if I do use sakura, you would love to include my sites name in the list so here is another addtion for your list

    http://kjani.xyz

  • 10

    Add site using new.css

    I have a small project that I've been dissatisfied with the styling on for a while! I just ripped out all my crappy styling and started using new.css. THANK YOU!

  • 11

    Compilation fails on import "main" but filename is "_main.scss

    I just cloned the repo and tried to compile the SCSS files and got a bunch of error messages

    Error: File "c:\Users\sforman\Desktop\src\Misc\sakura\scss\main" not found
        on line 14 of sass/c:\Users\sforman\Desktop\src\Misc\sakura\scss\sakura-dark-solarized.scss
>> @import "main";
   --------^

Error: File "c:\Users\sforman\Desktop\src\Misc\sakura\scss\main" not found
        on line 14 of sass/c:\Users\sforman\Desktop\src\Misc\sakura\scss\sakura-dark-solarized.scss
>> @import "main";
   --------^

Error: File "c:\Users\sforman\Desktop\src\Misc\sakura\scss\main" not found
        on line 14 of sass/c:\Users\sforman\Desktop\src\Misc\sakura\scss\sakura-dark.scss
>> @import "main";
   --------^

    ...and so on. Am I doing something wrong? Is there a SASS convention around underscore-prefixed filenames?

  • 12

    (had to reissue a PR again cuz the branch I modded automatically closed the previous) slight updates to README (includes link inclusion)

    it's my first time fiddling around with oxalorg/sakura and I can say right off the bat it's just as simple as I'd hoped to be!! in response, I'd like to have my blogpost url added on here, alongside a lil minor fix.

    (if merge fails automatically, you can still have the option to merge it manually!)

    referenced url: thebelovedmoon's personal blog

  • 13

    Add new theme "radical"

    Add a new monospaced theme called "radical" inspired by terminal interfaces.

    Font choice: "SF Mono", "Menlo" for Mac "Consolas" for Windows "Noto Mono" because other Sakura themes use "Noto sans" "Courier New", Courier, monospace as fallback according to w3schools.

    Tested on FF and Chrome. Also checked on Windows and Mac and Android with AMOLED (reason for full black background). Also checked against FF colorblindness simulations.

    The theme is named after hacker prodigy Radical Ed from Cowboy Bebop and also because it feels radically different from other Sakura themes 😄

    Example: radical_screenshot

  • 14

    Tables need spacing at the bottom

    Tables do not have margin-bottom set so there is insufficient space after a table when followed by a paragraph. I can submit a PR to add margin-bottom: 2.5rem; to tables in scss/_main.scss if needed.

  • 15

    Fix scrolling div background

    When a div overflows and you scroll to the right, the background color gets cut off. The background color was set to the item inside the div, not the div itself. This fixes it

  • 16

    Confusing style of buttons after being clicked

    It appears that button:hover and button:focus have the exact same styling. IMO this is confusing because a button can remain focused after being clicked, so it visually looks like it's still being hovered over. This can be seen in the current test.html. If you click on the "Switch" button, then the styling of the clicked button will be different than the button above it.

  • 17

    Convert test into automated preview with vite build

    This converts test.html into an automated Vercel deployment. Users can still test locally with cd vercel && npm run dev, but each pull request should also have an automated preview, now. The preview will also be rebuild with each commit to master.

    How to deploy to vercel

    1. Create a Vercel account and link it to GitHub
    2. Click "New Project" and select sakura
    3. Use Vite as the framework preset
    4. Set the root directory to vercel/
    5. Override the build command to npm install && cd .. && npm install (we need to build the CSS just once)

    This could be part of the same package.json instead of in a separate sub-package, but I didn't want to clutter the main project too much.

    Sample

    https://sakura-css-spenserblack.vercel.app/

    For https://github.com/oxalorg/sakura/issues/77#issuecomment-1190441201 Closes #95

Popular Tag

Related