sakura: 一个极小的css框架/主题（sakurafrp启动器）

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

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 90's 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 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/htmlBuilding 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 frameworkWorks amazingly with markdown generated HTML pages (eliminates the need of hacks like including .img img-responsive in markdown-parser generated tagsWonderful for people not really good or interested with design as sakura is nothing but a set of reasonable defaults

Installation

Manually (recommended):

Download the file:wget "https://raw.githubusercontent.com/oxalorg/sakura/master/css/sakura.css" OR download directly: sakura.css Link it from html:

CDN:

Simply add this in your tag.

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

https://softwareyoga.com/https://taazakitchen.com/http://computableverse.comhttp://owlofathena.comhttps://audioviz.surge.sh/vex.htmlhttps://chocopy.orghttps://wasmbyexample.dev/https://ninjas.cl/https://minidown.atusy.net

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

Bookmarklet was added by ZhouziThe image is credited to Deedster

Share some <3

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

Please leave a star :)

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。