-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
211 lines (207 loc) · 8.36 KB
/
index.html
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
---
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LOTUS.css - A Minimal CSS Framework</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./styles.css">
<link rel="icon" type="image/png" href="./favicon.png">
</head>
<body id="top">
<div class="container">
<header class="full-width">
<h1 class="fixed button primary icon-only toggle-theme" style="top: 2rem; right: 2rem;">
<span class="material-symbols-outlined">dark_mode</span>
<span class="material-symbols-outlined">light_mode</span>
</h1>
<div class="hero full-screen-width">
<div class="logo center vertical-align">
<h1><strong>LOTUS</strong>.css</h1>
<h3>A <strong>Minimal</strong> CSS Framework</h3>
<small><em>I named this "<span class="primary-text">LOTUS.css</span>" cuz I love this flower!</em></small>
</div>
</div>
</header>
<section id="features">
<h2>Features</h2>
<ul>
<li>⚡️ Super light-weight. Only ~19KB (minified).</li>
<li>⛔️ No preprocessor, just apply-and-use.</li>
<li>📐 12 super columns with grid</li>
<li>🎨 Easy to <a href="#customizing">customize</a> with CSS variables</li>
<li>🧱 Enjoy super components and utilities</li>
<li>💌 Visual based on MD3, beautiful to look at!</li>
<li>🌙 Easy dark mode switch</li>
</ul>
</section>
<section id="start">
<h2>Getting Started</h2>
<p>All you need is 1 CSS file, <code>lotus.css</code> to be included in your webpage.</p>
<br>
<p>Link this CSS in your HTML:</p>
{% highlight html %}<link rel="stylesheet" href="https://unpkg.com/lotus-css@latest">{% endhighlight %}
<br>
<p>You can get the latest release from GitHub</p>
<p class="row">
<a class="col button outline primary" href="https://github.com/gabriel-aplok/lotus-css/archive/master.zip">Download Source</a>
<a class="col button primary" href="https://github.com/gabriel-aplok/lotus-css/archive/master.zip">Download Compiled</a>
</p>
<br>
<p>Install it from <code>npm</code> or <code>yarn</code></p>
{% highlight bash %}npm install lotus-css{% endhighlight %}
<em class="error-text">The package is not available on npm, coming soon!</em>
</section>
<section id="docs">
<header class="row">
<div class="col vertical-align">
<h2 class="is-marginless">Docs</h2>
</div>
<div class="col text-right">
<nav class="tabs">
<a href="#customizing">Customizing</a>
<a href="#components">Components</a>
</nav>
</div>
</header> <br>
<p>LOTUS is <em>very</em> simple to use. It doesn't require learning a lot of class names like other frameworks. It applies a few basic styles to the HTML following the <a href="https://www.w3schools.com/html/html5_semantic_elements.asp" target="_blank">HTML Semantics</a>.</p>
<p>Here is a <a href="./demo.html">demo</a> of the basic HTML elements.</p>
<h3 id="customizing">Customizing</h3>
<p>LOTUS comes with a basic set of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target="_blank">CSS variables</a>:</p>
{% highlight css %}:root {
--typography-font: "Lato", sans-serif;
--typography-code: "Inconsolata", monospace;
--typography-size: 1.6em;
--typography-line-height: 1.4;
--grid-max-width: 120rem;
--grid-gutter-size: 2rem;
--color-primary: #6750A4;
--color-on-primary: #FFFFFF;
--color-primary-container: #EADDFF;
--color-on-primary-container: #21005D;
--color-secondary: #625B71;
--color-on-secondary: #FFFFFF;
--color-secondary-container: #E8DEF8;
--color-on-secondary-container: #1D192B;
--color-tertiary: #7D5260;
--color-on-tertiary: #FFFFFF;
--color-tertiary-container: #FFD8E4;
--color-on-tertiary-container: #31111D;
--color-error: #B3261E;
--color-on-error: #FFFFFF;
--color-error-container: #F9DEDC;
--color-on-error-container: #410E0B;
--color-outline: #79747E;
--color-background: #FFFBFE;
--color-on-background: #1C1B1F;
--color-surface: #FFFBFE;
--color-on-surface: #1C1B1F;
--color-surface-variant: #E7E0EC;
--color-on-surface-variant: #49454F;
--color-inverse-surface: #313033;
--color-inverse-on-surface: #F4EFF4;
--color-inverse-primary: #D0BCFF;
--color-shadow: #000000;
--color-surface-tint: #6750A4;
--color-outline-variant: #CAC4D0;
--color-scrim: #000000;
}{% endhighlight %}
<br>
<p>To override the variables, just add them to your <code>:root</code> selector after importing <code>lotus.css</code></p>
{% highlight css %}
@import url(lotus.css)
:root {
--color-primary: #6750A4;
--color-on-primary: #FFFFFF;
--grid-maxWidth: 108rem;
}
/* Your other styles... */{% endhighlight %}
<br>
<p>Addtionally, you can add dark mode to your site, to support devices that prefer dark mode.</p>
{% highlight html %}<style>
.dark {
--color-primary: #D0BCFF;
--color-on-primary: #381E72;
--color-primary-container: #4F378B;
--color-on-primary-container: #EADDFF;
--color-secondary: #CCC2DC;
--color-on-secondary: #332D41;
--color-secondary-container: #4A4458;
--color-on-secondary-container: #E8DEF8;
--color-tertiary: #EFB8C8;
--color-on-tertiary: #492532;
--color-tertiary-container: #633B48;
--color-on-tertiary-container: #FFD8E4;
--color-error: #F2B8B5;
--color-on-error: #601410;
--color-error-container: #8C1D18;
--color-on-error-container: #F9DEDC;
--color-outline: #938F99;
--color-background: #1C1B1F;
--color-on-background: #E6E1E5;
--color-surface: #1C1B1F;
--color-on-surface: #E6E1E5;
--color-surface-variant: #49454F;
--color-on-surface-variant: #CAC4D0;
--color-inverse-surface: #E6E1E5;
--color-inverse-on-surface: #313033;
--color-inverse-primary: #6750A4;
--color-shadow: #000000;
--color-surface-tint: #D0BCFF;
--color-outline-variant: #49454F;
--color-scrim: #000000;
}
</style>
<script>
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
</script>{% endhighlight %}
</section>
<section id="components">
<div>
<h2 class="marginless">Components</h2>
<ul>
<li><a href="#nav">Nav</a></li>
<li><a href="#tabs">Tabs</a></li>
<li><a href="#cards">Cards</a></li>
<li><a href="#tags">Tags</a></li>
<li><a href="#utils">Utilities</a></li>
<li><a href="#icons">Icons</a></li>
<li><a href="#grids">Grids</a></li>
</ul>
</div>
<div class="is-center">
<p>
[WIP] Coming soon I'll add the components here, but you can see the components and elements demo <a href="./demo.html">here</a>.
</p>
</div>
<section id="icons">
<h4>Icons</h4>
<p>While you're free to use any icon library you like, I'd just like to leave a link to <a href="https://fonts.google.com/icons" target="_blank">Google Icons</a> here. It's the <em>fastest</em> way to add icons to your website.</p>
</section>
<section id="fonts">
<h4>Fonts</h4>
<p>While you're free to use any font you like, I'd just like to leave a link to <a href="https://fonts.google.com" target="_blank">Google Fonts</a> here. It's the <em>fastest</em> way to add fonts to your website.</p>
</section>
<br><br>
<p class="center">
<a class="button primary outline" target="_blank" href="https://x.com/intent/tweet?url=https://gabriel-aplok.github.io/lotus-css/&text=lotus-css%20-%20A%20minimalist%20CSS%20framework&via=GabrielAplok&hashtags=web,css">Give a shout-out on Twitter / X 📢</a>
</p>
</section>
</div>
<footer class="text-center">
<p>
<a href="#top">Back to Top</a> | <a href="https://github.com/gabriel-aplok/lotus-css">Report an issue</a> | <a href="https://gabriel-aplok.github.io/sponsor.html" target="_blank">Donate</a>
</p>
<h5>Made by <a href="https://gabriel-aplok.github.io" target="_blank">Gabriel Aplok</a></h5>
</footer>
<script src="./assets/js/main.js"></script>
</body>
</html>