-
Notifications
You must be signed in to change notification settings - Fork 19
/
Copy pathindex.html
155 lines (127 loc) · 6.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahunya</title>
<link rel="stylesheet" href="dist/bahunya.min.css">
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://hakanalpay.com/bahunya/" />
<meta property="og:title" content="Bahunya" />
<meta property="og:description" content="A classless CSS framework with a navbar and dark styling." />
<meta property="og:image" content="https://raw.githubusercontent.com/kimeiga/bahunya/master/src/bahunya-logo.png" />
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="500" />
<link rel="manifest" href="site.webmanifest" />
<meta name="apple-mobile-web-app-title" content="Bahunya.css" />
<meta name="application-name" content="Bahunya.css" />
<meta name="msapplication-TileColor" content="#e3bc5e" />
<meta name="theme-color" content="#e3bc5e" />
<script type="application/ld+json">
{
"@context": "http://www.schema.org",
"@type": "WebSite",
"name": "Bahunya",
"alternateName": "Bahunya",
"url": "https://hakanalpay.com/bahunya/"
}
</script>
<link rel="shortcut icon" href="src/bahunya-logo.png" type="image/x-icon">
</head>
<body>
<nav>
<a href="index.html">Bahunya</a>
<a href="./demo.html">Element Demo</a>
</nav>
<div style="text-align: center;">
<img src="src/bahunya-logo.svg" alt="Bahunya logo" style="height: 500px;">
<h1>Bahunya</h1>
</div>
<p>A <i>classless</i> CSS framework with a <i>navbar</i> and <i>dark styling</i> for around 10.46 kB.</p>
<p>Use it by pasting the following into your <code><head></code></p>
<!-- TODO: change -->
<pre
id="link-snippet"><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css"></code></pre>
<button type="button" id="copy-button">
Copy to clipboard
<span id="copy-button-feedback"></span>
</button>
<p>Now write your web app with semantic html elements and watch it look pretty right out of the box, no css classes
needed!</p>
<a href="https://github.com/kimeiga/bahunya">See the project on Github~</a>
<hr>
<h3>Goal of the Project</h3>
<p>The ultimate goal of Bahunya is to be a CSS "framework" that can provide almost everything you really need for a
web app or website without introducing any new CSS classes at all. </p>
<p>I observed that many of the most common UI elements in websites can be wholly described by semantic HTML elements
rather than `<div>`'s with classes. What's more is that most CSS frameworks tend to style these elements very
similarly. So why not remove the classes altogether and use semantic html elements (`<nav>`, `<main>`,
etc), which can help improve accessiblity for screen readers, and also make the website source easier to read and
write for developers.</p>
<p>That's the north star of this project: to get as far as possible toward that goal without introducing classes (this
will mean Bahunya might not have a grid system or other things where classes needed). If you have ideas on more
things to add without classes, feel free to contribute!</p>
<h2>How to make the navbar</h2>
<p>Example:</p>
<pre><code><nav>
<a href="/">Bahunya</a>
<a href="/test.html">test</a>
<a href="/markdown.html">markdown</a>
</nav></code></pre>
<p>What about a navbar with nested lists?</p>
<pre><code><nav>
<ul>
<li>
<a href="#text">Text</a>
<ul>
<li><a href="#text__headings">Headings</a></li>
<li><a href="#text__paragraphs">Paragraphs</a></li>
<li><a href="#text__blockquotes">Blockquotes</a></li>
...
</ul>
</li>
<li>
<a href="#embedded">Embedded content</a>
<ul>
<li><a href="#embedded__images">Images</a></li>
<li><a href="#embedded__audio">Audio</a></li>
<li><a href="#embedded__video">Video</a></li>
...
</ul>
</li>
<li>
<a href="#forms">Form elements</a>
<ul>
<li><a href="#forms__input">Input fields</a></li>
<li><a href="#forms__select">Select menus</a></li>
<li><a href="#forms__checkbox">Checkboxes</a></li>
...
</ul>
</li>
</ul>
</nav></code></pre>
<p>As you can see, the navbar works whether you use a unordered list with sub-unordered-lists
(<code><ul></code>'s with <code><li></code>'s) or if you just put the <code><a></code>'s right
under the main <code><nav></code>. Both work, although I think the latter option might be better for screen
readers.</p>
<footer>
<p><small>This project was based largely on Water.css and Tacit; credit to the creators.</small></p>
<p><small>As for me, I'm <a href="https://hakanalpay.com">Kimeiga</a> and I made this to help me get web apps off
the ground without worrying too much styling.</small></p>
</footer>
<script defer>
const copyButton = document.getElementById('copy-button')
const copyButtonFeedback = document.getElementById('copy-button-feedback')
copyButton.addEventListener('click', () => {
const clipboard = navigator.clipboard || window.clipboard
const snippetText = document.querySelector(`#link-snippet code`).textContent
clipboard.writeText(snippetText)
.then(() => { copyButtonFeedback.textContent = '✔' })
.catch(() => { copyButtonFeedback.textContent = '❌' })
.then(() => setTimeout(() => { copyButtonFeedback.textContent = '' }, 1000))
})
</script>
</body>
</html>