lime-css-framework 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +32 -0
- package/dist/lime-variables.css +58 -0
- package/dist/lime.css +1680 -0
- package/dist/lime.min.css +8 -0
- package/documentation/docs.css +973 -0
- package/documentation/index.html +2377 -0
- package/package.json +33 -0
|
@@ -0,0 +1,2377 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
|
|
3
|
+
<html lang="en">
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Lime CSS Framework Documentation</title>
|
|
8
|
+
<link rel="stylesheet" href="../dist/lime.css" />
|
|
9
|
+
<link rel="stylesheet" href="docs.css" />
|
|
10
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
|
|
11
|
+
|
|
12
|
+
<!-- Favicon -->
|
|
13
|
+
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍃</text></svg>" />
|
|
14
|
+
<link rel="icon" type="image/png" sizes="32x32" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAABPUlEQVRYw+2Wy0oDQRRFb7uCz4Uo+B3CRnDhu1DxAa4UdSt+htBFdxEUFD+ECN0JSV8fZ97p1KS3E3Ip3AOFpFB1b52ZzAQaTf2JA/wkU8PpS3LMTbKq1ADJZ8BvGg2TXC1UQfIWsF6J7RWV4FUgUw7JnYggeJYPpH03yRsu9cAfKfI04Cp3L10Q8ELyBkmdQPB+13L8V9t3w7JBYC9XBQFVcy6fLLVHMqWq9S1nB9U7eOVI7is/YFkru+S6qjwg+eFkXrZc5QGSb3C2rSTnXewDkaBc3AfWXW8EymHZ2thM2aBpO24BdwU3MpZF/XwX2EdzNpHslB4guQ8gNp5Ivi+9GAPIAeC2vydUc+9t1XrW9ST5LKDq5YI3obfBV7toj/wCdiKqOCF5zKKf+D+NYZ2MvXlAAAAASUVORK5CYII=" />
|
|
15
|
+
<link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAU0lEQVQ4y2P4//8/AyUYieh6BgYGBgaGDeQYwIjGXkC2ITC1CzAMIBqj1JCrDuYCRgq8j8UGhr2UGoAYDWS7gBEXH4ZxGUAtDACDSDaAagYwMAAAPBwS7128lqgAAAAASUVORK5CYII=" />
|
|
16
|
+
<link rel="apple-touch-icon" sizes="180x180" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAYAAAA9zQYyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAXElEQVR4nO3QMQEAAAgDoJviD7QNBrIOBwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgNHtAZAwASQMxlsAAAAASUVORK5CYII=" />
|
|
17
|
+
<meta name="theme-color" content="#32cd32" />
|
|
18
|
+
</head>
|
|
19
|
+
|
|
20
|
+
<body>
|
|
21
|
+
<!-- Header -->
|
|
22
|
+
<header class="header">
|
|
23
|
+
<div class="container">
|
|
24
|
+
<div class="d-flex align-items-center justify-content-between">
|
|
25
|
+
<div class="d-flex align-items-center">
|
|
26
|
+
<a href="#" class="logo">
|
|
27
|
+
<div class="logo-icon">
|
|
28
|
+
<i class="fas fa-leaf"></i>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="logo-text">
|
|
31
|
+
<span class="logo-title">Lime CSS</span>
|
|
32
|
+
<span class="logo-subtitle">Lightweight Framework</span>
|
|
33
|
+
</div>
|
|
34
|
+
</a>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
<div class="header-right d-flex align-items-center">
|
|
38
|
+
<div class="version-badge mr-4">
|
|
39
|
+
<span class="badge badge-success">v1.0.0</span>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<div class="header-actions">
|
|
43
|
+
<a href="#download" class="btn btn-sm btn-outline-primary mr-2 d-none d-md-inline-block">
|
|
44
|
+
<i class="fas fa-download mr-1"></i>
|
|
45
|
+
Download
|
|
46
|
+
</a>
|
|
47
|
+
<a href="https://github.com" target="_blank" class="btn btn-sm btn-dark d-none d-md-inline-block">
|
|
48
|
+
<i class="fab fa-github mr-1"></i>
|
|
49
|
+
GitHub
|
|
50
|
+
</a>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<!-- Menu toggle moved here to left side -->
|
|
55
|
+
<button class="menu-toggle mr-3" id="menuToggle">
|
|
56
|
+
<i class="fas fa-bars"></i>
|
|
57
|
+
</button>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
</header>
|
|
61
|
+
|
|
62
|
+
<!-- Sidebar Overlay -->
|
|
63
|
+
<div class="sidebar-overlay" id="sidebarOverlay"></div>
|
|
64
|
+
|
|
65
|
+
<!-- Sidebar Navigation -->
|
|
66
|
+
<nav class="sidebar" id="sidebar">
|
|
67
|
+
<ul class="sidebar-nav">
|
|
68
|
+
<li class="nav-section">Getting Started</li>
|
|
69
|
+
<li><a href="#introduction" class="active">Introduction</a></li>
|
|
70
|
+
<li><a href="#installation">Installation</a></li>
|
|
71
|
+
<li><a href="#quick-start">Quick Start</a></li>
|
|
72
|
+
|
|
73
|
+
<li class="nav-section">Layout</li>
|
|
74
|
+
<li><a href="#container">Container</a></li>
|
|
75
|
+
<li><a href="#grid">Grid System</a></li>
|
|
76
|
+
|
|
77
|
+
<li class="nav-section">Components</li>
|
|
78
|
+
<li><a href="#buttons">Buttons</a></li>
|
|
79
|
+
<li><a href="#forms">Forms</a></li>
|
|
80
|
+
<li><a href="#tables">Tables</a></li>
|
|
81
|
+
<li><a href="#alerts">Alerts</a></li>
|
|
82
|
+
<li><a href="#navbar">Navbar</a></li>
|
|
83
|
+
|
|
84
|
+
<li class="nav-section">Utilities</li>
|
|
85
|
+
<li><a href="#colors">Colors</a></li>
|
|
86
|
+
<li><a href="#spacing">Spacing</a></li>
|
|
87
|
+
<li><a href="#display">Display</a></li>
|
|
88
|
+
<li><a href="#text">Text</a></li>
|
|
89
|
+
<li><a href="#borders">Borders</a></li>
|
|
90
|
+
<li><a href="#rounded">Rounded</a></li>
|
|
91
|
+
<li><a href="#shadows">Shadows</a></li>
|
|
92
|
+
|
|
93
|
+
<li class="nav-section">Extras</li>
|
|
94
|
+
<li><a href="#responsive">Responsive</a></li>
|
|
95
|
+
<li><a href="#customization">Customization</a></li>
|
|
96
|
+
<li><a href="#changelog">Changelog</a></li>
|
|
97
|
+
</ul>
|
|
98
|
+
</nav>
|
|
99
|
+
|
|
100
|
+
<!-- Main Content -->
|
|
101
|
+
<main class="main-content">
|
|
102
|
+
<!-- Introduction -->
|
|
103
|
+
<section id="introduction" class="section">
|
|
104
|
+
<h2>Introduction</h2>
|
|
105
|
+
<p>Lime CSS is a lightweight, responsive CSS framework built with modern web development in mind. With its fresh lime-themed design and comprehensive set of components, it provides everything you need to build beautiful, responsive web interfaces quickly.</p>
|
|
106
|
+
|
|
107
|
+
<div class="callout">
|
|
108
|
+
<p>
|
|
109
|
+
<strong>Why Lime CSS?</strong>
|
|
110
|
+
Unlike other frameworks, Lime CSS focuses on simplicity and performance while providing all essential components for modern web development.
|
|
111
|
+
</p>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<h3>Features</h3>
|
|
115
|
+
<div class="row mt-4">
|
|
116
|
+
<div class="col-md-4 mb-4">
|
|
117
|
+
<div class="component-demo">
|
|
118
|
+
<h4 class="demo-title">
|
|
119
|
+
<i class="fas fa-mobile-alt text-primary mr-2"></i>
|
|
120
|
+
Responsive
|
|
121
|
+
</h4>
|
|
122
|
+
<p>Built with a mobile-first approach, works seamlessly on all devices.</p>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
<div class="col-md-4 mb-4">
|
|
126
|
+
<div class="component-demo">
|
|
127
|
+
<h4 class="demo-title">
|
|
128
|
+
<i class="fas fa-bolt text-primary mr-2"></i>
|
|
129
|
+
Lightweight
|
|
130
|
+
</h4>
|
|
131
|
+
<p>Only 25KB minified, with zero JavaScript dependencies.</p>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
<div class="col-md-4 mb-4">
|
|
135
|
+
<div class="component-demo">
|
|
136
|
+
<h4 class="demo-title">
|
|
137
|
+
<i class="fas fa-palette text-primary mr-2"></i>
|
|
138
|
+
Customizable
|
|
139
|
+
</h4>
|
|
140
|
+
<p>Easy to customize with CSS variables and SASS/SCSS support.</p>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
</section>
|
|
145
|
+
|
|
146
|
+
<!-- Installation -->
|
|
147
|
+
<section id="installation" class="section">
|
|
148
|
+
<h2>Installation</h2>
|
|
149
|
+
<p>There are several ways to include Lime CSS in your project:</p>
|
|
150
|
+
|
|
151
|
+
<h3>Method 1: CDN (Recommended for testing)</h3>
|
|
152
|
+
<div class="code-block">
|
|
153
|
+
<pre><code class="language-html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lime-css/dist/lime.min.css"></code></pre>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
<h3>Method 2: Download</h3>
|
|
157
|
+
<p>Download the compiled CSS files:</p>
|
|
158
|
+
<div class="row">
|
|
159
|
+
<div class="col-md-4 mb-3">
|
|
160
|
+
<div class="component-demo text-center">
|
|
161
|
+
<h5 class="demo-title">lime.css</h5>
|
|
162
|
+
<p>Development version (unminified)</p>
|
|
163
|
+
<button class="btn btn-primary btn-sm mt-2">Download</button>
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
166
|
+
<div class="col-md-4 mb-3">
|
|
167
|
+
<div class="component-demo text-center">
|
|
168
|
+
<h5 class="demo-title">lime.min.css</h5>
|
|
169
|
+
<p>Production version (minified)</p>
|
|
170
|
+
<button class="btn btn-primary btn-sm mt-2">Download</button>
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
<div class="col-md-4 mb-3">
|
|
174
|
+
<div class="component-demo text-center">
|
|
175
|
+
<h5 class="demo-title">lime-variables.css</h5>
|
|
176
|
+
<p>CSS variables version</p>
|
|
177
|
+
<button class="btn btn-primary btn-sm mt-2">Download</button>
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
<h3>Method 3: NPM</h3>
|
|
183
|
+
<div class="code-block">
|
|
184
|
+
<pre><code class="language-bash">npm install lime-css</code></pre>
|
|
185
|
+
</div>
|
|
186
|
+
</section>
|
|
187
|
+
|
|
188
|
+
<!-- Quick Start -->
|
|
189
|
+
<section id="quick-start" class="section">
|
|
190
|
+
<h2>Quick Start</h2>
|
|
191
|
+
<p>Copy this starter template to get started quickly:</p>
|
|
192
|
+
|
|
193
|
+
<div class="code-block">
|
|
194
|
+
<pre><code class="language-html"><!DOCTYPE html>
|
|
195
|
+
<html lang="en">
|
|
196
|
+
<head>
|
|
197
|
+
<meta charset="UTF-8">
|
|
198
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
199
|
+
<title>My Lime CSS Project</title>
|
|
200
|
+
<link rel="stylesheet" href="dist/lime.css">
|
|
201
|
+
</head>
|
|
202
|
+
<body>
|
|
203
|
+
<div class="container">
|
|
204
|
+
<h1 class="text-primary">Hello, World!</h1>
|
|
205
|
+
<p>This is a starter template using Lime CSS.</p>
|
|
206
|
+
<button class="btn btn-primary">Primary Button</button>
|
|
207
|
+
</div>
|
|
208
|
+
</body>
|
|
209
|
+
</html></code></pre>
|
|
210
|
+
</div>
|
|
211
|
+
</section>
|
|
212
|
+
|
|
213
|
+
<!-- Container -->
|
|
214
|
+
<section id="container" class="section">
|
|
215
|
+
<h2>Container</h2>
|
|
216
|
+
<p>Containers are the most basic layout element in Lime CSS and are required when using the default grid system. Choose from a responsive, fixed-width container (using pixel breakpoints) or a fluid-width container (full width of its parent).</p>
|
|
217
|
+
|
|
218
|
+
<div class="component-demo">
|
|
219
|
+
<div class="demo-title">Fixed Container</div>
|
|
220
|
+
<div class="container border p-4 bg-light">
|
|
221
|
+
<p>This is a fixed-width container. It will resize at breakpoints:</p>
|
|
222
|
+
<ul>
|
|
223
|
+
<li>≥576px: max-width 540px</li>
|
|
224
|
+
<li>≥768px: max-width 720px</li>
|
|
225
|
+
<li>≥992px: max-width 960px</li>
|
|
226
|
+
<li>≥1200px: max-width 1140px</li>
|
|
227
|
+
</ul>
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
230
|
+
|
|
231
|
+
<div class="code-block">
|
|
232
|
+
<pre><code class="language-html"><div class="container">
|
|
233
|
+
<!-- Your content here -->
|
|
234
|
+
</div>
|
|
235
|
+
|
|
236
|
+
<!-- Fluid container -->
|
|
237
|
+
<div class="container-fluid">
|
|
238
|
+
<!-- Your content here -->
|
|
239
|
+
</div></code></pre>
|
|
240
|
+
</div>
|
|
241
|
+
</section>
|
|
242
|
+
|
|
243
|
+
<!-- Grid System -->
|
|
244
|
+
<section id="grid" class="section">
|
|
245
|
+
<h2>Grid System</h2>
|
|
246
|
+
<p>Lime CSS includes a responsive 12-column grid system built with flexbox. It's fully responsive and works on all screen sizes.</p>
|
|
247
|
+
|
|
248
|
+
<div class="component-demo grid-demo">
|
|
249
|
+
<div class="demo-title">Grid Example</div>
|
|
250
|
+
<div class="row">
|
|
251
|
+
<div class="col-12">col-12 (full width)</div>
|
|
252
|
+
</div>
|
|
253
|
+
<div class="row">
|
|
254
|
+
<div class="col-6">col-6 (half width)</div>
|
|
255
|
+
<div class="col-6">col-6 (half width)</div>
|
|
256
|
+
</div>
|
|
257
|
+
<div class="row">
|
|
258
|
+
<div class="col-4">col-4 (one third)</div>
|
|
259
|
+
<div class="col-4">col-4 (one third)</div>
|
|
260
|
+
<div class="col-4">col-4 (one third)</div>
|
|
261
|
+
</div>
|
|
262
|
+
<div class="row">
|
|
263
|
+
<div class="col-3">col-3</div>
|
|
264
|
+
<div class="col-3">col-3</div>
|
|
265
|
+
<div class="col-3">col-3</div>
|
|
266
|
+
<div class="col-3">col-3</div>
|
|
267
|
+
</div>
|
|
268
|
+
</div>
|
|
269
|
+
|
|
270
|
+
<div class="code-block">
|
|
271
|
+
<pre><code class="language-html"><div class="container">
|
|
272
|
+
<div class="row">
|
|
273
|
+
<div class="col-md-6 col-lg-4">
|
|
274
|
+
<!-- Content for medium (50%) and large (33%) screens -->
|
|
275
|
+
</div>
|
|
276
|
+
<div class="col-md-6 col-lg-8">
|
|
277
|
+
<!-- Content for medium (50%) and large (66%) screens -->
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
</div></code></pre>
|
|
281
|
+
</div>
|
|
282
|
+
|
|
283
|
+
<h3>Responsive Breakpoints</h3>
|
|
284
|
+
<div class="table-responsive">
|
|
285
|
+
<table class="table table-striped">
|
|
286
|
+
<thead>
|
|
287
|
+
<tr>
|
|
288
|
+
<th>Breakpoint</th>
|
|
289
|
+
<th>Class Prefix</th>
|
|
290
|
+
<th>Dimensions</th>
|
|
291
|
+
</tr>
|
|
292
|
+
</thead>
|
|
293
|
+
<tbody>
|
|
294
|
+
<tr>
|
|
295
|
+
<td>Extra small</td>
|
|
296
|
+
<td><code>.col-</code></td>
|
|
297
|
+
<td><576px</td>
|
|
298
|
+
</tr>
|
|
299
|
+
<tr>
|
|
300
|
+
<td>Small</td>
|
|
301
|
+
<td><code>.col-sm-</code></td>
|
|
302
|
+
<td>≥576px</td>
|
|
303
|
+
</tr>
|
|
304
|
+
<tr>
|
|
305
|
+
<td>Medium</td>
|
|
306
|
+
<td><code>.col-md-</code></td>
|
|
307
|
+
<td>≥768px</td>
|
|
308
|
+
</tr>
|
|
309
|
+
<tr>
|
|
310
|
+
<td>Large</td>
|
|
311
|
+
<td><code>.col-lg-</code></td>
|
|
312
|
+
<td>≥992px</td>
|
|
313
|
+
</tr>
|
|
314
|
+
<tr>
|
|
315
|
+
<td>Extra large</td>
|
|
316
|
+
<td><code>.col-xl-</code></td>
|
|
317
|
+
<td>≥1200px</td>
|
|
318
|
+
</tr>
|
|
319
|
+
</tbody>
|
|
320
|
+
</table>
|
|
321
|
+
</div>
|
|
322
|
+
</section>
|
|
323
|
+
|
|
324
|
+
<!-- Buttons -->
|
|
325
|
+
<section id="buttons" class="section">
|
|
326
|
+
<h2>Buttons</h2>
|
|
327
|
+
<p>Use Lime CSS's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and variants.</p>
|
|
328
|
+
|
|
329
|
+
<div class="component-demo button-demo">
|
|
330
|
+
<div class="demo-title">Button Variants</div>
|
|
331
|
+
<button class="btn btn-primary">Primary</button>
|
|
332
|
+
<button class="btn btn-secondary">Secondary</button>
|
|
333
|
+
<button class="btn btn-success">Success</button>
|
|
334
|
+
<button class="btn btn-danger">Danger</button>
|
|
335
|
+
<button class="btn btn-warning">Warning</button>
|
|
336
|
+
<button class="btn btn-info">Info</button>
|
|
337
|
+
<button class="btn btn-light">Light</button>
|
|
338
|
+
<button class="btn btn-dark">Dark</button>
|
|
339
|
+
<button class="btn btn-lime">
|
|
340
|
+
Lime
|
|
341
|
+
<span class="badge">Custom</span>
|
|
342
|
+
</button>
|
|
343
|
+
</div>
|
|
344
|
+
|
|
345
|
+
<div class="component-demo button-demo">
|
|
346
|
+
<div class="demo-title">Button Sizes</div>
|
|
347
|
+
<button class="btn btn-primary btn-lg">Large</button>
|
|
348
|
+
<button class="btn btn-primary">Default</button>
|
|
349
|
+
<button class="btn btn-primary btn-sm">Small</button>
|
|
350
|
+
</div>
|
|
351
|
+
|
|
352
|
+
<div class="component-demo">
|
|
353
|
+
<div class="demo-title">Block Buttons</div>
|
|
354
|
+
<button class="btn btn-primary btn-block mb-2">Block Button</button>
|
|
355
|
+
<button class="btn btn-secondary btn-block">Another Block Button</button>
|
|
356
|
+
</div>
|
|
357
|
+
|
|
358
|
+
<div class="code-block">
|
|
359
|
+
<pre><code class="language-html"><!-- Button variants -->
|
|
360
|
+
<button class="btn btn-primary">Primary</button>
|
|
361
|
+
<button class="btn btn-secondary">Secondary</button>
|
|
362
|
+
|
|
363
|
+
<!-- Button sizes -->
|
|
364
|
+
<button class="btn btn-primary btn-lg">Large</button>
|
|
365
|
+
<button class="btn btn-primary btn-sm">Small</button>
|
|
366
|
+
|
|
367
|
+
<!-- Block button -->
|
|
368
|
+
<button class="btn btn-primary btn-block">Block Button</button></code></pre>
|
|
369
|
+
</div>
|
|
370
|
+
</section>
|
|
371
|
+
|
|
372
|
+
<!-- Forms -->
|
|
373
|
+
<section id="forms" class="section">
|
|
374
|
+
<h2>Forms</h2>
|
|
375
|
+
<p>Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.</p>
|
|
376
|
+
|
|
377
|
+
<div class="component-demo">
|
|
378
|
+
<div class="demo-title">Basic Form</div>
|
|
379
|
+
<form>
|
|
380
|
+
<div class="form-group">
|
|
381
|
+
<label for="exampleEmail">Email address</label>
|
|
382
|
+
<input type="email" class="form-control" id="exampleEmail" placeholder="Enter email" />
|
|
383
|
+
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
|
|
384
|
+
</div>
|
|
385
|
+
|
|
386
|
+
<div class="form-group">
|
|
387
|
+
<label for="examplePassword">Password</label>
|
|
388
|
+
<input type="password" class="form-control" id="examplePassword" placeholder="Password" />
|
|
389
|
+
</div>
|
|
390
|
+
|
|
391
|
+
<div class="form-group">
|
|
392
|
+
<label for="exampleSelect">Select</label>
|
|
393
|
+
<select class="form-control" id="exampleSelect">
|
|
394
|
+
<option>Option 1</option>
|
|
395
|
+
<option>Option 2</option>
|
|
396
|
+
<option>Option 3</option>
|
|
397
|
+
</select>
|
|
398
|
+
</div>
|
|
399
|
+
|
|
400
|
+
<div class="form-group">
|
|
401
|
+
<label for="exampleTextarea">Textarea</label>
|
|
402
|
+
<textarea class="form-control" id="exampleTextarea" rows="3" placeholder="Enter your message"></textarea>
|
|
403
|
+
</div>
|
|
404
|
+
|
|
405
|
+
<div class="form-group">
|
|
406
|
+
<div class="form-check">
|
|
407
|
+
<input class="form-check-input" type="checkbox" id="exampleCheck" />
|
|
408
|
+
<label class="form-check-label" for="exampleCheck">Remember me</label>
|
|
409
|
+
</div>
|
|
410
|
+
</div>
|
|
411
|
+
|
|
412
|
+
<button type="submit" class="btn btn-primary">Submit</button>
|
|
413
|
+
</form>
|
|
414
|
+
</div>
|
|
415
|
+
|
|
416
|
+
<div class="code-block">
|
|
417
|
+
<pre><code class="language-html"><form>
|
|
418
|
+
<div class="form-group">
|
|
419
|
+
<label for="email">Email address</label>
|
|
420
|
+
<input type="email" class="form-control" id="email" placeholder="Enter email">
|
|
421
|
+
</div>
|
|
422
|
+
|
|
423
|
+
<div class="form-group">
|
|
424
|
+
<label for="password">Password</label>
|
|
425
|
+
<input type="password" class="form-control" id="password" placeholder="Password">
|
|
426
|
+
</div>
|
|
427
|
+
|
|
428
|
+
<button type="submit" class="btn btn-primary">Submit</button>
|
|
429
|
+
</form></code></pre>
|
|
430
|
+
</div>
|
|
431
|
+
</section>
|
|
432
|
+
|
|
433
|
+
<!-- Tables -->
|
|
434
|
+
<section id="tables" class="section">
|
|
435
|
+
<h2>Tables</h2>
|
|
436
|
+
<p>Documentation and examples for opt-in styling of tables with Lime CSS.</p>
|
|
437
|
+
|
|
438
|
+
<div class="component-demo table-demo">
|
|
439
|
+
<div class="demo-title">Basic Table</div>
|
|
440
|
+
<table class="table">
|
|
441
|
+
<thead>
|
|
442
|
+
<tr>
|
|
443
|
+
<th>#</th>
|
|
444
|
+
<th>First Name</th>
|
|
445
|
+
<th>Last Name</th>
|
|
446
|
+
<th>Username</th>
|
|
447
|
+
<th>Status</th>
|
|
448
|
+
</tr>
|
|
449
|
+
</thead>
|
|
450
|
+
<tbody>
|
|
451
|
+
<tr>
|
|
452
|
+
<td>1</td>
|
|
453
|
+
<td>John</td>
|
|
454
|
+
<td>Doe</td>
|
|
455
|
+
<td>@johndoe</td>
|
|
456
|
+
<td><span class="text-success">Active</span></td>
|
|
457
|
+
</tr>
|
|
458
|
+
<tr>
|
|
459
|
+
<td>2</td>
|
|
460
|
+
<td>Jane</td>
|
|
461
|
+
<td>Smith</td>
|
|
462
|
+
<td>@janesmith</td>
|
|
463
|
+
<td><span class="text-warning">Pending</span></td>
|
|
464
|
+
</tr>
|
|
465
|
+
<tr>
|
|
466
|
+
<td>3</td>
|
|
467
|
+
<td>Bob</td>
|
|
468
|
+
<td>Johnson</td>
|
|
469
|
+
<td>@bobjohnson</td>
|
|
470
|
+
<td><span class="text-danger">Inactive</span></td>
|
|
471
|
+
</tr>
|
|
472
|
+
<tr>
|
|
473
|
+
<td>4</td>
|
|
474
|
+
<td>Alice</td>
|
|
475
|
+
<td>Williams</td>
|
|
476
|
+
<td>@alicew</td>
|
|
477
|
+
<td><span class="text-success">Active</span></td>
|
|
478
|
+
</tr>
|
|
479
|
+
</tbody>
|
|
480
|
+
</table>
|
|
481
|
+
</div>
|
|
482
|
+
|
|
483
|
+
<div class="component-demo table-demo">
|
|
484
|
+
<div class="demo-title">Striped Table</div>
|
|
485
|
+
<table class="table table-striped">
|
|
486
|
+
<thead>
|
|
487
|
+
<tr>
|
|
488
|
+
<th>#</th>
|
|
489
|
+
<th>Product</th>
|
|
490
|
+
<th>Price</th>
|
|
491
|
+
<th>Stock</th>
|
|
492
|
+
<th>Category</th>
|
|
493
|
+
</tr>
|
|
494
|
+
</thead>
|
|
495
|
+
<tbody>
|
|
496
|
+
<tr>
|
|
497
|
+
<td>1</td>
|
|
498
|
+
<td>Laptop</td>
|
|
499
|
+
<td>$999.99</td>
|
|
500
|
+
<td>25</td>
|
|
501
|
+
<td>Electronics</td>
|
|
502
|
+
</tr>
|
|
503
|
+
<tr>
|
|
504
|
+
<td>2</td>
|
|
505
|
+
<td>Wireless Mouse</td>
|
|
506
|
+
<td>$29.99</td>
|
|
507
|
+
<td>150</td>
|
|
508
|
+
<td>Electronics</td>
|
|
509
|
+
</tr>
|
|
510
|
+
<tr>
|
|
511
|
+
<td>3</td>
|
|
512
|
+
<td>Mechanical Keyboard</td>
|
|
513
|
+
<td>$89.99</td>
|
|
514
|
+
<td>45</td>
|
|
515
|
+
<td>Electronics</td>
|
|
516
|
+
</tr>
|
|
517
|
+
<tr>
|
|
518
|
+
<td>4</td>
|
|
519
|
+
<td>Monitor</td>
|
|
520
|
+
<td>$249.99</td>
|
|
521
|
+
<td>30</td>
|
|
522
|
+
<td>Electronics</td>
|
|
523
|
+
</tr>
|
|
524
|
+
</tbody>
|
|
525
|
+
</table>
|
|
526
|
+
</div>
|
|
527
|
+
|
|
528
|
+
<div class="component-demo table-demo">
|
|
529
|
+
<div class="demo-title">Bordered Table</div>
|
|
530
|
+
<table class="table table-bordered">
|
|
531
|
+
<thead>
|
|
532
|
+
<tr>
|
|
533
|
+
<th>#</th>
|
|
534
|
+
<th>Project</th>
|
|
535
|
+
<th>Progress</th>
|
|
536
|
+
<th>Deadline</th>
|
|
537
|
+
</tr>
|
|
538
|
+
</thead>
|
|
539
|
+
<tbody>
|
|
540
|
+
<tr>
|
|
541
|
+
<td>1</td>
|
|
542
|
+
<td>Website Redesign</td>
|
|
543
|
+
<td>80%</td>
|
|
544
|
+
<td>2023-12-15</td>
|
|
545
|
+
</tr>
|
|
546
|
+
<tr>
|
|
547
|
+
<td>2</td>
|
|
548
|
+
<td>Mobile App</td>
|
|
549
|
+
<td>45%</td>
|
|
550
|
+
<td>2024-01-30</td>
|
|
551
|
+
</tr>
|
|
552
|
+
<tr>
|
|
553
|
+
<td>3</td>
|
|
554
|
+
<td>API Integration</td>
|
|
555
|
+
<td>100%</td>
|
|
556
|
+
<td>2023-11-20</td>
|
|
557
|
+
</tr>
|
|
558
|
+
</tbody>
|
|
559
|
+
</table>
|
|
560
|
+
</div>
|
|
561
|
+
|
|
562
|
+
<div class="component-demo table-demo">
|
|
563
|
+
<div class="demo-title">Hover Table</div>
|
|
564
|
+
<table class="table table-hover">
|
|
565
|
+
<thead>
|
|
566
|
+
<tr>
|
|
567
|
+
<th>#</th>
|
|
568
|
+
<th>Customer</th>
|
|
569
|
+
<th>Order</th>
|
|
570
|
+
<th>Amount</th>
|
|
571
|
+
<th>Date</th>
|
|
572
|
+
</tr>
|
|
573
|
+
</thead>
|
|
574
|
+
<tbody>
|
|
575
|
+
<tr>
|
|
576
|
+
<td>1</td>
|
|
577
|
+
<td>John Smith</td>
|
|
578
|
+
<td>#ORD-001</td>
|
|
579
|
+
<td>$199.99</td>
|
|
580
|
+
<td>2023-11-01</td>
|
|
581
|
+
</tr>
|
|
582
|
+
<tr>
|
|
583
|
+
<td>2</td>
|
|
584
|
+
<td>Jane Doe</td>
|
|
585
|
+
<td>#ORD-002</td>
|
|
586
|
+
<td>$299.99</td>
|
|
587
|
+
<td>2023-11-02</td>
|
|
588
|
+
</tr>
|
|
589
|
+
<tr>
|
|
590
|
+
<td>3</td>
|
|
591
|
+
<td>Bob Johnson</td>
|
|
592
|
+
<td>#ORD-003</td>
|
|
593
|
+
<td>$149.99</td>
|
|
594
|
+
<td>2023-11-03</td>
|
|
595
|
+
</tr>
|
|
596
|
+
</tbody>
|
|
597
|
+
</table>
|
|
598
|
+
</div>
|
|
599
|
+
|
|
600
|
+
<div class="component-demo table-demo">
|
|
601
|
+
<div class="demo-title">Colored Tables</div>
|
|
602
|
+
<p class="text-muted mb-3">Table with contextual classes:</p>
|
|
603
|
+
|
|
604
|
+
<table class="table mb-4">
|
|
605
|
+
<thead>
|
|
606
|
+
<tr class="table-primary">
|
|
607
|
+
<th>#</th>
|
|
608
|
+
<th>Task</th>
|
|
609
|
+
<th>Priority</th>
|
|
610
|
+
<th>Status</th>
|
|
611
|
+
</tr>
|
|
612
|
+
</thead>
|
|
613
|
+
<tbody>
|
|
614
|
+
<tr>
|
|
615
|
+
<td>1</td>
|
|
616
|
+
<td>Fix login issue</td>
|
|
617
|
+
<td>High</td>
|
|
618
|
+
<td class="table-success">Completed</td>
|
|
619
|
+
</tr>
|
|
620
|
+
<tr>
|
|
621
|
+
<td>2</td>
|
|
622
|
+
<td>Update documentation</td>
|
|
623
|
+
<td>Medium</td>
|
|
624
|
+
<td class="table-warning">In Progress</td>
|
|
625
|
+
</tr>
|
|
626
|
+
<tr>
|
|
627
|
+
<td>3</td>
|
|
628
|
+
<td>Server maintenance</td>
|
|
629
|
+
<td>Low</td>
|
|
630
|
+
<td class="table-danger">Delayed</td>
|
|
631
|
+
</tr>
|
|
632
|
+
</tbody>
|
|
633
|
+
</table>
|
|
634
|
+
|
|
635
|
+
<table class="table">
|
|
636
|
+
<thead class="thead-dark">
|
|
637
|
+
<tr>
|
|
638
|
+
<th>#</th>
|
|
639
|
+
<th>Department</th>
|
|
640
|
+
<th>Budget</th>
|
|
641
|
+
<th>Spent</th>
|
|
642
|
+
<th>Remaining</th>
|
|
643
|
+
</tr>
|
|
644
|
+
</thead>
|
|
645
|
+
<tbody>
|
|
646
|
+
<tr>
|
|
647
|
+
<td>1</td>
|
|
648
|
+
<td>Marketing</td>
|
|
649
|
+
<td>$50,000</td>
|
|
650
|
+
<td>$32,500</td>
|
|
651
|
+
<td class="text-success">$17,500</td>
|
|
652
|
+
</tr>
|
|
653
|
+
<tr>
|
|
654
|
+
<td>2</td>
|
|
655
|
+
<td>Development</td>
|
|
656
|
+
<td>$100,000</td>
|
|
657
|
+
<td>$85,000</td>
|
|
658
|
+
<td class="text-warning">$15,000</td>
|
|
659
|
+
</tr>
|
|
660
|
+
<tr>
|
|
661
|
+
<td>3</td>
|
|
662
|
+
<td>Sales</td>
|
|
663
|
+
<td>$75,000</td>
|
|
664
|
+
<td>$90,000</td>
|
|
665
|
+
<td class="text-danger">-$15,000</td>
|
|
666
|
+
</tr>
|
|
667
|
+
</tbody>
|
|
668
|
+
</table>
|
|
669
|
+
</div>
|
|
670
|
+
|
|
671
|
+
<div class="code-block">
|
|
672
|
+
<pre><code class="language-html"><!-- Basic table -->
|
|
673
|
+
<table class="table">
|
|
674
|
+
<thead>
|
|
675
|
+
<tr>
|
|
676
|
+
<th>#</th>
|
|
677
|
+
<th>Name</th>
|
|
678
|
+
<th>Username</th>
|
|
679
|
+
</tr>
|
|
680
|
+
</thead>
|
|
681
|
+
<tbody>
|
|
682
|
+
<tr>
|
|
683
|
+
<td>1</td>
|
|
684
|
+
<td>John Doe</td>
|
|
685
|
+
<td>@johndoe</td>
|
|
686
|
+
</tr>
|
|
687
|
+
</tbody>
|
|
688
|
+
</table>
|
|
689
|
+
|
|
690
|
+
<!-- Striped table -->
|
|
691
|
+
<table class="table table-striped">
|
|
692
|
+
<!-- table content -->
|
|
693
|
+
</table>
|
|
694
|
+
|
|
695
|
+
<!-- Bordered table -->
|
|
696
|
+
<table class="table table-bordered">
|
|
697
|
+
<!-- table content -->
|
|
698
|
+
</table>
|
|
699
|
+
|
|
700
|
+
<!-- Hoverable table -->
|
|
701
|
+
<table class="table table-hover">
|
|
702
|
+
<!-- table content -->
|
|
703
|
+
</table>
|
|
704
|
+
|
|
705
|
+
<!-- Table with contextual classes -->
|
|
706
|
+
<table class="table">
|
|
707
|
+
<thead>
|
|
708
|
+
<tr class="table-primary">
|
|
709
|
+
<th>#</th>
|
|
710
|
+
<th>Task</th>
|
|
711
|
+
</tr>
|
|
712
|
+
</thead>
|
|
713
|
+
<tbody>
|
|
714
|
+
<tr class="table-success">
|
|
715
|
+
<td>1</td>
|
|
716
|
+
<td>Completed task</td>
|
|
717
|
+
</tr>
|
|
718
|
+
</tbody>
|
|
719
|
+
</table></code></pre>
|
|
720
|
+
</div>
|
|
721
|
+
|
|
722
|
+
<h3>Table Classes</h3>
|
|
723
|
+
<div class="table-responsive">
|
|
724
|
+
<table class="table table-striped">
|
|
725
|
+
<thead>
|
|
726
|
+
<tr>
|
|
727
|
+
<th>Class</th>
|
|
728
|
+
<th>Description</th>
|
|
729
|
+
</tr>
|
|
730
|
+
</thead>
|
|
731
|
+
<tbody>
|
|
732
|
+
<tr>
|
|
733
|
+
<td><code>.table</code></td>
|
|
734
|
+
<td>Base class for all tables. Sets basic styling, width, margins, and border-collapse.</td>
|
|
735
|
+
</tr>
|
|
736
|
+
<tr>
|
|
737
|
+
<td><code>.table-striped</code></td>
|
|
738
|
+
<td>Adds zebra-striping to table rows (alternating background colors).</td>
|
|
739
|
+
</tr>
|
|
740
|
+
<tr>
|
|
741
|
+
<td><code>.table-bordered</code></td>
|
|
742
|
+
<td>Adds borders on all sides of the table and cells.</td>
|
|
743
|
+
</tr>
|
|
744
|
+
<tr>
|
|
745
|
+
<td><code>.table-hover</code></td>
|
|
746
|
+
<td>Enables hover effect on table rows (background color change on hover).</td>
|
|
747
|
+
</tr>
|
|
748
|
+
<tr>
|
|
749
|
+
<td><code>.table-primary</code></td>
|
|
750
|
+
<td>Contextual class for primary colored table rows or cells.</td>
|
|
751
|
+
</tr>
|
|
752
|
+
<tr>
|
|
753
|
+
<td><code>.table-success</code></td>
|
|
754
|
+
<td>Contextual class for success colored table rows or cells.</td>
|
|
755
|
+
</tr>
|
|
756
|
+
<tr>
|
|
757
|
+
<td><code>.table-danger</code></td>
|
|
758
|
+
<td>Contextual class for danger colored table rows or cells.</td>
|
|
759
|
+
</tr>
|
|
760
|
+
<tr>
|
|
761
|
+
<td><code>.table-warning</code></td>
|
|
762
|
+
<td>Contextual class for warning colored table rows or cells.</td>
|
|
763
|
+
</tr>
|
|
764
|
+
<tr>
|
|
765
|
+
<td><code>.table-info</code></td>
|
|
766
|
+
<td>Contextual class for info colored table rows or cells.</td>
|
|
767
|
+
</tr>
|
|
768
|
+
</tbody>
|
|
769
|
+
</table>
|
|
770
|
+
</div>
|
|
771
|
+
|
|
772
|
+
<div class="callout info">
|
|
773
|
+
<p>
|
|
774
|
+
<strong>Note:</strong>
|
|
775
|
+
Lime CSS tables use consistent padding (0.75rem) for both header and data cells. The header cells have
|
|
776
|
+
<code>vertical-align: bottom</code>
|
|
777
|
+
and a bottom border, while data cells have
|
|
778
|
+
<code>vertical-align: top</code>
|
|
779
|
+
.
|
|
780
|
+
</p>
|
|
781
|
+
</div>
|
|
782
|
+
</section>
|
|
783
|
+
|
|
784
|
+
<!-- Alerts -->
|
|
785
|
+
<section id="alerts" class="section">
|
|
786
|
+
<h2>Alerts</h2>
|
|
787
|
+
<p>Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
|
|
788
|
+
|
|
789
|
+
<div class="component-demo alert-demo">
|
|
790
|
+
<div class="demo-title">Alert Variants</div>
|
|
791
|
+
<div class="alert alert-primary">This is a primary alert—check it out!</div>
|
|
792
|
+
<div class="alert alert-success">This is a success alert—check it out!</div>
|
|
793
|
+
<div class="alert alert-danger">This is a danger alert—check it out!</div>
|
|
794
|
+
<div class="alert alert-warning">This is a warning alert—check it out!</div>
|
|
795
|
+
<div class="alert alert-info">This is an info alert—check it out!</div>
|
|
796
|
+
<div class="alert alert-light">This is a light alert—check it out!</div>
|
|
797
|
+
<div class="alert alert-dark">This is a dark alert—check it out!</div>
|
|
798
|
+
</div>
|
|
799
|
+
|
|
800
|
+
<div class="code-block">
|
|
801
|
+
<pre><code class="language-html"><div class="alert alert-primary">
|
|
802
|
+
This is a primary alert!
|
|
803
|
+
</div>
|
|
804
|
+
|
|
805
|
+
<div class="alert alert-success">
|
|
806
|
+
This is a success alert!
|
|
807
|
+
</div>
|
|
808
|
+
|
|
809
|
+
<div class="alert alert-danger">
|
|
810
|
+
This is a danger alert!
|
|
811
|
+
</div></code></pre>
|
|
812
|
+
</div>
|
|
813
|
+
</section>
|
|
814
|
+
|
|
815
|
+
<!-- Navbar -->
|
|
816
|
+
<section id="navbar" class="section">
|
|
817
|
+
<h2>Navbar</h2>
|
|
818
|
+
<p>A basic navigation header with support for branding and navigation links.</p>
|
|
819
|
+
|
|
820
|
+
<div class="callout info">
|
|
821
|
+
<p>
|
|
822
|
+
<strong>Note:</strong>
|
|
823
|
+
Lime CSS provides a basic navbar structure. For horizontal layouts, you'll need to add your own CSS or use flex utilities.
|
|
824
|
+
</p>
|
|
825
|
+
</div>
|
|
826
|
+
|
|
827
|
+
<div class="component-demo">
|
|
828
|
+
<div class="demo-title">Basic Navbar (Default vertical layout)</div>
|
|
829
|
+
|
|
830
|
+
<nav class="navbar mb-4">
|
|
831
|
+
<a class="navbar-brand" href="#">Navbar Brand</a>
|
|
832
|
+
<ul class="navbar-nav">
|
|
833
|
+
<li>
|
|
834
|
+
<a class="nav-link active" href="#">Home</a>
|
|
835
|
+
</li>
|
|
836
|
+
<li>
|
|
837
|
+
<a class="nav-link" href="#">Features</a>
|
|
838
|
+
</li>
|
|
839
|
+
<li>
|
|
840
|
+
<a class="nav-link" href="#">Pricing</a>
|
|
841
|
+
</li>
|
|
842
|
+
<li>
|
|
843
|
+
<a class="nav-link" href="#">About</a>
|
|
844
|
+
</li>
|
|
845
|
+
</ul>
|
|
846
|
+
</nav>
|
|
847
|
+
</div>
|
|
848
|
+
|
|
849
|
+
<div class="component-demo">
|
|
850
|
+
<div class="demo-title">Navbar with Background Color</div>
|
|
851
|
+
|
|
852
|
+
<nav class="navbar bg-primary text-white mb-4">
|
|
853
|
+
<a class="navbar-brand text-white" href="#">Brand</a>
|
|
854
|
+
<ul class="navbar-nav">
|
|
855
|
+
<li>
|
|
856
|
+
<a class="nav-link text-white" href="#">Link 1</a>
|
|
857
|
+
</li>
|
|
858
|
+
<li>
|
|
859
|
+
<a class="nav-link text-white" href="#">Link 2</a>
|
|
860
|
+
</li>
|
|
861
|
+
</ul>
|
|
862
|
+
</nav>
|
|
863
|
+
|
|
864
|
+
<nav class="navbar bg-dark text-white">
|
|
865
|
+
<a class="navbar-brand text-white" href="#">Brand</a>
|
|
866
|
+
<ul class="navbar-nav">
|
|
867
|
+
<li>
|
|
868
|
+
<a class="nav-link text-white" href="#">Link 1</a>
|
|
869
|
+
</li>
|
|
870
|
+
<li>
|
|
871
|
+
<a class="nav-link text-white" href="#">Link 2</a>
|
|
872
|
+
</li>
|
|
873
|
+
</ul>
|
|
874
|
+
</nav>
|
|
875
|
+
</div>
|
|
876
|
+
|
|
877
|
+
<div class="component-demo">
|
|
878
|
+
<div class="demo-title">Horizontal Navbar with Styled Buttons</div>
|
|
879
|
+
<p class="text-muted mb-3">You can make the navbar horizontal and style the links as buttons using Lime CSS utilities:</p>
|
|
880
|
+
|
|
881
|
+
<nav class="navbar d-flex align-items-center bg-light p-3 mb-4">
|
|
882
|
+
<a class="navbar-brand d-flex align-items-center" href="#">
|
|
883
|
+
<i class="fas fa-lemon text-lime mr-2"></i>
|
|
884
|
+
Lime CSS
|
|
885
|
+
</a>
|
|
886
|
+
<ul class="navbar-nav d-flex flex-row ml-auto">
|
|
887
|
+
<li class="mr-3">
|
|
888
|
+
<a class="nav-link btn btn-primary btn-sm" href="#">Home</a>
|
|
889
|
+
</li>
|
|
890
|
+
<li class="mr-3">
|
|
891
|
+
<a class="nav-link btn btn-secondary btn-sm" href="#">Features</a>
|
|
892
|
+
</li>
|
|
893
|
+
<li class="mr-3">
|
|
894
|
+
<a class="nav-link btn btn-danger btn-sm" href="#">Pricing</a>
|
|
895
|
+
</li>
|
|
896
|
+
<li>
|
|
897
|
+
<a class="nav-link btn btn-success btn-sm" href="#">Download</a>
|
|
898
|
+
</li>
|
|
899
|
+
</ul>
|
|
900
|
+
</nav>
|
|
901
|
+
|
|
902
|
+
<nav class="navbar d-flex align-items-center bg-dark p-3">
|
|
903
|
+
<a class="navbar-brand text-white d-flex align-items-center" href="#">
|
|
904
|
+
<i class="fas fa-leaf text-lime mr-2"></i>
|
|
905
|
+
Lime UI
|
|
906
|
+
</a>
|
|
907
|
+
<ul class="navbar-nav d-flex flex-row ml-auto">
|
|
908
|
+
<li class="mr-3 p-1">
|
|
909
|
+
<a class="nav-link btn btn-outline-danger btn-sm" href="#">Home</a>
|
|
910
|
+
</li>
|
|
911
|
+
<li class="mr-3 p-1">
|
|
912
|
+
<a class="nav-link btn btn-outline-light btn-sm" href="#">Features</a>
|
|
913
|
+
</li>
|
|
914
|
+
<li class="mr-3 p-1">
|
|
915
|
+
<a class="nav-link btn btn-outline-info btn-sm" href="#">Docs</a>
|
|
916
|
+
</li>
|
|
917
|
+
<li class="p-1">
|
|
918
|
+
<a class="nav-link btn btn-outline-warning btn-sm" href="#">Try Now</a>
|
|
919
|
+
</li>
|
|
920
|
+
</ul>
|
|
921
|
+
</nav>
|
|
922
|
+
</div>
|
|
923
|
+
|
|
924
|
+
<div class="code-block">
|
|
925
|
+
<pre><code class="language-html"><!-- Basic Vertical Navbar (Default) -->
|
|
926
|
+
<nav class="navbar">
|
|
927
|
+
<a class="navbar-brand" href="#">Brand</a>
|
|
928
|
+
<ul class="navbar-nav">
|
|
929
|
+
<li>
|
|
930
|
+
<a class="nav-link active" href="#">Home</a>
|
|
931
|
+
</li>
|
|
932
|
+
<li>
|
|
933
|
+
<a class="nav-link" href="#">Features</a>
|
|
934
|
+
</li>
|
|
935
|
+
</ul>
|
|
936
|
+
</nav>
|
|
937
|
+
|
|
938
|
+
<!-- Horizontal Navbar with Button Links -->
|
|
939
|
+
<nav class="navbar d-flex align-items-center bg-light p-3">
|
|
940
|
+
<a class="navbar-brand" href="#">Brand</a>
|
|
941
|
+
<ul class="navbar-nav d-flex flex-row ml-auto">
|
|
942
|
+
<li class="mr-3">
|
|
943
|
+
<a class="nav-link btn btn-primary btn-sm" href="#">Home</a>
|
|
944
|
+
</li>
|
|
945
|
+
<li class="mr-3">
|
|
946
|
+
<a class="nav-link btn btn-outline-primary btn-sm" href="#">Features</a>
|
|
947
|
+
</li>
|
|
948
|
+
</ul>
|
|
949
|
+
</nav>
|
|
950
|
+
|
|
951
|
+
<!-- Navbar with Pill Buttons -->
|
|
952
|
+
<nav class="navbar d-flex align-items-center bg-white border p-3">
|
|
953
|
+
<a class="navbar-brand" href="#">Brand</a>
|
|
954
|
+
<ul class="navbar-nav d-flex flex-row ml-auto">
|
|
955
|
+
<li class="mr-2">
|
|
956
|
+
<a class="nav-link btn btn-primary rounded-pill px-3" href="#">Home</a>
|
|
957
|
+
</li>
|
|
958
|
+
<li class="mr-2">
|
|
959
|
+
<a class="nav-link btn btn-outline-primary rounded-pill px-3" href="#">Features</a>
|
|
960
|
+
</li>
|
|
961
|
+
</ul>
|
|
962
|
+
</nav></code></pre>
|
|
963
|
+
</div>
|
|
964
|
+
|
|
965
|
+
<h3>Navbar Classes</h3>
|
|
966
|
+
<div class="table-responsive">
|
|
967
|
+
<table class="table table-striped">
|
|
968
|
+
<thead>
|
|
969
|
+
<tr>
|
|
970
|
+
<th>Class</th>
|
|
971
|
+
<th>Description</th>
|
|
972
|
+
</tr>
|
|
973
|
+
</thead>
|
|
974
|
+
<tbody>
|
|
975
|
+
<tr>
|
|
976
|
+
<td><code>.navbar</code></td>
|
|
977
|
+
<td>Base class for navigation bar. Sets display: flex, flex-wrap: wrap, aligns items center, and justifies content between.</td>
|
|
978
|
+
</tr>
|
|
979
|
+
<tr>
|
|
980
|
+
<td><code>.navbar-brand</code></td>
|
|
981
|
+
<td>For your company, product, or project name. Adds padding and font-size styling.</td>
|
|
982
|
+
</tr>
|
|
983
|
+
<tr>
|
|
984
|
+
<td><code>.navbar-nav</code></td>
|
|
985
|
+
<td>Container for navigation links. Default is flex-direction: column (vertical).</td>
|
|
986
|
+
</tr>
|
|
987
|
+
<tr>
|
|
988
|
+
<td><code>.nav-link</code></td>
|
|
989
|
+
<td>Individual navigation link. Sets display: block, padding, color (#007bff), and text decoration.</td>
|
|
990
|
+
</tr>
|
|
991
|
+
<tr>
|
|
992
|
+
<td>
|
|
993
|
+
<code>.btn</code>
|
|
994
|
+
+
|
|
995
|
+
<code>.nav-link</code>
|
|
996
|
+
</td>
|
|
997
|
+
<td>Combination to style navigation links as buttons</td>
|
|
998
|
+
</tr>
|
|
999
|
+
</tbody>
|
|
1000
|
+
</table>
|
|
1001
|
+
</div>
|
|
1002
|
+
|
|
1003
|
+
<div class="callout">
|
|
1004
|
+
<p>
|
|
1005
|
+
<strong>Tip:</strong>
|
|
1006
|
+
To create button-style navigation links, combine the
|
|
1007
|
+
<code>.nav-link</code>
|
|
1008
|
+
class with button classes like
|
|
1009
|
+
<code>.btn</code>
|
|
1010
|
+
,
|
|
1011
|
+
<code>.btn-primary</code>
|
|
1012
|
+
,
|
|
1013
|
+
<code>.btn-sm</code>
|
|
1014
|
+
, and
|
|
1015
|
+
<code>.rounded-pill</code>
|
|
1016
|
+
. Use margin utilities like
|
|
1017
|
+
<code>.mr-2</code>
|
|
1018
|
+
or
|
|
1019
|
+
<code>.mr-3</code>
|
|
1020
|
+
for spacing between buttons.
|
|
1021
|
+
</p>
|
|
1022
|
+
</div>
|
|
1023
|
+
|
|
1024
|
+
<div class="callout warning">
|
|
1025
|
+
<p>
|
|
1026
|
+
<strong>Important:</strong>
|
|
1027
|
+
The default navbar in Lime CSS is designed to be simple and lightweight. For complex navigation patterns (dropdowns, mobile menus, etc.), you'll need to write additional CSS or JavaScript.
|
|
1028
|
+
</p>
|
|
1029
|
+
</div>
|
|
1030
|
+
</section>
|
|
1031
|
+
|
|
1032
|
+
<!-- Colors -->
|
|
1033
|
+
<section id="colors" class="section">
|
|
1034
|
+
<h2>Colors</h2>
|
|
1035
|
+
<p>Lime CSS includes a comprehensive color system with predefined classes for text, background, and border colors.</p>
|
|
1036
|
+
|
|
1037
|
+
<h3>Text Colors</h3>
|
|
1038
|
+
<div class="component-demo">
|
|
1039
|
+
<p class="text-primary">.text-primary</p>
|
|
1040
|
+
<p class="text-secondary">.text-secondary</p>
|
|
1041
|
+
<p class="text-success">.text-success</p>
|
|
1042
|
+
<p class="text-danger">.text-danger</p>
|
|
1043
|
+
<p class="text-warning">.text-warning</p>
|
|
1044
|
+
<p class="text-info">.text-info</p>
|
|
1045
|
+
<p class="text-light bg-dark">.text-light (on dark background)</p>
|
|
1046
|
+
<p class="text-dark">.text-dark</p>
|
|
1047
|
+
<p class="text-muted">.text-muted</p>
|
|
1048
|
+
<p class="text-lime">
|
|
1049
|
+
.text-lime
|
|
1050
|
+
<span class="badge">Custom</span>
|
|
1051
|
+
</p>
|
|
1052
|
+
</div>
|
|
1053
|
+
|
|
1054
|
+
<h3>Background Colors</h3>
|
|
1055
|
+
<div class="color-swatches">
|
|
1056
|
+
<div class="color-swatch">
|
|
1057
|
+
<div class="swatch bg-primary">Primary</div>
|
|
1058
|
+
<div class="info">
|
|
1059
|
+
<div class="name">Primary</div>
|
|
1060
|
+
<div class="value">#32cd32</div>
|
|
1061
|
+
</div>
|
|
1062
|
+
</div>
|
|
1063
|
+
<div class="color-swatch">
|
|
1064
|
+
<div class="swatch bg-secondary">Secondary</div>
|
|
1065
|
+
<div class="info">
|
|
1066
|
+
<div class="name">Secondary</div>
|
|
1067
|
+
<div class="value">#6c757d</div>
|
|
1068
|
+
</div>
|
|
1069
|
+
</div>
|
|
1070
|
+
<div class="color-swatch">
|
|
1071
|
+
<div class="swatch bg-success">Success</div>
|
|
1072
|
+
<div class="info">
|
|
1073
|
+
<div class="name">Success</div>
|
|
1074
|
+
<div class="value">#28a745</div>
|
|
1075
|
+
</div>
|
|
1076
|
+
</div>
|
|
1077
|
+
<div class="color-swatch">
|
|
1078
|
+
<div class="swatch bg-danger">Danger</div>
|
|
1079
|
+
<div class="info">
|
|
1080
|
+
<div class="name">Danger</div>
|
|
1081
|
+
<div class="value">#dc3545</div>
|
|
1082
|
+
</div>
|
|
1083
|
+
</div>
|
|
1084
|
+
<div class="color-swatch">
|
|
1085
|
+
<div class="swatch bg-warning light">Warning</div>
|
|
1086
|
+
<div class="info">
|
|
1087
|
+
<div class="name">Warning</div>
|
|
1088
|
+
<div class="value">#ffc107</div>
|
|
1089
|
+
</div>
|
|
1090
|
+
</div>
|
|
1091
|
+
<div class="color-swatch">
|
|
1092
|
+
<div class="swatch bg-info">Info</div>
|
|
1093
|
+
<div class="info">
|
|
1094
|
+
<div class="name">Info</div>
|
|
1095
|
+
<div class="value">#17a2b8</div>
|
|
1096
|
+
</div>
|
|
1097
|
+
</div>
|
|
1098
|
+
<div class="color-swatch">
|
|
1099
|
+
<div class="swatch bg-dark">Dark</div>
|
|
1100
|
+
<div class="info">
|
|
1101
|
+
<div class="name">Dark</div>
|
|
1102
|
+
<div class="value">#343a40</div>
|
|
1103
|
+
</div>
|
|
1104
|
+
</div>
|
|
1105
|
+
<div class="color-swatch">
|
|
1106
|
+
<div class="swatch bg-lime">
|
|
1107
|
+
Lime
|
|
1108
|
+
<span class="badge">Custom</span>
|
|
1109
|
+
</div>
|
|
1110
|
+
<div class="info">
|
|
1111
|
+
<div class="name">Lime</div>
|
|
1112
|
+
<div class="value">#32cd32</div>
|
|
1113
|
+
</div>
|
|
1114
|
+
</div>
|
|
1115
|
+
</div>
|
|
1116
|
+
|
|
1117
|
+
<div class="code-block">
|
|
1118
|
+
<pre><code class="language-html"><!-- Text colors -->
|
|
1119
|
+
<p class="text-primary">Primary text</p>
|
|
1120
|
+
<p class="text-success">Success text</p>
|
|
1121
|
+
|
|
1122
|
+
<!-- Background colors -->
|
|
1123
|
+
<div class="bg-primary text-white">Primary background</div>
|
|
1124
|
+
<div class="bg-success text-white">Success background</div>
|
|
1125
|
+
|
|
1126
|
+
<!-- Border colors -->
|
|
1127
|
+
<div class="border border-primary">Primary border</div>
|
|
1128
|
+
<div class="border border-success">Success border</div></code></pre>
|
|
1129
|
+
</div>
|
|
1130
|
+
</section>
|
|
1131
|
+
|
|
1132
|
+
<!-- Spacing -->
|
|
1133
|
+
<section id="spacing" class="section">
|
|
1134
|
+
<h2>Spacing</h2>
|
|
1135
|
+
<p>Lime CSS includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.</p>
|
|
1136
|
+
|
|
1137
|
+
<div class="component-demo">
|
|
1138
|
+
<div class="demo-title">Margin Examples</div>
|
|
1139
|
+
<div class="p-3 mb-2 bg-light border">
|
|
1140
|
+
<div class="p-2 bg-primary text-white mb-3">.mb-3 (margin-bottom: 1rem)</div>
|
|
1141
|
+
<div class="p-2 bg-success text-white mt-3">.mt-3 (margin-top: 1rem)</div>
|
|
1142
|
+
<div class="p-2 bg-info text-white ml-3 d-inline-block">.ml-3</div>
|
|
1143
|
+
<div class="p-2 bg-warning text-white mr-3 d-inline-block">.mr-3</div>
|
|
1144
|
+
</div>
|
|
1145
|
+
</div>
|
|
1146
|
+
|
|
1147
|
+
<div class="component-demo">
|
|
1148
|
+
<div class="demo-title">Padding Examples</div>
|
|
1149
|
+
<div class="bg-light border">
|
|
1150
|
+
<div class="p-1 bg-primary text-white mb-2">.p-1 (padding: 0.25rem)</div>
|
|
1151
|
+
<div class="p-2 bg-success text-white mb-2">.p-2 (padding: 0.5rem)</div>
|
|
1152
|
+
<div class="p-3 bg-info text-white mb-2">.p-3 (padding: 1rem)</div>
|
|
1153
|
+
<div class="p-4 bg-warning text-white">.p-4 (padding: 1.5rem)</div>
|
|
1154
|
+
</div>
|
|
1155
|
+
</div>
|
|
1156
|
+
|
|
1157
|
+
<h3>Spacing Scale</h3>
|
|
1158
|
+
<div class="table-responsive">
|
|
1159
|
+
<table class="table table-striped">
|
|
1160
|
+
<thead>
|
|
1161
|
+
<tr>
|
|
1162
|
+
<th>Class</th>
|
|
1163
|
+
<th>Size</th>
|
|
1164
|
+
<th>Value</th>
|
|
1165
|
+
</tr>
|
|
1166
|
+
</thead>
|
|
1167
|
+
<tbody>
|
|
1168
|
+
<tr>
|
|
1169
|
+
<td>
|
|
1170
|
+
<code>.m-1</code>
|
|
1171
|
+
/
|
|
1172
|
+
<code>.p-1</code>
|
|
1173
|
+
</td>
|
|
1174
|
+
<td>1</td>
|
|
1175
|
+
<td>0.25rem (4px)</td>
|
|
1176
|
+
</tr>
|
|
1177
|
+
<tr>
|
|
1178
|
+
<td>
|
|
1179
|
+
<code>.m-2</code>
|
|
1180
|
+
/
|
|
1181
|
+
<code>.p-2</code>
|
|
1182
|
+
</td>
|
|
1183
|
+
<td>2</td>
|
|
1184
|
+
<td>0.5rem (8px)</td>
|
|
1185
|
+
</tr>
|
|
1186
|
+
<tr>
|
|
1187
|
+
<td>
|
|
1188
|
+
<code>.m-3</code>
|
|
1189
|
+
/
|
|
1190
|
+
<code>.p-3</code>
|
|
1191
|
+
</td>
|
|
1192
|
+
<td>3</td>
|
|
1193
|
+
<td>1rem (16px)</td>
|
|
1194
|
+
</tr>
|
|
1195
|
+
<tr>
|
|
1196
|
+
<td>
|
|
1197
|
+
<code>.m-4</code>
|
|
1198
|
+
/
|
|
1199
|
+
<code>.p-4</code>
|
|
1200
|
+
</td>
|
|
1201
|
+
<td>4</td>
|
|
1202
|
+
<td>1.5rem (24px)</td>
|
|
1203
|
+
</tr>
|
|
1204
|
+
<tr>
|
|
1205
|
+
<td>
|
|
1206
|
+
<code>.m-5</code>
|
|
1207
|
+
/
|
|
1208
|
+
<code>.p-5</code>
|
|
1209
|
+
</td>
|
|
1210
|
+
<td>5</td>
|
|
1211
|
+
<td>3rem (48px)</td>
|
|
1212
|
+
</tr>
|
|
1213
|
+
</tbody>
|
|
1214
|
+
</table>
|
|
1215
|
+
</div>
|
|
1216
|
+
|
|
1217
|
+
<div class="code-block">
|
|
1218
|
+
<pre><code class="language-html"><!-- Margin utilities -->
|
|
1219
|
+
<div class="mt-3">Margin top 1rem</div>
|
|
1220
|
+
<div class="mb-4">Margin bottom 1.5rem</div>
|
|
1221
|
+
<div class="ml-2">Margin left 0.5rem</div>
|
|
1222
|
+
<div class="mr-5">Margin right 3rem</div>
|
|
1223
|
+
|
|
1224
|
+
<!-- Padding utilities -->
|
|
1225
|
+
<div class="pt-3">Padding top 1rem</div>
|
|
1226
|
+
<div class="pb-4">Padding bottom 1.5rem</div>
|
|
1227
|
+
<div class="pl-2">Padding left 0.5rem</div>
|
|
1228
|
+
<div class="pr-5">Padding right 3rem</div></code></pre>
|
|
1229
|
+
</div>
|
|
1230
|
+
</section>
|
|
1231
|
+
|
|
1232
|
+
<!-- Display -->
|
|
1233
|
+
<section id="display" class="section">
|
|
1234
|
+
<h2>Display</h2>
|
|
1235
|
+
<p>Quickly and responsively toggle the display value of components and more with our display utilities.</p>
|
|
1236
|
+
|
|
1237
|
+
<div class="component-demo">
|
|
1238
|
+
<div class="demo-title">Display Examples</div>
|
|
1239
|
+
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
|
|
1240
|
+
<div class="d-inline p-2 bg-success text-white">d-inline</div>
|
|
1241
|
+
|
|
1242
|
+
<div class="d-block p-2 bg-info text-white mt-2">d-block</div>
|
|
1243
|
+
<div class="d-block p-2 bg-warning text-white">d-block</div>
|
|
1244
|
+
|
|
1245
|
+
<div class="d-flex p-2 bg-light border mt-2">
|
|
1246
|
+
<div class="p-2 bg-primary text-white mr-2">Flex item</div>
|
|
1247
|
+
<div class="p-2 bg-success text-white">Flex item</div>
|
|
1248
|
+
</div>
|
|
1249
|
+
|
|
1250
|
+
<div class="d-none p-2 bg-danger text-white mt-2">This is hidden (d-none)</div>
|
|
1251
|
+
<div class="d-inline-block p-2 bg-dark text-white mt-2">d-inline-block</div>
|
|
1252
|
+
</div>
|
|
1253
|
+
|
|
1254
|
+
<div class="code-block">
|
|
1255
|
+
<pre><code class="language-html"><div class="d-inline">Inline</div>
|
|
1256
|
+
<div class="d-block">Block</div>
|
|
1257
|
+
<div class="d-flex">Flex</div>
|
|
1258
|
+
<div class="d-inline-block">Inline Block</div>
|
|
1259
|
+
<div class="d-none">Hidden</div>
|
|
1260
|
+
|
|
1261
|
+
<!-- Responsive display -->
|
|
1262
|
+
<div class="d-none d-md-block">
|
|
1263
|
+
Hidden on mobile, visible on medium and up
|
|
1264
|
+
</div></code></pre>
|
|
1265
|
+
</div>
|
|
1266
|
+
</section>
|
|
1267
|
+
|
|
1268
|
+
<!-- Text -->
|
|
1269
|
+
<section id="text" class="section">
|
|
1270
|
+
<h2>Text</h2>
|
|
1271
|
+
<p>Text utilities for controlling alignment, wrapping, weight, and more.</p>
|
|
1272
|
+
|
|
1273
|
+
<h3>Text Alignment</h3>
|
|
1274
|
+
<div class="component-demo">
|
|
1275
|
+
<div class="demo-title">Text Alignment Classes</div>
|
|
1276
|
+
<p class="text-left border p-3 mb-3">Left aligned text on all viewport sizes.</p>
|
|
1277
|
+
<p class="text-center border p-3 mb-3">Center aligned text on all viewport sizes.</p>
|
|
1278
|
+
<p class="text-right border p-3">Right aligned text on all viewport sizes.</p>
|
|
1279
|
+
</div>
|
|
1280
|
+
|
|
1281
|
+
<div class="component-demo">
|
|
1282
|
+
<div class="demo-title">Responsive Text Alignment</div>
|
|
1283
|
+
<p class="text-left text-md-center text-lg-right border p-3 mb-3">Left aligned on small, center aligned on medium, right aligned on large.</p>
|
|
1284
|
+
<p class="text-center text-lg-left border p-3">Center aligned on small and medium, left aligned on large.</p>
|
|
1285
|
+
</div>
|
|
1286
|
+
|
|
1287
|
+
<div class="code-block">
|
|
1288
|
+
<pre><code class="language-html"><p class="text-left">Left aligned text</p>
|
|
1289
|
+
<p class="text-center">Center aligned text</p>
|
|
1290
|
+
<p class="text-right">Right aligned text</p>
|
|
1291
|
+
<p class="text-justify">Justified text</p>
|
|
1292
|
+
|
|
1293
|
+
<!-- Responsive alignment -->
|
|
1294
|
+
<p class="text-left text-md-center text-lg-right">
|
|
1295
|
+
Responsive text alignment
|
|
1296
|
+
</p></code></pre>
|
|
1297
|
+
</div>
|
|
1298
|
+
|
|
1299
|
+
<h3>Text Transformation</h3>
|
|
1300
|
+
<div class="component-demo">
|
|
1301
|
+
<div class="demo-title">Text Transformation Classes</div>
|
|
1302
|
+
<p class="text-lowercase border p-3 mb-3">LOWERCASE TEXT TRANSFORMED TO LOWERCASE</p>
|
|
1303
|
+
<p class="text-uppercase border p-3 mb-3">uppercase text transformed to uppercase</p>
|
|
1304
|
+
<p class="text-capitalize border p-3 mb-3">capitalized text transforms each word's first letter</p>
|
|
1305
|
+
<p class="font-normal border p-3 mb-3"><em>Italic text made normal with .font-normal</em></p>
|
|
1306
|
+
<p class="font-italic border p-3">Normal text made italic with .font-italic</p>
|
|
1307
|
+
</div>
|
|
1308
|
+
|
|
1309
|
+
<div class="code-block">
|
|
1310
|
+
<pre><code class="language-html"><p class="text-lowercase">Lowercased text</p>
|
|
1311
|
+
<p class="text-uppercase">Uppercased text</p>
|
|
1312
|
+
<p class="text-capitalize">Capitalized text</p>
|
|
1313
|
+
<p class="font-italic">Italic text</p>
|
|
1314
|
+
<p class="font-normal">Normal text (removes italic)</p></code></pre>
|
|
1315
|
+
</div>
|
|
1316
|
+
|
|
1317
|
+
<h3>Font Weight and Style</h3>
|
|
1318
|
+
<div class="component-demo">
|
|
1319
|
+
<div class="demo-title">Font Weight Classes</div>
|
|
1320
|
+
<p class="font-weight-light border p-3 mb-3">Light weight text</p>
|
|
1321
|
+
<p class="font-weight-normal border p-3 mb-3">Normal weight text</p>
|
|
1322
|
+
<p class="font-weight-bold border p-3 mb-3">Bold weight text</p>
|
|
1323
|
+
<p class="font-italic border p-3 mb-3">Italic style text</p>
|
|
1324
|
+
<p class="font-italic font-weight-bold border p-3">Bold italic text</p>
|
|
1325
|
+
</div>
|
|
1326
|
+
|
|
1327
|
+
<div class="code-block">
|
|
1328
|
+
<pre><code class="language-html"><p class="font-weight-light">Light weight text</p>
|
|
1329
|
+
<p class="font-weight-normal">Normal weight text</p>
|
|
1330
|
+
<p class="font-weight-bold">Bold weight text</p>
|
|
1331
|
+
<p class="font-italic">Italic text</p></code></pre>
|
|
1332
|
+
</div>
|
|
1333
|
+
|
|
1334
|
+
<h3>Text Decoration and Overflow</h3>
|
|
1335
|
+
<div class="component-demo">
|
|
1336
|
+
<div class="demo-title">Text Decoration Classes</div>
|
|
1337
|
+
<p class="text-decoration-none border p-3 mb-3"><a href="#" class="text-decoration-none">Link without underline</a></p>
|
|
1338
|
+
<p class="text-decoration-underline border p-3 mb-3">Text with underline</p>
|
|
1339
|
+
|
|
1340
|
+
<div class="demo-title mt-4">Text Overflow Classes</div>
|
|
1341
|
+
<div class="border p-3 mb-3">
|
|
1342
|
+
<p class="text-nowrap" style="width: 200px; background: #f8f9fa">This text will not wrap and will overflow the container.</p>
|
|
1343
|
+
</div>
|
|
1344
|
+
|
|
1345
|
+
<div class="border p-3">
|
|
1346
|
+
<p class="text-truncate" style="max-width: 200px; background: #f8f9fa">This is a very long text that will be truncated with an ellipsis when it overflows.</p>
|
|
1347
|
+
</div>
|
|
1348
|
+
</div>
|
|
1349
|
+
|
|
1350
|
+
<div class="code-block">
|
|
1351
|
+
<pre><code class="language-html"><!-- Text decoration -->
|
|
1352
|
+
<a href="#" class="text-decoration-none">Link without underline</a>
|
|
1353
|
+
<p class="text-decoration-underline">Underlined text</p>
|
|
1354
|
+
|
|
1355
|
+
<!-- Text overflow -->
|
|
1356
|
+
<p class="text-nowrap">Non-wrapping text</p>
|
|
1357
|
+
<p class="text-truncate" style="max-width: 200px;">
|
|
1358
|
+
Truncated long text
|
|
1359
|
+
</p></code></pre>
|
|
1360
|
+
</div>
|
|
1361
|
+
|
|
1362
|
+
<h3>Text Colors</h3>
|
|
1363
|
+
<div class="component-demo">
|
|
1364
|
+
<div class="demo-title">Text Color Classes</div>
|
|
1365
|
+
<p class="text-primary border p-3 mb-2">.text-primary</p>
|
|
1366
|
+
<p class="text-secondary border p-3 mb-2">.text-secondary</p>
|
|
1367
|
+
<p class="text-success border p-3 mb-2">.text-success</p>
|
|
1368
|
+
<p class="text-danger border p-3 mb-2">.text-danger</p>
|
|
1369
|
+
<p class="text-warning border p-3 mb-2">.text-warning</p>
|
|
1370
|
+
<p class="text-info border p-3 mb-2">.text-info</p>
|
|
1371
|
+
<p class="text-light bg-dark border p-3 mb-2">.text-light (on dark background)</p>
|
|
1372
|
+
<p class="text-dark border p-3 mb-2">.text-dark</p>
|
|
1373
|
+
<p class="text-muted border p-3 mb-2">.text-muted</p>
|
|
1374
|
+
<p class="text-lime border p-3">
|
|
1375
|
+
.text-lime
|
|
1376
|
+
<span class="badge">Custom</span>
|
|
1377
|
+
</p>
|
|
1378
|
+
</div>
|
|
1379
|
+
|
|
1380
|
+
<div class="code-block">
|
|
1381
|
+
<pre><code class="language-html"><p class="text-primary">Primary text</p>
|
|
1382
|
+
<p class="text-secondary">Secondary text</p>
|
|
1383
|
+
<p class="text-success">Success text</p>
|
|
1384
|
+
<p class="text-danger">Danger text</p>
|
|
1385
|
+
<p class="text-warning">Warning text</p>
|
|
1386
|
+
<p class="text-info">Info text</p>
|
|
1387
|
+
<p class="text-light bg-dark">Light text</p>
|
|
1388
|
+
<p class="text-dark">Dark text</p>
|
|
1389
|
+
<p class="text-muted">Muted text</p>
|
|
1390
|
+
<p class="text-lime">Lime text</p></code></pre>
|
|
1391
|
+
</div>
|
|
1392
|
+
|
|
1393
|
+
<h3>Text Utilities Reference</h3>
|
|
1394
|
+
<div class="table-responsive">
|
|
1395
|
+
<table class="table table-striped">
|
|
1396
|
+
<thead>
|
|
1397
|
+
<tr>
|
|
1398
|
+
<th>Class</th>
|
|
1399
|
+
<th>Description</th>
|
|
1400
|
+
</tr>
|
|
1401
|
+
</thead>
|
|
1402
|
+
<tbody>
|
|
1403
|
+
<tr>
|
|
1404
|
+
<td><code>.text-left</code></td>
|
|
1405
|
+
<td>Left aligned text</td>
|
|
1406
|
+
</tr>
|
|
1407
|
+
<tr>
|
|
1408
|
+
<td><code>.text-center</code></td>
|
|
1409
|
+
<td>Center aligned text</td>
|
|
1410
|
+
</tr>
|
|
1411
|
+
<tr>
|
|
1412
|
+
<td><code>.text-right</code></td>
|
|
1413
|
+
<td>Right aligned text</td>
|
|
1414
|
+
</tr>
|
|
1415
|
+
<tr>
|
|
1416
|
+
<td><code>.text-justify</code></td>
|
|
1417
|
+
<td>Justified text</td>
|
|
1418
|
+
</tr>
|
|
1419
|
+
<tr>
|
|
1420
|
+
<td><code>.text-lowercase</code></td>
|
|
1421
|
+
<td>Lowercase text</td>
|
|
1422
|
+
</tr>
|
|
1423
|
+
<tr>
|
|
1424
|
+
<td><code>.text-uppercase</code></td>
|
|
1425
|
+
<td>Uppercase text</td>
|
|
1426
|
+
</tr>
|
|
1427
|
+
<tr>
|
|
1428
|
+
<td><code>.text-capitalize</code></td>
|
|
1429
|
+
<td>Capitalized text (first letter of each word)</td>
|
|
1430
|
+
</tr>
|
|
1431
|
+
<tr>
|
|
1432
|
+
<td><code>.font-weight-light</code></td>
|
|
1433
|
+
<td>Light font weight (300)</td>
|
|
1434
|
+
</tr>
|
|
1435
|
+
<tr>
|
|
1436
|
+
<td><code>.font-weight-normal</code></td>
|
|
1437
|
+
<td>Normal font weight (400)</td>
|
|
1438
|
+
</tr>
|
|
1439
|
+
<tr>
|
|
1440
|
+
<td><code>.font-weight-bold</code></td>
|
|
1441
|
+
<td>Bold font weight (700)</td>
|
|
1442
|
+
</tr>
|
|
1443
|
+
<tr>
|
|
1444
|
+
<td><code>.font-italic</code></td>
|
|
1445
|
+
<td>Italic text</td>
|
|
1446
|
+
</tr>
|
|
1447
|
+
<tr>
|
|
1448
|
+
<td><code>.font-normal</code></td>
|
|
1449
|
+
<td>Normal font style (removes italic)</td>
|
|
1450
|
+
</tr>
|
|
1451
|
+
<tr>
|
|
1452
|
+
<td><code>.text-nowrap</code></td>
|
|
1453
|
+
<td>Prevent text from wrapping</td>
|
|
1454
|
+
</tr>
|
|
1455
|
+
<tr>
|
|
1456
|
+
<td><code>.text-truncate</code></td>
|
|
1457
|
+
<td>Truncate text with ellipsis</td>
|
|
1458
|
+
</tr>
|
|
1459
|
+
<tr>
|
|
1460
|
+
<td><code>.text-decoration-none</code></td>
|
|
1461
|
+
<td>Remove text decoration (underline)</td>
|
|
1462
|
+
</tr>
|
|
1463
|
+
<tr>
|
|
1464
|
+
<td><code>.text-decoration-underline</code></td>
|
|
1465
|
+
<td>Add underline to text</td>
|
|
1466
|
+
</tr>
|
|
1467
|
+
</tbody>
|
|
1468
|
+
</table>
|
|
1469
|
+
</div>
|
|
1470
|
+
|
|
1471
|
+
<div class="callout">
|
|
1472
|
+
<p>
|
|
1473
|
+
<strong>Tip:</strong>
|
|
1474
|
+
Text utility classes can be combined with responsive breakpoints. For example, use
|
|
1475
|
+
<code>.text-center .text-md-left</code>
|
|
1476
|
+
to center text on mobile and left-align it on medium screens and up.
|
|
1477
|
+
</p>
|
|
1478
|
+
</div>
|
|
1479
|
+
|
|
1480
|
+
<div class="callout info">
|
|
1481
|
+
<p>
|
|
1482
|
+
<strong>Note:</strong>
|
|
1483
|
+
Lime CSS text utilities work with the default font stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif.
|
|
1484
|
+
</p>
|
|
1485
|
+
</div>
|
|
1486
|
+
</section>
|
|
1487
|
+
|
|
1488
|
+
<!-- Borders -->
|
|
1489
|
+
<section id="borders" class="section">
|
|
1490
|
+
<h2>Borders</h2>
|
|
1491
|
+
<p>Use border utilities to quickly style the border and border-color of an element.</p>
|
|
1492
|
+
|
|
1493
|
+
<div class="component-demo">
|
|
1494
|
+
<div class="demo-title">Border Styles</div>
|
|
1495
|
+
<div class="row mb-4">
|
|
1496
|
+
<div class="col-md-6 mb-3">
|
|
1497
|
+
<div class="p-3 mb-2 border">.border (all sides)</div>
|
|
1498
|
+
<div class="p-3 mb-2 border-top">.border-top</div>
|
|
1499
|
+
<div class="p-3 mb-2 border-right">.border-right</div>
|
|
1500
|
+
<div class="p-3 mb-2 border-bottom">.border-bottom</div>
|
|
1501
|
+
<div class="p-3 border-left">.border-left</div>
|
|
1502
|
+
</div>
|
|
1503
|
+
<div class="col-md-6 mb-3">
|
|
1504
|
+
<div class="p-3 mb-2 border border-0">.border.border-0 (no border)</div>
|
|
1505
|
+
<div class="p-3 mb-2 border border-top-0">.border.border-top-0</div>
|
|
1506
|
+
<div class="p-3 mb-2 border border-right-0">.border.border-right-0</div>
|
|
1507
|
+
<div class="p-3 mb-2 border border-bottom-0">.border.border-bottom-0</div>
|
|
1508
|
+
<div class="p-3 border border-left-0">.border.border-left-0</div>
|
|
1509
|
+
</div>
|
|
1510
|
+
</div>
|
|
1511
|
+
</div>
|
|
1512
|
+
|
|
1513
|
+
<div class="component-demo">
|
|
1514
|
+
<div class="demo-title">Border Colors</div>
|
|
1515
|
+
<div class="row">
|
|
1516
|
+
<div class="col-md-6 mb-3">
|
|
1517
|
+
<div class="p-3 mb-2 border border-primary">.border.border-primary</div>
|
|
1518
|
+
<div class="p-3 mb-2 border border-secondary">.border.border-secondary</div>
|
|
1519
|
+
<div class="p-3 mb-2 border border-success">.border.border-success</div>
|
|
1520
|
+
<div class="p-3 mb-2 border border-danger">.border.border-danger</div>
|
|
1521
|
+
</div>
|
|
1522
|
+
<div class="col-md-6 mb-3">
|
|
1523
|
+
<div class="p-3 mb-2 border border-warning">.border.border-warning</div>
|
|
1524
|
+
<div class="p-3 mb-2 border border-info">.border.border-info</div>
|
|
1525
|
+
<div class="p-3 mb-2 border border-light bg-dark">.border.border-light (on dark bg)</div>
|
|
1526
|
+
<div class="p-3 mb-2 border border-dark">.border.border-dark</div>
|
|
1527
|
+
<div class="p-3 border border-lime">
|
|
1528
|
+
.border.border-lime
|
|
1529
|
+
<span class="badge">Custom</span>
|
|
1530
|
+
</div>
|
|
1531
|
+
</div>
|
|
1532
|
+
</div>
|
|
1533
|
+
</div>
|
|
1534
|
+
|
|
1535
|
+
<div class="code-block">
|
|
1536
|
+
<pre><code class="language-html"><!-- Border sides -->
|
|
1537
|
+
<div class="border">All borders</div>
|
|
1538
|
+
<div class="border-top">Top border</div>
|
|
1539
|
+
<div class="border-right">Right border</div>
|
|
1540
|
+
<div class="border-bottom">Bottom border</div>
|
|
1541
|
+
<div class="border-left">Left border</div>
|
|
1542
|
+
|
|
1543
|
+
<!-- Remove borders -->
|
|
1544
|
+
<div class="border border-0">No border</div>
|
|
1545
|
+
<div class="border border-top-0">No top border</div>
|
|
1546
|
+
|
|
1547
|
+
<!-- Border colors -->
|
|
1548
|
+
<div class="border border-primary">Primary border</div>
|
|
1549
|
+
<div class="border border-success">Success border</div>
|
|
1550
|
+
<div class="border border-danger">Danger border</div>
|
|
1551
|
+
<div class="border border-warning">Warning border</div></code></pre>
|
|
1552
|
+
</div>
|
|
1553
|
+
|
|
1554
|
+
<h3>Border Classes</h3>
|
|
1555
|
+
<div class="table-responsive">
|
|
1556
|
+
<table class="table table-striped">
|
|
1557
|
+
<thead>
|
|
1558
|
+
<tr>
|
|
1559
|
+
<th>Class</th>
|
|
1560
|
+
<th>Description</th>
|
|
1561
|
+
</tr>
|
|
1562
|
+
</thead>
|
|
1563
|
+
<tbody>
|
|
1564
|
+
<tr>
|
|
1565
|
+
<td><code>.border</code></td>
|
|
1566
|
+
<td>Adds border to all sides</td>
|
|
1567
|
+
</tr>
|
|
1568
|
+
<tr>
|
|
1569
|
+
<td><code>.border-top</code></td>
|
|
1570
|
+
<td>Adds border to top only</td>
|
|
1571
|
+
</tr>
|
|
1572
|
+
<tr>
|
|
1573
|
+
<td><code>.border-right</code></td>
|
|
1574
|
+
<td>Adds border to right only</td>
|
|
1575
|
+
</tr>
|
|
1576
|
+
<tr>
|
|
1577
|
+
<td><code>.border-bottom</code></td>
|
|
1578
|
+
<td>Adds border to bottom only</td>
|
|
1579
|
+
</tr>
|
|
1580
|
+
<tr>
|
|
1581
|
+
<td><code>.border-left</code></td>
|
|
1582
|
+
<td>Adds border to left only</td>
|
|
1583
|
+
</tr>
|
|
1584
|
+
<tr>
|
|
1585
|
+
<td><code>.border-0</code></td>
|
|
1586
|
+
<td>Removes all borders</td>
|
|
1587
|
+
</tr>
|
|
1588
|
+
<tr>
|
|
1589
|
+
<td><code>.border-top-0</code></td>
|
|
1590
|
+
<td>Removes top border</td>
|
|
1591
|
+
</tr>
|
|
1592
|
+
<tr>
|
|
1593
|
+
<td><code>.border-right-0</code></td>
|
|
1594
|
+
<td>Removes right border</td>
|
|
1595
|
+
</tr>
|
|
1596
|
+
<tr>
|
|
1597
|
+
<td><code>.border-bottom-0</code></td>
|
|
1598
|
+
<td>Removes bottom border</td>
|
|
1599
|
+
</tr>
|
|
1600
|
+
<tr>
|
|
1601
|
+
<td><code>.border-left-0</code></td>
|
|
1602
|
+
<td>Removes left border</td>
|
|
1603
|
+
</tr>
|
|
1604
|
+
<tr>
|
|
1605
|
+
<td><code>.border-primary</code></td>
|
|
1606
|
+
<td>Sets border color to primary</td>
|
|
1607
|
+
</tr>
|
|
1608
|
+
<tr>
|
|
1609
|
+
<td><code>.border-secondary</code></td>
|
|
1610
|
+
<td>Sets border color to secondary</td>
|
|
1611
|
+
</tr>
|
|
1612
|
+
<tr>
|
|
1613
|
+
<td><code>.border-success</code></td>
|
|
1614
|
+
<td>Sets border color to success</td>
|
|
1615
|
+
</tr>
|
|
1616
|
+
<tr>
|
|
1617
|
+
<td><code>.border-danger</code></td>
|
|
1618
|
+
<td>Sets border color to danger</td>
|
|
1619
|
+
</tr>
|
|
1620
|
+
<tr>
|
|
1621
|
+
<td><code>.border-warning</code></td>
|
|
1622
|
+
<td>Sets border color to warning</td>
|
|
1623
|
+
</tr>
|
|
1624
|
+
<tr>
|
|
1625
|
+
<td><code>.border-info</code></td>
|
|
1626
|
+
<td>Sets border color to info</td>
|
|
1627
|
+
</tr>
|
|
1628
|
+
<tr>
|
|
1629
|
+
<td><code>.border-light</code></td>
|
|
1630
|
+
<td>Sets border color to light</td>
|
|
1631
|
+
</tr>
|
|
1632
|
+
<tr>
|
|
1633
|
+
<td><code>.border-dark</code></td>
|
|
1634
|
+
<td>Sets border color to dark</td>
|
|
1635
|
+
</tr>
|
|
1636
|
+
<tr>
|
|
1637
|
+
<td><code>.border-lime</code></td>
|
|
1638
|
+
<td>
|
|
1639
|
+
Sets border color to lime
|
|
1640
|
+
<span class="badge">Custom</span>
|
|
1641
|
+
</td>
|
|
1642
|
+
</tr>
|
|
1643
|
+
</tbody>
|
|
1644
|
+
</table>
|
|
1645
|
+
</div>
|
|
1646
|
+
</section>
|
|
1647
|
+
|
|
1648
|
+
<!-- Rounded -->
|
|
1649
|
+
<section id="rounded" class="section">
|
|
1650
|
+
<h2>Rounded</h2>
|
|
1651
|
+
<p>Add rounded corners to elements with rounded utilities.</p>
|
|
1652
|
+
|
|
1653
|
+
<div class="component-demo">
|
|
1654
|
+
<div class="demo-title">Rounded Corners</div>
|
|
1655
|
+
<div class="row mb-4">
|
|
1656
|
+
<div class="col-md-6 mb-3">
|
|
1657
|
+
<div class="p-3 mb-2 bg-light border rounded">.rounded (default)</div>
|
|
1658
|
+
<div class="p-3 mb-2 bg-light border rounded-sm">.rounded-sm (smaller)</div>
|
|
1659
|
+
<div class="p-3 mb-2 bg-light border rounded-lg">.rounded-lg (larger)</div>
|
|
1660
|
+
<div class="p-3 mb-2 bg-light border rounded-circle d-flex align-items-center justify-content-center" style="width: 100px; height: 100px">.rounded-circle</div>
|
|
1661
|
+
<div class="p-3 bg-light border rounded-pill">.rounded-pill</div>
|
|
1662
|
+
</div>
|
|
1663
|
+
<div class="col-md-6 mb-3">
|
|
1664
|
+
<div class="p-3 mb-2 bg-light border rounded-0">.rounded-0 (no rounding)</div>
|
|
1665
|
+
<div class="p-3 mb-2 bg-light border rounded-top">.rounded-top</div>
|
|
1666
|
+
<div class="p-3 mb-2 bg-light border rounded-bottom">.rounded-bottom</div>
|
|
1667
|
+
<div class="p-3 mb-2 bg-light border rounded-left">.rounded-left</div>
|
|
1668
|
+
<div class="p-3 bg-light border rounded-right">.rounded-right</div>
|
|
1669
|
+
</div>
|
|
1670
|
+
</div>
|
|
1671
|
+
</div>
|
|
1672
|
+
|
|
1673
|
+
<div class="component-demo">
|
|
1674
|
+
<div class="demo-title">Rounded Examples with Colors</div>
|
|
1675
|
+
<div class="row">
|
|
1676
|
+
<div class="col-md-4 mb-3">
|
|
1677
|
+
<div class="p-3 bg-primary text-white rounded mb-2">Primary rounded</div>
|
|
1678
|
+
<div class="p-3 bg-success text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 80px; height: 80px">Circle</div>
|
|
1679
|
+
</div>
|
|
1680
|
+
<div class="col-md-4 mb-3">
|
|
1681
|
+
<div class="p-3 bg-danger text-white rounded-pill mb-2">Danger pill</div>
|
|
1682
|
+
<div class="p-3 bg-warning rounded-lg">Warning large rounded</div>
|
|
1683
|
+
</div>
|
|
1684
|
+
<div class="col-md-4 mb-3">
|
|
1685
|
+
<div class="p-3 bg-info text-white rounded-sm">Info small rounded</div>
|
|
1686
|
+
<div class="p-3 bg-dark text-white rounded-top">Dark top rounded</div>
|
|
1687
|
+
</div>
|
|
1688
|
+
</div>
|
|
1689
|
+
</div>
|
|
1690
|
+
|
|
1691
|
+
<div class="code-block">
|
|
1692
|
+
<pre><code class="language-html"><!-- Rounded corners -->
|
|
1693
|
+
<div class="rounded">Default rounded</div>
|
|
1694
|
+
<div class="rounded-sm">Small rounded</div>
|
|
1695
|
+
<div class="rounded-lg">Large rounded</div>
|
|
1696
|
+
<div class="rounded-circle">Circle</div>
|
|
1697
|
+
<div class="rounded-pill">Pill shape</div>
|
|
1698
|
+
<div class="rounded-0">No rounding</div>
|
|
1699
|
+
|
|
1700
|
+
<!-- Specific sides -->
|
|
1701
|
+
<div class="rounded-top">Top rounded</div>
|
|
1702
|
+
<div class="rounded-bottom">Bottom rounded</div>
|
|
1703
|
+
<div class="rounded-left">Left rounded</div>
|
|
1704
|
+
<div class="rounded-right">Right rounded</div></code></pre>
|
|
1705
|
+
</div>
|
|
1706
|
+
|
|
1707
|
+
<h3>Rounded Classes</h3>
|
|
1708
|
+
<div class="table-responsive">
|
|
1709
|
+
<table class="table table-striped">
|
|
1710
|
+
<thead>
|
|
1711
|
+
<tr>
|
|
1712
|
+
<th>Class</th>
|
|
1713
|
+
<th>Description</th>
|
|
1714
|
+
</tr>
|
|
1715
|
+
</thead>
|
|
1716
|
+
<tbody>
|
|
1717
|
+
<tr>
|
|
1718
|
+
<td><code>.rounded</code></td>
|
|
1719
|
+
<td>Adds 0.25rem border-radius to all corners</td>
|
|
1720
|
+
</tr>
|
|
1721
|
+
<tr>
|
|
1722
|
+
<td><code>.rounded-sm</code></td>
|
|
1723
|
+
<td>Adds 0.2rem border-radius (smaller)</td>
|
|
1724
|
+
</tr>
|
|
1725
|
+
<tr>
|
|
1726
|
+
<td><code>.rounded-lg</code></td>
|
|
1727
|
+
<td>Adds 0.3rem border-radius (larger)</td>
|
|
1728
|
+
</tr>
|
|
1729
|
+
<tr>
|
|
1730
|
+
<td><code>.rounded-circle</code></td>
|
|
1731
|
+
<td>Makes element circular (50% border-radius)</td>
|
|
1732
|
+
</tr>
|
|
1733
|
+
<tr>
|
|
1734
|
+
<td><code>.rounded-pill</code></td>
|
|
1735
|
+
<td>Makes element pill-shaped (50rem border-radius)</td>
|
|
1736
|
+
</tr>
|
|
1737
|
+
<tr>
|
|
1738
|
+
<td><code>.rounded-0</code></td>
|
|
1739
|
+
<td>Removes border-radius (square corners)</td>
|
|
1740
|
+
</tr>
|
|
1741
|
+
<tr>
|
|
1742
|
+
<td><code>.rounded-top</code></td>
|
|
1743
|
+
<td>Rounds top-left and top-right corners</td>
|
|
1744
|
+
</tr>
|
|
1745
|
+
<tr>
|
|
1746
|
+
<td><code>.rounded-bottom</code></td>
|
|
1747
|
+
<td>Rounds bottom-left and bottom-right corners</td>
|
|
1748
|
+
</tr>
|
|
1749
|
+
<tr>
|
|
1750
|
+
<td><code>.rounded-left</code></td>
|
|
1751
|
+
<td>Rounds top-left and bottom-left corners</td>
|
|
1752
|
+
</tr>
|
|
1753
|
+
<tr>
|
|
1754
|
+
<td><code>.rounded-right</code></td>
|
|
1755
|
+
<td>Rounds top-right and bottom-right corners</td>
|
|
1756
|
+
</tr>
|
|
1757
|
+
</tbody>
|
|
1758
|
+
</table>
|
|
1759
|
+
</div>
|
|
1760
|
+
</section>
|
|
1761
|
+
|
|
1762
|
+
<!-- Shadows -->
|
|
1763
|
+
<section id="shadows" class="section">
|
|
1764
|
+
<h2>Shadows</h2>
|
|
1765
|
+
<p>Add or remove shadows to elements with box-shadow utilities.</p>
|
|
1766
|
+
|
|
1767
|
+
<div class="component-demo">
|
|
1768
|
+
<div class="demo-title">Shadow Examples</div>
|
|
1769
|
+
<div class="row mb-4">
|
|
1770
|
+
<div class="col-md-4 mb-3">
|
|
1771
|
+
<div class="p-4 mb-2 bg-white shadow-none border">.shadow-none</div>
|
|
1772
|
+
<div class="p-4 bg-white shadow-sm">.shadow-sm (small shadow)</div>
|
|
1773
|
+
</div>
|
|
1774
|
+
<div class="col-md-4 mb-3">
|
|
1775
|
+
<div class="p-4 mb-2 bg-white shadow">.shadow (regular shadow)</div>
|
|
1776
|
+
<div class="p-4 bg-white shadow-lg">.shadow-lg (large shadow)</div>
|
|
1777
|
+
</div>
|
|
1778
|
+
<div class="col-md-4 mb-3">
|
|
1779
|
+
<div class="p-4 mb-2 bg-primary text-white shadow">Primary with shadow</div>
|
|
1780
|
+
<div class="p-4 bg-success text-white shadow-lg">Success with large shadow</div>
|
|
1781
|
+
</div>
|
|
1782
|
+
</div>
|
|
1783
|
+
</div>
|
|
1784
|
+
|
|
1785
|
+
<div class="component-demo">
|
|
1786
|
+
<div class="demo-title">Shadow on Hover Example</div>
|
|
1787
|
+
<p class="text-muted mb-3">Add shadow on hover with custom CSS:</p>
|
|
1788
|
+
<div class="row">
|
|
1789
|
+
<div class="col-md-6 mb-3">
|
|
1790
|
+
<div class="p-4 bg-white border rounded transition shadow-hover" style="transition: all 0.3s ease; cursor: pointer" onmouseover="this.classList.add('shadow')" onmouseout="this.classList.remove('shadow')">Hover over me to see shadow</div>
|
|
1791
|
+
</div>
|
|
1792
|
+
<div class="col-md-6 mb-3">
|
|
1793
|
+
<div class="p-4 bg-primary text-white border rounded transition shadow-hover" style="transition: all 0.3s ease; cursor: pointer" onmouseover="this.classList.add('shadow-lg')" onmouseout="this.classList.remove('shadow-lg')">Hover for large shadow</div>
|
|
1794
|
+
</div>
|
|
1795
|
+
</div>
|
|
1796
|
+
</div>
|
|
1797
|
+
|
|
1798
|
+
<div class="code-block">
|
|
1799
|
+
<pre><code class="language-html"><!-- Shadow utilities -->
|
|
1800
|
+
<div class="shadow-none">No shadow</div>
|
|
1801
|
+
<div class="shadow-sm">Small shadow</div>
|
|
1802
|
+
<div class="shadow">Regular shadow</div>
|
|
1803
|
+
<div class="shadow-lg">Large shadow</div>
|
|
1804
|
+
|
|
1805
|
+
<!-- Example with colored background -->
|
|
1806
|
+
<div class="bg-primary text-white shadow">Colored with shadow</div>
|
|
1807
|
+
|
|
1808
|
+
<!-- Shadow on hover (custom implementation) -->
|
|
1809
|
+
<div class="shadow-hover"
|
|
1810
|
+
onmouseover="this.classList.add('shadow')"
|
|
1811
|
+
onmouseout="this.classList.remove('shadow')">
|
|
1812
|
+
Hover me
|
|
1813
|
+
</div></code></pre>
|
|
1814
|
+
</div>
|
|
1815
|
+
|
|
1816
|
+
<h3>Shadow Classes</h3>
|
|
1817
|
+
<div class="table-responsive">
|
|
1818
|
+
<table class="table table-striped">
|
|
1819
|
+
<thead>
|
|
1820
|
+
<tr>
|
|
1821
|
+
<th>Class</th>
|
|
1822
|
+
<th>Description</th>
|
|
1823
|
+
</tr>
|
|
1824
|
+
</thead>
|
|
1825
|
+
<tbody>
|
|
1826
|
+
<tr>
|
|
1827
|
+
<td><code>.shadow-none</code></td>
|
|
1828
|
+
<td>Removes any box shadow</td>
|
|
1829
|
+
</tr>
|
|
1830
|
+
<tr>
|
|
1831
|
+
<td><code>.shadow-sm</code></td>
|
|
1832
|
+
<td>Adds small shadow (0.125rem blur)</td>
|
|
1833
|
+
</tr>
|
|
1834
|
+
<tr>
|
|
1835
|
+
<td><code>.shadow</code></td>
|
|
1836
|
+
<td>Adds regular shadow (0.5rem blur)</td>
|
|
1837
|
+
</tr>
|
|
1838
|
+
<tr>
|
|
1839
|
+
<td><code>.shadow-lg</code></td>
|
|
1840
|
+
<td>Adds large shadow (1rem blur)</td>
|
|
1841
|
+
</tr>
|
|
1842
|
+
</tbody>
|
|
1843
|
+
</table>
|
|
1844
|
+
</div>
|
|
1845
|
+
|
|
1846
|
+
<div class="callout info">
|
|
1847
|
+
<p>
|
|
1848
|
+
<strong>Note:</strong>
|
|
1849
|
+
Shadows work well with rounded corners and colored backgrounds. Combine
|
|
1850
|
+
<code>.shadow</code>
|
|
1851
|
+
with
|
|
1852
|
+
<code>.rounded</code>
|
|
1853
|
+
and background color classes for enhanced visual effects.
|
|
1854
|
+
</p>
|
|
1855
|
+
</div>
|
|
1856
|
+
</section>
|
|
1857
|
+
|
|
1858
|
+
<!-- Responsive -->
|
|
1859
|
+
<section id="responsive" class="section">
|
|
1860
|
+
<h2>Responsive Utilities</h2>
|
|
1861
|
+
<p>Lime CSS includes responsive utility classes for showing/hiding content based on screen size.</p>
|
|
1862
|
+
|
|
1863
|
+
<div class="component-demo">
|
|
1864
|
+
<div class="demo-title">Display Based on Screen Size</div>
|
|
1865
|
+
<div class="row mb-4">
|
|
1866
|
+
<div class="col-12 mb-3">
|
|
1867
|
+
<div class="p-3 bg-primary text-white d-none d-sm-block">Visible on small screens and up (hidden on xs)</div>
|
|
1868
|
+
</div>
|
|
1869
|
+
<div class="col-12 mb-3">
|
|
1870
|
+
<div class="p-3 bg-success text-white d-block d-md-none">Visible only on small screens (hidden on md and up)</div>
|
|
1871
|
+
</div>
|
|
1872
|
+
<div class="col-12 mb-3">
|
|
1873
|
+
<div class="p-3 bg-danger text-white d-none d-lg-block">Visible only on large screens and up</div>
|
|
1874
|
+
</div>
|
|
1875
|
+
<div class="col-12">
|
|
1876
|
+
<div class="p-3 bg-warning d-none d-md-block d-lg-none">Visible only on medium screens (hidden on small and large)</div>
|
|
1877
|
+
</div>
|
|
1878
|
+
</div>
|
|
1879
|
+
</div>
|
|
1880
|
+
|
|
1881
|
+
<div class="component-demo">
|
|
1882
|
+
<div class="demo-title">Responsive Text Alignment</div>
|
|
1883
|
+
<div class="row mb-4">
|
|
1884
|
+
<div class="col-12">
|
|
1885
|
+
<p class="p-3 bg-light border text-left text-md-center text-lg-right">Left on mobile, center on medium, right on large</p>
|
|
1886
|
+
</div>
|
|
1887
|
+
</div>
|
|
1888
|
+
</div>
|
|
1889
|
+
|
|
1890
|
+
<div class="component-demo">
|
|
1891
|
+
<div class="demo-title">Responsive Flex Utilities</div>
|
|
1892
|
+
<div class="row mb-4">
|
|
1893
|
+
<div class="col-12">
|
|
1894
|
+
<div class="d-flex flex-column flex-md-row p-3 bg-light border">
|
|
1895
|
+
<div class="p-2 bg-primary text-white mb-2 mb-md-0 mr-md-2">Flex item 1</div>
|
|
1896
|
+
<div class="p-2 bg-success text-white mr-md-2">Flex item 2</div>
|
|
1897
|
+
<div class="p-2 bg-danger text-white">Flex item 3</div>
|
|
1898
|
+
</div>
|
|
1899
|
+
</div>
|
|
1900
|
+
</div>
|
|
1901
|
+
</div>
|
|
1902
|
+
|
|
1903
|
+
<div class="code-block">
|
|
1904
|
+
<pre><code class="language-html"><!-- Responsive display -->
|
|
1905
|
+
<div class="d-none d-sm-block">Hidden on xs, visible on sm+</div>
|
|
1906
|
+
<div class="d-block d-md-none">Visible only on xs and sm</div>
|
|
1907
|
+
<div class="d-none d-lg-block">Visible only on lg+</div>
|
|
1908
|
+
|
|
1909
|
+
<!-- Responsive text alignment -->
|
|
1910
|
+
<p class="text-left text-md-center text-lg-right">
|
|
1911
|
+
Responsive text alignment
|
|
1912
|
+
</p>
|
|
1913
|
+
|
|
1914
|
+
<!-- Responsive flex -->
|
|
1915
|
+
<div class="d-flex flex-column flex-md-row">
|
|
1916
|
+
<div>Column on mobile, row on medium+</div>
|
|
1917
|
+
</div></code></pre>
|
|
1918
|
+
</div>
|
|
1919
|
+
|
|
1920
|
+
<h3>Breakpoints</h3>
|
|
1921
|
+
<div class="table-responsive">
|
|
1922
|
+
<table class="table table-striped">
|
|
1923
|
+
<thead>
|
|
1924
|
+
<tr>
|
|
1925
|
+
<th>Breakpoint</th>
|
|
1926
|
+
<th>Class Prefix</th>
|
|
1927
|
+
<th>Dimensions</th>
|
|
1928
|
+
<th>Example</th>
|
|
1929
|
+
</tr>
|
|
1930
|
+
</thead>
|
|
1931
|
+
<tbody>
|
|
1932
|
+
<tr>
|
|
1933
|
+
<td>Extra small</td>
|
|
1934
|
+
<td><code>xs</code></td>
|
|
1935
|
+
<td><576px</td>
|
|
1936
|
+
<td><code>.d-block .d-sm-none</code></td>
|
|
1937
|
+
</tr>
|
|
1938
|
+
<tr>
|
|
1939
|
+
<td>Small</td>
|
|
1940
|
+
<td><code>sm</code></td>
|
|
1941
|
+
<td>≥576px</td>
|
|
1942
|
+
<td><code>.d-sm-block</code></td>
|
|
1943
|
+
</tr>
|
|
1944
|
+
<tr>
|
|
1945
|
+
<td>Medium</td>
|
|
1946
|
+
<td><code>md</code></td>
|
|
1947
|
+
<td>≥768px</td>
|
|
1948
|
+
<td><code>.d-md-none</code></td>
|
|
1949
|
+
</tr>
|
|
1950
|
+
<tr>
|
|
1951
|
+
<td>Large</td>
|
|
1952
|
+
<td><code>lg</code></td>
|
|
1953
|
+
<td>≥992px</td>
|
|
1954
|
+
<td><code>.d-lg-inline</code></td>
|
|
1955
|
+
</tr>
|
|
1956
|
+
<tr>
|
|
1957
|
+
<td>Extra large</td>
|
|
1958
|
+
<td><code>xl</code></td>
|
|
1959
|
+
<td>≥1200px</td>
|
|
1960
|
+
<td><code>.d-xl-flex</code></td>
|
|
1961
|
+
</tr>
|
|
1962
|
+
<tr>
|
|
1963
|
+
<td>Extra extra large</td>
|
|
1964
|
+
<td><code>xxl</code></td>
|
|
1965
|
+
<td>≥1200px</td>
|
|
1966
|
+
<td><code>.d-xxl-block</code></td>
|
|
1967
|
+
</tr>
|
|
1968
|
+
</tbody>
|
|
1969
|
+
</table>
|
|
1970
|
+
</div>
|
|
1971
|
+
|
|
1972
|
+
<div class="callout">
|
|
1973
|
+
<p>
|
|
1974
|
+
<strong>Tip:</strong>
|
|
1975
|
+
Use the mobile-first approach. Style for mobile first, then use responsive classes to adjust for larger screens. For example,
|
|
1976
|
+
<code>.d-block .d-md-none</code>
|
|
1977
|
+
shows an element on mobile but hides it on medium screens and up.
|
|
1978
|
+
</p>
|
|
1979
|
+
</div>
|
|
1980
|
+
</section>
|
|
1981
|
+
|
|
1982
|
+
<!-- Customization -->
|
|
1983
|
+
<section id="customization" class="section">
|
|
1984
|
+
<h2>Customization</h2>
|
|
1985
|
+
<p>Learn how to customize Lime CSS to match your design needs.</p>
|
|
1986
|
+
|
|
1987
|
+
<div class="component-demo">
|
|
1988
|
+
<div class="demo-title">CSS Variables Version</div>
|
|
1989
|
+
<p class="mb-3">
|
|
1990
|
+
Lime CSS includes a CSS variables version (
|
|
1991
|
+
<code>lime-variables.css</code>
|
|
1992
|
+
) that allows easy customization:
|
|
1993
|
+
</p>
|
|
1994
|
+
|
|
1995
|
+
<div class="code-block">
|
|
1996
|
+
<pre><code class="language-css">/* Using CSS variables version */
|
|
1997
|
+
:root {
|
|
1998
|
+
--lime-primary: #32cd32;
|
|
1999
|
+
--lime-primary-dark: #28a428;
|
|
2000
|
+
--lime-primary-light: #80d080;
|
|
2001
|
+
|
|
2002
|
+
/* Override default variables */
|
|
2003
|
+
--border-radius: 0.5rem;
|
|
2004
|
+
--box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.1);
|
|
2005
|
+
}</code></pre>
|
|
2006
|
+
</div>
|
|
2007
|
+
</div>
|
|
2008
|
+
|
|
2009
|
+
<div class="component-demo">
|
|
2010
|
+
<div class="demo-title">Custom Build with SASS (Example)</div>
|
|
2011
|
+
<p class="mb-3">If you're using SASS, you can customize the framework:</p>
|
|
2012
|
+
|
|
2013
|
+
<div class="code-block">
|
|
2014
|
+
<pre><code class="language-scss">// Custom variables
|
|
2015
|
+
$primary: #4CAF50;
|
|
2016
|
+
$border-radius: 0.5rem;
|
|
2017
|
+
$spacer: 1.5rem;
|
|
2018
|
+
|
|
2019
|
+
// Import Lime CSS
|
|
2020
|
+
@import "lime.scss";
|
|
2021
|
+
|
|
2022
|
+
// Your custom styles
|
|
2023
|
+
.custom-class {
|
|
2024
|
+
background-color: lighten($primary, 20%);
|
|
2025
|
+
}</code></pre>
|
|
2026
|
+
</div>
|
|
2027
|
+
</div>
|
|
2028
|
+
|
|
2029
|
+
<div class="component-demo">
|
|
2030
|
+
<div class="demo-title">Overriding Styles</div>
|
|
2031
|
+
<p class="mb-3">You can override default styles by adding your own CSS after Lime CSS:</p>
|
|
2032
|
+
|
|
2033
|
+
<div class="code-block">
|
|
2034
|
+
<pre><code class="language-css">/* Override primary color */
|
|
2035
|
+
.btn-primary {
|
|
2036
|
+
background-color: #4CAF50;
|
|
2037
|
+
border-color: #4CAF50;
|
|
2038
|
+
}
|
|
2039
|
+
|
|
2040
|
+
.btn-primary:hover {
|
|
2041
|
+
background-color: #45a049;
|
|
2042
|
+
border-color: #45a049;
|
|
2043
|
+
}
|
|
2044
|
+
|
|
2045
|
+
/* Custom rounded corners */
|
|
2046
|
+
.rounded {
|
|
2047
|
+
border-radius: 0.5rem !important;
|
|
2048
|
+
}
|
|
2049
|
+
|
|
2050
|
+
/* Add custom shadow */
|
|
2051
|
+
.shadow-custom {
|
|
2052
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
|
|
2053
|
+
}</code></pre>
|
|
2054
|
+
</div>
|
|
2055
|
+
</div>
|
|
2056
|
+
|
|
2057
|
+
<h3>Customization Options</h3>
|
|
2058
|
+
<div class="table-responsive">
|
|
2059
|
+
<table class="table table-striped">
|
|
2060
|
+
<thead>
|
|
2061
|
+
<tr>
|
|
2062
|
+
<th>Feature</th>
|
|
2063
|
+
<th>Customization Method</th>
|
|
2064
|
+
<th>Example</th>
|
|
2065
|
+
</tr>
|
|
2066
|
+
</thead>
|
|
2067
|
+
<tbody>
|
|
2068
|
+
<tr>
|
|
2069
|
+
<td>Colors</td>
|
|
2070
|
+
<td>CSS variables or override classes</td>
|
|
2071
|
+
<td><code>--lime-primary: #4CAF50;</code></td>
|
|
2072
|
+
</tr>
|
|
2073
|
+
<tr>
|
|
2074
|
+
<td>Spacing</td>
|
|
2075
|
+
<td>Override SASS variables or CSS variables</td>
|
|
2076
|
+
<td><code>--spacer: 1.5rem;</code></td>
|
|
2077
|
+
</tr>
|
|
2078
|
+
<tr>
|
|
2079
|
+
<td>Border Radius</td>
|
|
2080
|
+
<td>CSS variables</td>
|
|
2081
|
+
<td><code>--border-radius: 0.5rem;</code></td>
|
|
2082
|
+
</tr>
|
|
2083
|
+
<tr>
|
|
2084
|
+
<td>Shadows</td>
|
|
2085
|
+
<td>Override CSS variables</td>
|
|
2086
|
+
<td><code>--box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,0.1);</code></td>
|
|
2087
|
+
</tr>
|
|
2088
|
+
<tr>
|
|
2089
|
+
<td>Typography</td>
|
|
2090
|
+
<td>Override CSS variables</td>
|
|
2091
|
+
<td><code>--font-family-sans-serif: 'Inter', sans-serif;</code></td>
|
|
2092
|
+
</tr>
|
|
2093
|
+
</tbody>
|
|
2094
|
+
</table>
|
|
2095
|
+
</div>
|
|
2096
|
+
|
|
2097
|
+
<div class="callout info">
|
|
2098
|
+
<p>
|
|
2099
|
+
<strong>Note:</strong>
|
|
2100
|
+
When customizing, make sure to load your custom CSS after Lime CSS to ensure your styles take precedence. For major customizations, consider using the SASS version if available.
|
|
2101
|
+
</p>
|
|
2102
|
+
</div>
|
|
2103
|
+
|
|
2104
|
+
<div class="callout warning">
|
|
2105
|
+
<p>
|
|
2106
|
+
<strong>Important:</strong>
|
|
2107
|
+
Always test your customizations across different browsers and devices to ensure consistency.
|
|
2108
|
+
</p>
|
|
2109
|
+
</div>
|
|
2110
|
+
</section>
|
|
2111
|
+
|
|
2112
|
+
<!-- Changelog -->
|
|
2113
|
+
<!-- Changelog -->
|
|
2114
|
+
<section id="changelog" class="section">
|
|
2115
|
+
<h2>Changelog</h2>
|
|
2116
|
+
<p>Version history and updates for Lime CSS Framework.</p>
|
|
2117
|
+
|
|
2118
|
+
<!-- Version 1.0.0 -->
|
|
2119
|
+
<div class="changelog-component">
|
|
2120
|
+
<div class="version-header">
|
|
2121
|
+
<h3 class="version-title">Version 1.0.0</h3>
|
|
2122
|
+
<span class="version-badge badge-latest">Latest</span>
|
|
2123
|
+
</div>
|
|
2124
|
+
|
|
2125
|
+
<p class="release-info">
|
|
2126
|
+
<strong class="release-date">Released:</strong>
|
|
2127
|
+
December 2025
|
|
2128
|
+
</p>
|
|
2129
|
+
|
|
2130
|
+
<div class="features-section">
|
|
2131
|
+
<h4 class="section-title">New Features</h4>
|
|
2132
|
+
<ul class="feature-list">
|
|
2133
|
+
<li class="feature-item">Initial release of Lime CSS Framework</li>
|
|
2134
|
+
<li class="feature-item">Complete set of utility classes</li>
|
|
2135
|
+
<li class="feature-item">Responsive 12-column grid system</li>
|
|
2136
|
+
<li class="feature-item">Components: Buttons, Forms, Tables, Alerts, Navbar</li>
|
|
2137
|
+
<li class="feature-item">Custom lime-themed color scheme</li>
|
|
2138
|
+
<li class="feature-item">Comprehensive documentation</li>
|
|
2139
|
+
</ul>
|
|
2140
|
+
</div>
|
|
2141
|
+
|
|
2142
|
+
<div class="features-section">
|
|
2143
|
+
<h4 class="section-title">Breaking Changes</h4>
|
|
2144
|
+
<ul class="feature-list">
|
|
2145
|
+
<li class="feature-item">None (initial release)</li>
|
|
2146
|
+
</ul>
|
|
2147
|
+
</div>
|
|
2148
|
+
|
|
2149
|
+
<div class="features-section">
|
|
2150
|
+
<h4 class="section-title">Bug Fixes</h4>
|
|
2151
|
+
<ul class="feature-list">
|
|
2152
|
+
<li class="feature-item">None (initial release)</li>
|
|
2153
|
+
</ul>
|
|
2154
|
+
</div>
|
|
2155
|
+
</div>
|
|
2156
|
+
|
|
2157
|
+
<!-- Upcoming Features -->
|
|
2158
|
+
<div class="changelog-component">
|
|
2159
|
+
<div class="version-header">
|
|
2160
|
+
<h3 class="version-title">Upcoming Features</h3>
|
|
2161
|
+
<span class="version-badge badge-planned">Planned</span>
|
|
2162
|
+
</div>
|
|
2163
|
+
|
|
2164
|
+
<div class="features-section">
|
|
2165
|
+
<h4 class="section-title">Version 1.1.0 (Planned)</h4>
|
|
2166
|
+
<ul class="feature-list">
|
|
2167
|
+
<li class="feature-item">Dropdown components</li>
|
|
2168
|
+
<li class="feature-item">Modal dialogs</li>
|
|
2169
|
+
<li class="feature-item">Tooltips and popovers</li>
|
|
2170
|
+
<li class="feature-item">Carousel/slider component</li>
|
|
2171
|
+
<li class="feature-item">Dark mode support</li>
|
|
2172
|
+
<li class="feature-item">Additional form components</li>
|
|
2173
|
+
</ul>
|
|
2174
|
+
</div>
|
|
2175
|
+
|
|
2176
|
+
<div class="features-section">
|
|
2177
|
+
<h4 class="section-title">Version 2.0.0 (Future)</h4>
|
|
2178
|
+
<ul class="feature-list">
|
|
2179
|
+
<li class="feature-item">SASS/SCSS source files</li>
|
|
2180
|
+
<li class="feature-item">JavaScript plugins for interactive components</li>
|
|
2181
|
+
<li class="feature-item">Extended color system</li>
|
|
2182
|
+
<li class="feature-item">Theme builder tool</li>
|
|
2183
|
+
<li class="feature-item">More layout options</li>
|
|
2184
|
+
</ul>
|
|
2185
|
+
</div>
|
|
2186
|
+
</div>
|
|
2187
|
+
|
|
2188
|
+
<!-- Migration Guide -->
|
|
2189
|
+
<div class="changelog-component">
|
|
2190
|
+
<div class="version-header">
|
|
2191
|
+
<h3 class="version-title">Migration Guide</h3>
|
|
2192
|
+
</div>
|
|
2193
|
+
|
|
2194
|
+
<p class="mb-3">Since this is the first version, there are no migration steps. Future versions will include migration guides here.</p>
|
|
2195
|
+
|
|
2196
|
+
<div class="changelog-callout callout-note">
|
|
2197
|
+
<p>
|
|
2198
|
+
<strong>Stay Updated:</strong>
|
|
2199
|
+
Check back here for updates or follow the project on GitHub for the latest news and releases.
|
|
2200
|
+
</p>
|
|
2201
|
+
</div>
|
|
2202
|
+
</div>
|
|
2203
|
+
|
|
2204
|
+
<!-- Code Block -->
|
|
2205
|
+
<div class="changelog-component">
|
|
2206
|
+
<div class="version-code">
|
|
2207
|
+
<pre><code class="language-html"><!-- Current version -->
|
|
2208
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lime-css@1.0.0/dist/lime.min.css">
|
|
2209
|
+
|
|
2210
|
+
<!-- Always check for latest version -->
|
|
2211
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lime-css/dist/lime.min.css"></code></pre>
|
|
2212
|
+
</div>
|
|
2213
|
+
</div>
|
|
2214
|
+
|
|
2215
|
+
<!-- Version Support Table -->
|
|
2216
|
+
<div class="changelog-component">
|
|
2217
|
+
<h3 class="section-title">Version Support</h3>
|
|
2218
|
+
<table class="support-table">
|
|
2219
|
+
<thead>
|
|
2220
|
+
<tr>
|
|
2221
|
+
<th>Version</th>
|
|
2222
|
+
<th>Status</th>
|
|
2223
|
+
<th>Release Date</th>
|
|
2224
|
+
<th>Support Ends</th>
|
|
2225
|
+
</tr>
|
|
2226
|
+
</thead>
|
|
2227
|
+
<tbody>
|
|
2228
|
+
<tr>
|
|
2229
|
+
<td>1.0.x</td>
|
|
2230
|
+
<td class="status-active">Active</td>
|
|
2231
|
+
<td>Dec 2025</td>
|
|
2232
|
+
<td>Dec 2026</td>
|
|
2233
|
+
</tr>
|
|
2234
|
+
<tr>
|
|
2235
|
+
<td>0.x.x</td>
|
|
2236
|
+
<td class="status-deprecated">Deprecated</td>
|
|
2237
|
+
<td>N/A</td>
|
|
2238
|
+
<td>N/A</td>
|
|
2239
|
+
</tr>
|
|
2240
|
+
</tbody>
|
|
2241
|
+
</table>
|
|
2242
|
+
</div>
|
|
2243
|
+
|
|
2244
|
+
<!-- Semantic Versioning Note -->
|
|
2245
|
+
<div class="changelog-component">
|
|
2246
|
+
<div class="changelog-callout callout-note">
|
|
2247
|
+
<p>
|
|
2248
|
+
<strong>Note:</strong>
|
|
2249
|
+
Lime CSS follows semantic versioning. Patch versions (1.0.x) contain bug fixes, minor versions (1.x.0) add new features, and major versions (x.0.0) may include breaking changes.
|
|
2250
|
+
</p>
|
|
2251
|
+
</div>
|
|
2252
|
+
</div>
|
|
2253
|
+
</section>
|
|
2254
|
+
|
|
2255
|
+
<!-- Footer -->
|
|
2256
|
+
<footer class="footer">
|
|
2257
|
+
<p>
|
|
2258
|
+
Lime CSS Framework v1.0.0 • Created by
|
|
2259
|
+
<a href="https://obydullah.com" target="_blank">Shaik Obydullah</a>
|
|
2260
|
+
</p>
|
|
2261
|
+
<p class="mt-2">Released under the MIT License • © 2025</p>
|
|
2262
|
+
</footer>
|
|
2263
|
+
</main>
|
|
2264
|
+
|
|
2265
|
+
<!-- Back to Top -->
|
|
2266
|
+
<a href="#" class="back-to-top" id="backToTop">
|
|
2267
|
+
<i class="fas fa-arrow-up"></i>
|
|
2268
|
+
</a>
|
|
2269
|
+
|
|
2270
|
+
<script>
|
|
2271
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
2272
|
+
// Mobile menu toggle
|
|
2273
|
+
const menuToggle = document.getElementById("menuToggle");
|
|
2274
|
+
const sidebar = document.getElementById("sidebar");
|
|
2275
|
+
const sidebarOverlay = document.getElementById("sidebarOverlay");
|
|
2276
|
+
|
|
2277
|
+
function toggleSidebar() {
|
|
2278
|
+
sidebar.classList.toggle("active");
|
|
2279
|
+
sidebarOverlay.classList.toggle("active");
|
|
2280
|
+
}
|
|
2281
|
+
|
|
2282
|
+
if (menuToggle) {
|
|
2283
|
+
menuToggle.addEventListener("click", toggleSidebar);
|
|
2284
|
+
}
|
|
2285
|
+
|
|
2286
|
+
if (sidebarOverlay) {
|
|
2287
|
+
sidebarOverlay.addEventListener("click", toggleSidebar);
|
|
2288
|
+
}
|
|
2289
|
+
|
|
2290
|
+
// Smooth scrolling for anchor links
|
|
2291
|
+
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
|
|
2292
|
+
anchor.addEventListener("click", function (e) {
|
|
2293
|
+
const targetId = this.getAttribute("href");
|
|
2294
|
+
|
|
2295
|
+
// Handle back-to-top link
|
|
2296
|
+
if (targetId === "#") {
|
|
2297
|
+
e.preventDefault();
|
|
2298
|
+
window.scrollTo({
|
|
2299
|
+
top: 0,
|
|
2300
|
+
behavior: "smooth",
|
|
2301
|
+
});
|
|
2302
|
+
return;
|
|
2303
|
+
}
|
|
2304
|
+
|
|
2305
|
+
// Handle regular section links (your existing code)
|
|
2306
|
+
e.preventDefault();
|
|
2307
|
+
const targetElement = document.querySelector(targetId);
|
|
2308
|
+
if (targetElement) {
|
|
2309
|
+
// Update active nav link
|
|
2310
|
+
document.querySelectorAll(".sidebar-nav a").forEach((link) => {
|
|
2311
|
+
link.classList.remove("active");
|
|
2312
|
+
});
|
|
2313
|
+
this.classList.add("active");
|
|
2314
|
+
|
|
2315
|
+
// Close sidebar on mobile
|
|
2316
|
+
if (window.innerWidth < 992) {
|
|
2317
|
+
toggleSidebar();
|
|
2318
|
+
}
|
|
2319
|
+
|
|
2320
|
+
// Scroll to section
|
|
2321
|
+
window.scrollTo({
|
|
2322
|
+
top: targetElement.offsetTop - 100,
|
|
2323
|
+
behavior: "smooth",
|
|
2324
|
+
});
|
|
2325
|
+
}
|
|
2326
|
+
});
|
|
2327
|
+
});
|
|
2328
|
+
// Back to top button
|
|
2329
|
+
const backToTop = document.getElementById("backToTop");
|
|
2330
|
+
|
|
2331
|
+
window.addEventListener("scroll", function () {
|
|
2332
|
+
if (window.pageYOffset > 300) {
|
|
2333
|
+
backToTop.style.display = "flex";
|
|
2334
|
+
} else {
|
|
2335
|
+
backToTop.style.display = "none";
|
|
2336
|
+
}
|
|
2337
|
+
|
|
2338
|
+
// Update active nav link based on scroll position
|
|
2339
|
+
const sections = document.querySelectorAll(".section");
|
|
2340
|
+
let current = "";
|
|
2341
|
+
|
|
2342
|
+
sections.forEach((section) => {
|
|
2343
|
+
const sectionTop = section.offsetTop;
|
|
2344
|
+
const sectionHeight = section.clientHeight;
|
|
2345
|
+
if (window.pageYOffset >= sectionTop - 150) {
|
|
2346
|
+
current = section.getAttribute("id");
|
|
2347
|
+
}
|
|
2348
|
+
});
|
|
2349
|
+
|
|
2350
|
+
document.querySelectorAll(".sidebar-nav a").forEach((link) => {
|
|
2351
|
+
link.classList.remove("active");
|
|
2352
|
+
if (link.getAttribute("href") === `#${current}`) {
|
|
2353
|
+
link.classList.add("active");
|
|
2354
|
+
}
|
|
2355
|
+
});
|
|
2356
|
+
});
|
|
2357
|
+
|
|
2358
|
+
// Copy code blocks
|
|
2359
|
+
document.querySelectorAll(".code-block").forEach((block) => {
|
|
2360
|
+
block.addEventListener("click", function () {
|
|
2361
|
+
const code = this.querySelector("code").innerText;
|
|
2362
|
+
navigator.clipboard.writeText(code).then(() => {
|
|
2363
|
+
const original = this.style.boxShadow;
|
|
2364
|
+
this.style.boxShadow = "0 0 0 3px rgba(50, 205, 50, 0.3)";
|
|
2365
|
+
setTimeout(() => {
|
|
2366
|
+
this.style.boxShadow = original;
|
|
2367
|
+
}, 500);
|
|
2368
|
+
});
|
|
2369
|
+
});
|
|
2370
|
+
});
|
|
2371
|
+
|
|
2372
|
+
// Initialize
|
|
2373
|
+
backToTop.style.display = "none";
|
|
2374
|
+
});
|
|
2375
|
+
</script>
|
|
2376
|
+
</body>
|
|
2377
|
+
</html>
|