-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.template.html
255 lines (255 loc) · 9.84 KB
/
index.template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html>
<head>
<title>Aluminum CSS</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<link rel="icon" type="image/jpeg" href="/icon.jpg" />
<link rel="stylesheet" type="text/css" href="dist/aluminium.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
</head>
<body class="alu-all">
<div class="container">
<h1>
<div class="row align-items gap-md">
<img src="/icon.jpg" alt="Aluminum CSS" class="mr-lg" style="width: 100%; max-width: 64px;" />
<div>
Aluminum CSS
</div>
</div>
</h1>
<p>
Aluminum CSS is a minimal CSS boilerplate make your page shine.
</p>
<div class="row gap-sm">
<a href="https://github.com/pr0gramista/aluminiumcss">GitHub</a>
<span>|</span>
<a href="https://aluminiumcss.pr0gramista.com/cute">Cute demo</a>
<span>|</span>
<a href="https://www.npmjs.com/package/aluminiumcss">npm</a>
</div>
<h3 id="installation">Installation</h3>
<p>Aluminium CSS works best as a single link tag in the `<head>` of your HTML document:</p>
<pre><code class="language-html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aluminiumcss/dist/aluminium.min.css"></pre></code>
<p>
You can also install Aluminium CSS via NPM:
</p>
<pre><code class="language-bash">npm install aluminiumcss</code></pre>
<p>
And then import it in your JS file, assuming you are using a bundler:
</p>
<pre><code class="language-javascript">// In your JS file with a bundler
require('aluminiumcss/dist/aluminium.min.css')</code></pre>
</code></pre>
<p>
To apply styles <code>.alu-all</code> to your body class or apply <code>.alu</code> to particular elements.
</p>
<h3 id="customization">Customization</h3>
<p>
Aluminum CSS is easily customizable via a <a href="https://github.com/pr0gramista/aluminiumcss/blob/main/style.css">selection of CSS variables</a>. Check <a href="/cute">the cutest demo</a> to see how far you can get with it.
</p>
<pre><code class="language-html">{{customization}}</code></pre>
<h3 id="spacing">Spacing - margins, paddings, gaps</h3>
<p>
Aluminum CSS uses a consistent spacing system that ensures good readability and visual balance.
There are four sizes: <code>sm, md, lg, xl</code>. To apply margins, paddings, gaps you can use Tailwind CSS like classes like <code>pt-sm</code> or <code>gap-md</code>.
There are also classes for positioning elements like <code>top-sm</code> or <code>right-xl</code>.
</p>
{{{positioning}}}
<pre><code class="language-html my-md">{{positioning}}</code></pre>
<h3 id="selective">Selective styling</h3>
<p>
Aluminium CSS is designed to be easily used with other CSS styles. You can apply it globally by putting the <code>.alu-all</code> class on the <code>body</code> element, or you can use it selectively by adding <code>.alu</code> class to specific elements.
</p>
<p>
If you are using <code>.alu-all</code> but you want to remove styling from certain elements you can apply <code>.not-alu</code> to particular elements or <code>.not-alu-all</code> to their parent.
</p>
<div class="column gap-md">
{{{selective}}}
</div>
<pre><code class="language-html my-md">{{selective}}</code></pre>
<h3 id="link">Link</h3>
<p>
There are 3 links types. By default the links are visible without interaction.
To make your link more subtle you can use <code>.interactive</code> class.
Hidden links can be marked using <code>.non-interactive</code> class.
</p>
<a href="#link">Link</a>
<a href="#link" class="interactive">Link interactive</a>
<a href="#link" class="non-interactive">Link non-interactive</a>
<pre><code class="language-html my-md"><a href="#link">Link</a>
<a class="interactive" href="#link">Link interactive</a>
<a class="non-interactive" href="#link">Link interactive</a></code></pre>
<h3 id="abbr">Abbreviation</h3>
<p>
Abbreviation can be used to show an acronym or abbreviation. Hover over the abbreviation to see the full text.
</p>
<p>
<abbr title="HyperText Markup Language">HTML</abbr> is the code that is used to structure a web page and its content.
</p>
<pre><code class="language-html my-md"><abbr title="HyperText Markup Language">HTML</abbr> is the code that is used to structure a web page and its content.</code></pre>
<h3 id="blockquote">Blockquote</h3>
{{{blockquote}}}
<pre><code class="language-html my-md">{{blockquote}}</code></pre>
<h3 id="progress">Progress</h3>
<p>
While the <code>progress</code> element has ability to show indeterminate progress, it is not supported by Aluminium CSS. To show indeterminate progress you can use the <a href="#spinner">spinner</a> element instead.
</p>
{{{progress}}}
<pre><code class="language-html my-md">{{progress}}</code></pre>
<h3 id="spinner">Spinner</h3>
{{{spinner}}}
<pre><code class="language-html my-md">{{spinner}}</code></pre>
<h3 id="debug">
Debug
</h3>
<p>
Debug is a div element with minimum size and a bit of color. Useful for debugging.
</p>
<div class="debug">Debug</div>
<pre><code class="language-html my-md"><div class="debug">Debug</div></code></pre>
<h3 id="table">Table</h3>
{{{table}}}
<pre><code class="language-html my-md">{{table}}</code></pre>
<h3 id="input">
Input
</h3>
{{{input}}}
<pre><code class="language-html my-md">{{input}}</code></pre>
<h3 id="textarea">
Textarea
</h3>
<p>
Textarea is a multi-line text field element
</p>
{{{textarea}}}
<pre><code class="language-html my-md">{{textarea}}</code></pre>
<h3 id="checkbox">
Checkbox
</h3>
<div class="column gap-sm">
{{{checkbox}}}
</div>
<pre><code class="language-html my-md">{{checkbox}}</code></pre>
<h3 id="radio">
Radio
</h3>
<div class="column gap-sm">
{{{radio}}}
</div>
<pre><code class="language-html my-md">{{radio}}</code></pre>
<h3 id="button">
Button
</h3>
<div class="row gap-md">
{{{button}}}
</div>
<pre><code class="language-html my-md">{{button}}</code></pre>
<h3 id="select">
Select
</h3>
{{{select}}}
<pre><code class="language-html my-md">{{select}}</code></pre>
<h3 id="row">
Row
</h3>
<p>
Row is a flex container
</p>
{{{row}}}
<pre><code class="language-html my-md">{{row}}</code></pre>
<h3 id="column">
Column
</h3>
<p>
Column is a flex container
</p>
{{{column}}}
<pre><code class="language-html my-md">{{column}}</code></pre>
</p>
<h3 id="centered">
Centered row/column
</h3>
<p>
Centered items applies either one or both of <code>justify-content: center; align-items: center;</code>
</p>
{{{centered}}}
<pre><code class="language-html my-md">{{centered}}</code></pre>
<h3 id="spacer">Spacer</h3>
<p>
Spacer is a div element that fills the available space in a flexbox container
</p>
{{{spacer}}}
<pre><code class="language-html my-md">{{spacer}}</code></pre>
</div>
<h3 id="container">
Container
</h3>
<p>
Container is just a div with maximum width and auto margins. There is also a bit of padding added.
</p>
<p>
Note: This section is not in the container div above to show how it works.
</p>
{{{container}}}
</div>
<div class="container">
<pre><code class="language-html my-md">{{container}}</code></pre>
<h3 id="details">Details</h3>
<p>
Details is a collapsible element
</p>
<div class="column gap-md" style="max-width: 500px">
{{{details}}}
</div>
<pre><code class="language-html my-md">{{details}}</code></pre>
<h3 id="dialog">
Dialog
</h3>
<p>
Dialog is a modal dialog element
</p>
{{{dialog}}}
<pre><code class="language-html my-md">{{dialog}}</code></pre>
</div>
<div class="container">
<h3 id="grid">Grid</h3>
<p>
A responsive grid system. The grid is 12 columns wide and will stack on smaller screens.
The classes mimic the Bootstrap grid system, but the implementation is based on CSS grid instead.
</p>
{{{grid}}}
<pre><code class="language-html my-md">{{grid}}</code></pre>
<p>
If no class is applied the column will be 1/12th of the grid.
</p>
{{{gridDefault}}}
<pre><code class="language-html my-md">{{gridDefault}}</code></pre>
<h3 id="nav">
Navbar
</h3>
<p>
Navbar is a navigation bar element
</p>
</div>
{{{nav}}}
<div class="container">
<pre><code class="language-html my-md">{{nav}}</code></pre>
<h3 id="footer">
Footer
</h3>
<p>
Footer is a footer element
</p>
<pre><code class="language-html my-md">{{footer}}</code></pre>
</div>
{{{footer}}}
<script>hljs.highlightAll();</script>
</body>
</html>