-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.template.html
246 lines (246 loc) · 9.25 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
<!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 mv-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>.notalu</code> to the elements or their parent.
</p>
<div class="column gap-md">
{{{selective}}}
</div>
<pre><code class="language-html mv-md">{{selective}}</code></pre>
<h3 id="link">Link</h3>
<a href="#link">Link</a>
<pre><code class="language-html mv-md"><a href="#link">Link</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 mv-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 mv-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 mv-md">{{progress}}</code></pre>
<h3 id="spinner">Spinner</h3>
{{{spinner}}}
<pre><code class="language-html mv-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 mv-md"><div class="debug">Debug</div></code></pre>
<h3 id="table">Table</h3>
{{{table}}}
<pre><code class="language-html mv-md">{{table}}</code></pre>
<h3 id="input">
Input
</h3>
{{{input}}}
<pre><code class="language-html mv-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 mv-md">{{textarea}}</code></pre>
<h3 id="checkbox">
Checkbox
</h3>
<div class="column gap-sm">
{{{checkbox}}}
</div>
<pre><code class="language-html mv-md">{{checkbox}}</code></pre>
<h3 id="radio">
Radio
</h3>
<div class="column gap-sm">
{{{radio}}}
</div>
<pre><code class="language-html mv-md">{{radio}}</code></pre>
<h3 id="button">
Button
</h3>
<div class="row gap-md">
{{{button}}}
</div>
<pre><code class="language-html mv-md">{{button}}</code></pre>
<h3 id="select">
Select
</h3>
{{{select}}}
<pre><code class="language-html mv-md">{{select}}</code></pre>
<h3 id="row">
Row
</h3>
<p>
Row is a flex container
</p>
{{{row}}}
<pre><code class="language-html mv-md">{{row}}</code></pre>
<h3 id="column">
Column
</h3>
<p>
Column is a flex container
</p>
{{{column}}}
<pre><code class="language-html mv-md">{{column}}</code></pre>
</p>
<h3 id="centered">
Centered row/column
</h3>
<p>
Centered items applies: <code>justify-content: center; align-items: center;</code>
</p>
{{{centered}}}
<pre><code class="language-html mv-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 mv-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 mv-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 mv-md">{{details}}</code></pre>
<h3 id="dialog">
Dialog
</h3>
<p>
Dialog is a modal dialog element
</p>
{{{dialog}}}
<pre><code class="language-html mv-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 mv-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 mv-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 mv-md">{{nav}}</code></pre>
<h3 id="footer">
Footer
</h3>
<p>
Footer is a footer element
</p>
<pre><code class="language-html mv-md">{{footer}}</code></pre>
</div>
{{{footer}}}
<script>hljs.highlightAll();</script>
</body>
</html>