oxalorg / sakura Goto Github PK

View Code? Open in Web Editor NEW

4.0K 30.0 179.0 405 KB

:cherry_blossom: a minimal css framework/theme.

Home Page: https://oxal.org/projects/sakura

License: MIT License

JavaScript 2.99% HTML 53.06% SCSS 7.31% CSS 35.85% Shell 0.80%

design web css theme sakura classless classless-theme css-framework

sakura's Introduction

sakura: a minimal, classless CSS framework / theme.

[Go to GitHub 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 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.

Demo

Compare a live page WITH and WITHOUT sakura.

https://oxal.org/projects/sakura/demo

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

oxal.org/blog

Bookmark

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:

https://oxal.org/projects/sakura/bookmark

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

Installation

CDN (recommended):

Simply add this in your <head> tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sakura.css/css/sakura.css" type="text/css">

Manually:

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" type="text/css">

Package Manager:

Install from npm:
```
npm install sakura.css
```
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";

Dark mode

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

<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" media="screen" />
<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura-dark.css" media="screen and (prefers-color-scheme: dark)" />

Contributing

Please have a look at the instructions.

Contributors

Bookmarklet was added by Zhouzi.
The image is credited to Deedster.
Vite previews added by @spenserblack SpenserBlack.

Share some <3

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

Basho Matsuo

Please leave a star. :)

sakura's People

Contributors

Stargazers

Watchers

Forkers

colinwhitfield derinoh ralphamale thatsparks sisaacrussell velebak poeblu tmjones birby32 sunnyw1212 schmidt1024 eboxyz geosoftro jemisa mweslander purag jkthorne dannyfeliz aravindr18 mengyou658 hhy5277 raj347 davidabram carabina joelebeau1 andrewarrow princetrunks konoufo bretonio noteave paari bradparks hpssjellis qingdao-frontend outsidecontextsolutions brigsul sacredsatan xcschina mortie buiduccuong30051989 indigotock johnnyperkins myersg86 kompuser simpleabc jerry-goodboy suelsp nio3000 austinsmom pixelkritzel melpomenex saurabhariyan lgg-to-try johny5w j-cam tuxhedoh uzielweb shibaeff enyatokyo kovaelin mqnet mdmartinez murkbgith uinelj imxz matt-daniel-brown nickdances riley-martine nolrinale me6iaton dipadana keegan-he beenotung benreim rohanpadhye my-bnh subsoap apantle zli192 jak4l fo177 plan-t42 jeremykohn softwareyoga chadmorrow kirineko rangeroob ninjascl-archive meit-shah atusy shivankgtm traverseda josh-works irosgrim vberkaltun einaru hosnyabdelfatah seanwarman benzerbett cncoulter

sakura's Issues

Update default fonts/type

Currently, the defaults are set as

$font-family-sans-serif: Verdana, Geneva, sans-serif;
$font-family-serif: serif;

It would be appropriate to change it to default based on the system.

This is how bootstrap4 does it:

$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;

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.

Disabled buttons are not displayed correctly

It used to look like this ( before 3b8050f )

Firefox	Chromium

After that the disabled buttons don't appear correctly

Firefox	Chromium

The problem seems to be on the file input

/* currently it's like this */
input[type=file]::file-selector-button[disabled]

/* it should probably be */
input[type=file][disabled]

/* or */
input[type=file][disabled]::file-selector-button

A similar thing seems to be happening with the :focus-visible pseudo-class, but :hover is working

Bookmark explenation

Hi Sakura Makers,

I was really wondering how you got the "Bookmark" function to work with any website. It's much like how you would use @import or link rel:() without having to worry about any removal.

For me I would like to use it for the baseline of my design system RevolverDS, so that I can lock, load & ship the basics in just like you did so gracefully.

Pointing to the code that does so would be great, I have lots to learn on the back of the front

(docs) installation section missing package manager subsection

Under Installing it should have instructions to install from npm or yarn. Without this it looks like it can't be installed from the npm registry as a dependency in one's project.

Happy to PR

http://findyourip.cf cannot be found

The findyourip.cf link under "Sites using Sakura" should probably be removed.

Roadmap or future plan

Hello oxalorg,

I personally think this project worth develop futher. But for what this project offers at the moment it seems that in close future you will have master most of the required styles. So I am curious what you going to add in, css-wise or interoperability-wise or something completely new.

I have a few quick ideas (which is not very thorough and may not be feasible) below:

Compatible with Bootstrap
Make available in package managers for languages, composer etc
Better cross browser compatibility (prefix etc)
Make available in CDNs
Make compatible in Wordpress (or other popular CMSes)

Hope you continue with the good work.

Horizontal Line Style in Chrome

Hi, great project, it's an absolute joy to use.

I noticed one small thing though. On Firefox, the horizontal line by default appears to have border-style: solid;, but on Chrome it appears to have border-style: inset;

It's a small issue and easily fixable, but for consistency I think it would be nice if Sakura established a default value for all browsers (personally I think the solid style looks better, but that's just my opinion).

Thanks.

Improve tooling

Autogenerate css using GitHub actions, it should only commit if css files have changed
If possible get rid of node-sass
Improve release tooling

Need to spend some time thinking on how to improve the tooling so it's easier for contributions and for quicker releases.

Also moving over to using css vars gets more and more appealing as the years go by. Maybe that will simplify everything a lot!

It's been YEARS! Lets improve the button design.

I built this aiming simplicity. But the design has become a bit outdated.

Lets spice things up starting with buttons.

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.

Anchor Tag Contrast (Accessibility)

The color contrast between link text (#2c8882) and the background (#f9f9f9) does not meet WCAG 2.0 AA or AAA standards. This is an accessibility issue for people with various vision impairments. Darkening the link color to #246f6a will satisfy WCAG AA.

Great work on this! I told everyone I work with about it and they are jazzed.

Img height should be set to AUTO

Image may stretch if normalize.css isn't used or if sakura is used along with bootstrap etc.

CSS Box Sizing Reset

Sakura seems to be almost 'plug and play' however the issue I seem to run into is the lack of box-sizing reset. A very basic CSS reset such as the following would prevent the need for global override on every project:

    html {
        box-sizing: border-box;
    }

    *, *:before, *:after {
        box-sizing: inherit;
    }

My only concern is this is potentially a breaking change as anyone who is currently using the default box sizing without a global override could potentially have layout shifts if this was applied

Why is normalize.css included in this repository?

Hey there!

I think this repository shouldn't serve as a normalize.css host. Also, the risk is that it quickly become out of sync with official releases.

That been said, I think that all sakura's css files should include normalize.css by default. Having to include normalize.css as a second stylesheet defeats the idea behind sakura:

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.

normalize.css addresses browsers inconsistencies, if you're not using it with sakura then you're sure to face bugs here and there.

Happy to submit a PR if that sounds good.

P.S.: including normalize.css in css files would be easy as adding @import 'node_modules/normalize.css'; to the theming scss files.

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:

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

Button disabled pointer events

When a button is disabled, <button disabled="true"> , :focus and :hover events are still working? This makes for a rather unintuitive experience when you still get hover events indicating that something would happen when you click the button.

Void <title>

The <title></title> of project page is empty.

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.

Generate a quick index.html with sakura loaded

I like the idea of having a demo page/blog/landing page with little efforts. It would be even easier if we could just run sakura to create:

css/
  sakura.css
index.html

index.html would include a basic html structure with sakura.css loaded. It could do more than that though, for example:

sakura README.md - generate an index.html file with the html generated from the markdown file
sakura --theme light - generate html file with the light theme loaded

To accomplish that, the repository would just need to include a few js files. You can then declare executables in the package.json and publish them. Users could run npm install sakura --global and then sakura.

No need to lookup for the cdn url or download the css file. No need to create an index.html files with the basic structure.

Happy to submit a PR if that sounds good.

Demo site down?

Howdy,
I was just heading over to your demo so that I could evaluate your project (Looks good so far, BTW!), but it's down! Not sure if you're doing maintenance or what, but I thought you'd like to know.

Here's what I get when I go to https://oxal.org:

... and when I click the link to https://oxal.org/projects/sakura/demo, it redirects to:

Let me know if you'd like any more info!

[Feature Request] Admonitions

This is a great and clean CSS.

Any chance of having Admonitions.
Something like in Jupyter will be great: https://jupyterbook.org/content/content-blocks.html.

Use unique names for theme colors

Bootstrap collects theme colors together using a map, but the variables themselves can have identities that are different from their map keys.
https://github.com/twbs/bootstrap/blob/e5643aaa89eb67327a5b4abe7db976f0ea276b70/scss/_variables.scss#L77-L87

The folder structure could look like this:

scss/_main.scss
scss/sakura.scss
scss/themes/default.scss
scss/themes/[theme-name].scss

Where sakura.scss would look like this:

@import "themes/default";
@import "main";

And themes/default.scss would look this:

// what's currently in sakura.scss
$color-blossom: #1d7484;
$color-fade: #982c61;
// ...
$theme-colors: (
  "color-blossom": $color-blossom,
  "color-fade": $color-fade,
  // ...
);

And themes/[theme-name].scss would look like this:

// copied from sakura-dark.scss for an example
$color-blossom-theme-name: #1d7484;
$color-fade-theme-name: #982c61;
// ...
$theme-colors: (
  "color-blossom": $color-blossom-theme-name,
  "color-fade": $color-fade-theme-name,
  // ...
);

Why?

By making the variable names for each theme unique, users would be able to import them and do something like this:

@import "../node_modules/sakura.css/scss/themes/default";
@import "../node_modules/sakura.css/scss/themes/dark";
.alert {
  background-color: $color-blossom;
  color: $color-bg;

  &.dark {
    background-color: $color-blossom-dark;
    color: $color-bg-dark;
  }
}

I haven't used SCSS too much, though, so perhaps there's another way to import variables without them overriding each other? 🤔

CSS version with var

Is there a fork of CSS w/ var and no SCSS?

<video> tag parent overflow

The <video> tag overflows it's parent and does not respond to different screen sizes. <video> should be displayed in the same manner as <img/>

Update our dependency of bookmarklet

https://github.com/mrcoles/bookmarklet

They are currently on v1.0.2 we are using v0.0.6

Sakura breaks Google CSE

Saw this project on reddit and figured it would be something I could easily add to the website I inherited. Unfortunately the page was too broken to just "work" with Sakura and I decided to just re-write everything using sakura. Everything was going fine till I tried to add my Google CSE to the page. The CSS rules are interfering with how CSE renders on the page.

Sakura Enabled:

Sakura Disabled:

Edit

My original screenshots just show the button being off, however the textarea is as well.

Enabled:

Disabled:

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?

<pre><code> font smaller than <pre> 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:

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 😅

Make it available in CDN. (cdnjs?)

Making it accessible via CDN (preferably cdnjs) would be sweet. I'm currently reading up the cdnjs wiki.

Alternative: unpkg

Project url doesn't exists

The project url indicated in the readme isn't available anymore (return a 404)

Unexpected underline for image link when hovering

Example html code to reproduce the problem:

<p>
    <a href="https://github.com">
	<img src="https://img.shields.io/badge/GitHub-100000?style=for-the-badge&amp;logo=github&amp;logoColor=white" alt="">
    </a>
</p>

I think the problem is margin-bottom.

The problem could be resolved by removing the margin-bottom style, or reset the margin-bottom style if the <img> tag is used inside a <a> tag.

Focus state for checkboxes in Firefox

Firefox doesn't like some styles on checkboxes for some antiquated reasons, which results in no focus state.
You remove the default one, and the custom border isn't getting added.

[Feature Request] Alternate colors of rows in the table.

Alternate colors for rows of a tables is used for a long time and it really increase readability. Please include this feature.

owlofathena.com is no longer working

In https://oxal.org/projects/sakura/ at section "Sites using Sakura", http://owlofathena.com is listed. However, when you visit the website, it's just a Namecheap ad now.

Replace Sass @import usage with @forward

The use of @import is discouraged. Utilize the @use rule instead.

See: https://sass-lang.com/documentation/at-rules/import

"The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead."

I have addressed this in the following PR: #105

Dead links in readme (Sites using sakura)

These links doesnt load for me:

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

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?

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.

Radio button broken on Chrome

v 60.0.3112.101

Radio buttons show up as ovals and "selected" indicator (the dot) shows up outside of the shape.

EDIT:
when i remove the padding, as per the comment below, it reverts to a circle and works again.


textarea, select, input[type] {
 
  /* The 6px vertically centers text on FF, ignored by Webkit */
   
  /* this padding makes radio buttons oblong and the dot inside falls outside of its shape*/
  /*padding: 6px 10px;*/
  color: #4a4a4a;
  margin-bottom: 10px;
  background-color: #f1f1f1;
  border: 1px solid #f1f1f1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
  textarea:focus, select:focus, input[type]:focus {
    border: 1px solid #2c8898;
    outline: 0; }

Font-family in theming

I think it could be very useful for separating concerns if the serif and sans-serif font families were included in the Sakura theme.scss as a variable or mixin. I don't think it would be breaking the spirit of keeping Sakura 'as simple as possible'. As of right now the font-families are only declared once each in the base SASS file, but I think they are more related to the specific theme 💭.

The two clear options I see are (as above) variables:

$font-sans-serif: Verdana, Geneva, sans-serif;
$font-serif: serif;
...
font-family: $font-sans-serif();

and mixins:

@mixin font-sans-serif() {
    font-family: Verdana, Geneva, sans-serif;
}

@mixin font-serif() {
    font-family: serif;
}
...
@include font-sans-serif();

Saklura can then just use these as defined in the theme as it already does for colours and font-size-base.

The reason for the mixin suggestion is that the different font faces would have an impact on the size of the glyphs (e.g. Libre Baskerville vs. times), so fonts might need to be scaled slightly because of this (but I would say this strays slightly away form keeping Sakura simple).

This is going to be pretty easy to implement, but some discussion is needed as to whether it should even be done and if so, the method to use.

Any thoughts?

Missing CSS for input with no type

The CSS seems to use the following selector

textarea, select, input[type]

to style inputs, because of the [type], you get an unstyled input if you use the following HTML

<input />

The linked normalize.css is not maintained it seems

In the readme it says its best to use a normalize.css in addition to sakura itself. Is this still relevant? The normalize.css linked leads to https://github.com/necolas/normalize.css/ but that seems unmaintained nowadays. Instead https://github.com/csstools/normalize.css has taken over from what I can tell.

Im not a very well experienced web dev, but imho it would be nice to have it merged into sakura.css itself so I only need to link one css file. I see there's an old issue about the opposite #9 but maybe things have changed since then?

Anyway, thanks for Sakura!

Is there a fork of CSS w/ var and no SCSS?

Demo of all built-in themes on README

Hi,
I think you should add all of the themes on your demo site, or add a GH pages site for sakura with a demo of all the built-in themes.

Thanks

Dark mode option.

Buggy intgeraction of <code> and `text-align: justify` + my fix

The following is (seemingly?) not a bug of Sakura.css in it's default config, but when in context of a paragraph that has text-align: justify; active and a <code> tag present. Fixable via code { white-space: unset; }

I still wanted to mention it, in case anyone comes across this.

Both interact weirdly and cause a pet-peeve of mine, articles that should be horizontally scroll-locked, scrolling to the side as you try to read the article. There is this happening on this post in my Tech Blog https://blog.frost.kiwi, which uses Sakura.css.

Screen-20231227-050101.mp4

You can see the article scrolling side to side, even though it should be locked in one column. Culprit is this <code> block growing beyond the <main> tag's width, which has text-align: justify applied.

In my blog I fixed this via this commit and inserting a code { white-space: unset; } in this line.

With the fix applied, it now is a proper single column, without horizontal scrolling:

Screen-20231227-050132.mp4

oxalorg / sakura Goto Github PK

sakura's Introduction

sakura: a minimal, classless CSS framework / theme.

Demo

Bookmark

Why? - Reasons to use sakura

Installation

Sites using sakura

Theming

Dark mode

Contributing

Contributors

Share some <3

sakura's People

Contributors

Stargazers

Watchers

Forkers

sakura's Issues

Why?

Edit

Further Edit

Recommend Projects

Recommend Topics

Recommend Org

Jobs