Features
- Free as in Freedom!
- Class-less: You do not need to use classes; Only pure html!
- Bidi support: Work for both RTL and LTR pages!
- Lightweight: It is less than 10KiB!
- Responsice: Looks good in small screens!
- Dark & Light mode: Automaticly dark mode with optional force-light and force-dark modes!
- Palettes: You can optionaly use classes to use your favourite color palette!
- Colors: You can optionaly use classes to coloring parts!
- Fonts: You can optionaly use classes to change font!
How to use
- Put sedna.css in
cssfolder, near your html file. - An example sedna page:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Base informations -->
<meta charset="utf-8">
<title>Title</title>
<meta name="description" content="description">
<!-- Mobile specific metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css">
<!-- CSS -->
<link rel="stylesheet" href="css/sedna.css">
<!-- Favicon -->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<header>
<nav>
<a href="#">nav 1</a>
<a href="#">nav 2</a>
</nav>
<h1>Title</h1>
<p>description</p>
</header>
<main>
/* your content is here */
</main>
</body>
</html>
- Set your favourite palette:
<html class="palette">
...
</html>
- Palettes: reasonable (default), adwaita, nord, dracula, solarized, catppuccin, gruvbox, tango
- Set your favourite font:
<html class="font">
...
</html>
you should load the font you want!
- force-dark or force-light mode:
<html class="force-dark">
...
</html>
- Use colors everywhere you like:
<p class="color">text</p>
- Colors: red, green, yellow, blue, purple
License
