-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
103 lines (101 loc) · 5.44 KB
/
index.html
File metadata and controls
103 lines (101 loc) · 5.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<html lang="en">
<head>
<link rel="stylesheet" href="leafy.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>leafy </title>
</head>
<body>
<header>
<h1 id="leafy">leafy</h1>
<p>A classless CSS framework/theme for everyday needs</p>
<nav>
<ul>
<li><a href="https://github.com/spacefall/leafy">Repo</a></li>
<li><a href="demo.html">Demo</a>
</li>
</ul>
</nav>
</header>
<h2>What's this?</h2>
<p>Hi! This is leafy, an overcomplicated classless CSS framework/theme for (almost) everything, from blogs to simple web apps.<br>You can find a demo of most HTML5 elements <a href="demo.html">here</a>.</p>
<h3>But why?</h3>
<p>Simple: I'm tired of messing about with CSS and some pre-existing (classless) themes like <a href="https://github.com/oxalorg/sakura">Sakura</a> feel restrictive as (imo) they're optimized for blogs. Other (still classless) frameworks like <a href="https://simplecss.org">Simple.css</a> are better, but I still feel something could be done slightly better/different.</p>
<p>So that's why I spent the last few days messing about with CSS and ended up making a similar theme to Simple.css.</p>
<h2>Usage</h2>
<p>Like other classless themes, leafy takes 0.1s to install, simply add the following line to you html document's head:</p>
<pre><code class="language-html"><link rel="stylesheet" href="https://spacefall.github.io/leafy/leafy.min.css">
</code></pre>
<blockquote>
<p>You should always use the .min.css version unless you're modifying the theme</p>
</blockquote>
<p>And you're done! You should also add the responsive meta tag if you want to make your website responsive but other than that there's nothing else you have to do.</p>
<p>leaf should work fine with any html document (markdown->html too, in fact this is the readme.md from the repo), some features require some modification though:</p>
<ul>
<li>For a snazzy header like the one in this page use a <code><header></code> tag at the start of the body, and inside use a <code><h1></code> tag:<pre><code class="language-html"><body>
<header>
<h1>Snazzy title</h1>
<p>Subtitle I guess</p>
</header>
</body>
</code></pre>
</li>
<li>Same thing for the footer:<pre><code class="language-html"><body>
<header>
<h1>Snazzy title</h1>
</header>
<footer>
<p>cool footer</p>
</footer>
</body>
</code></pre>
</li>
<li>Navigation can also be added to the header in the following way:<pre><code class="language-html"><header>
<nav>
<ul>
<li><a href="#url1">Item 1</a></li>
<li><a href="#url2">Item 2</a></li>
</ul>
</nav>
</header>
</code></pre>
<strong>Note:</strong> You should use a <code><a></code> tag (even not hyperlinked) to show a button, other elements don't have any effect currently</li>
<li>You can also add a dropdown by nesting a list inside an item:<pre><code class="language-html"><nav>
<ul>
<li><a href="#url1">Item 1</a></li>
<li>
<a>Drop-down</a>
<ul>
<li><a href="#url2">Item 2</a></li>
<li><a href="#url3">Item 3</a></li>
</ul>
</li>
</ul>
</nav>
</code></pre>
</li>
</ul>
<h2>Theming</h2>
<p>All of leaf's colors, border properties (thickness, radius) and animation time can be customized since they're just CSS variables:</p>
<pre><code class="language-css">/* colors from everforest https://github.com/sainnhe/everforest */
:root {
--bg: #F3EAD3; /* main background */
--bg-light: #EAE4CA; /* lighter bg, used in header and some elements (mainly text) */
--bg-dark: #E5DFC5; /* darker bg, used in footer and other (mostly input) elements */
--sep: #E5DFC5; /* an even lighter shade of the background used for borders */
--text: #5C6A72; /* main text color */
--text2: #939F91; /* secondary text color, used, for example, in disabled elements */
--accent1: #8DA101; /* primary accent color, the brightest one */
--accent2: #93B259; /* secondary accent, used mostly on hover of elements */
--accent3: #A7C080; /* tertiary accent, the darkest one, used mostly when elements are clicked */
--on-accent: #E5E6C5; /* text color to use on --accent1 color */
--rad: .4rem; /* rounded corner radius */
--thick: .135rem; /* thicker border thickness */
--thin: .1rem; /* thinner border thickness */
--anim: .3s; /* time for transitions */
}
</code></pre>
<p>By default, leaf also supports dark mode, if you want to edit those colors just change them inside a <code>@media (prefers-color-scheme: dark)</code> block.</p>
<h2>Thanks</h2>
<p><a href="https://github.com/sainnhe/everforest">everforest</a> for a great color scheme which leaf uses.<br><a href="https://github.com/oxalorg/sakura">Sakura</a> and <a href="https://simplecss.org">Simple.css</a> for being great CSS themes and indirectly being great resources for building a theme.<br><a href="https://github.com/sindresorhus/modern-normalize">modern-normalize.css</a> for giving decent defaults that work (basically) everywhere.</p>
</body>
</html>