-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
137 lines (126 loc) · 5.16 KB
/
demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sustainable.css Demo</title>
<link rel="stylesheet" href="css/sustainable.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1 style="text-align: center; color: var(--color-10);">Sustainable.css</h1>
<p>A long lasting simple CSS framework for semantic HTML.</p>
<nav style="display: flex; justify-content: space-between; margin: 0.75rem 0;">
<a href="/sustainable-css/">Home</a>
<a href="/sustainable-css/demo.html">Demo</a>
</nav>
</header>
<main>
<h2>Header and paragraphs</h2>
<p>Header do not have margins by default to avoid <a href="https://www.joshwcomeau.com/css/rules-of-margin-collapse/" target="_blank">margin collapse</a> but paragraphs have a small bottom margin.</p>
<p>Margins are too opinionated and depends heavily in the layout. So I let users play with it.</p>
<h2>Details</h2>
<details>
<summary>Click to expand</summary>
<p>A little bit or margin is <mark>good enough</mark></p>
</details>
<h2>Anchors and links</h2>
<a href="#">Default font color that becomes strong on hovering and accented underline.</a>
<h2>Forms</h2>
<p>
Forms layout are always customized and the styling is highly coupled with the layout. Example: margins of labels are
highly coupled with the decision on puting them above the input or besides it. That's why Sustainable.css do not add
a lot of CSS to inputs and labels.
</p>
<p>
We focus on giving a small styling to the inputs elements and let the user define how to layout it and further customize it.
We do recommend using the sadly forgotten fieldset element.
</p>
<p>
The following form is just 10 lines of CSS, <mark>good enough</mark>.
</p>
<form>
<fieldset style="display: grid">
<legend>Monster Sight Form</legend>
<label for="name">Your name:</label>
<input type="text" id="name" name="name" placeholder="Tentáculos Feroces" required>
<label for="email">Your email:</label>
<input type="email" id="email" name="email" placeholder="[email protected]">
<label for="password">Your password:</label>
<input type="password" id="password" name="password">
<label for="message">Describe the monster you saw:</label>
<textarea id="message" rows="5" placeholder="Tentáculos Feroces erra horrible y quería comerme!"></textarea>
<label for="date">Last time seen:</label>
<input type="date" id="date">
<label for="select">Monster form:</label>
<select id="select">
<option value="1">Pulp</option>
<option value="2">Squid</option>
</select>
<label for="avatar">Upload the sight evidence:</label>
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" />
<label for="tentacles">Number of tentacles (10-100):</label>
<input type="number" id="tentacles" name="tentacles" min="10" max="100" />
<fieldset>
<legend>
Have you seen it's color?
</legend>
<div>
<input type="checkbox" id="purple" name="drone" value="purple" checked />
<label for="purple">Purple</label>
</div>
<div>
<input type="checkbox" id="brown" name="drone" value="brown" />
<label for="brown">Brown</label>
</div>
<div>
<input type="checkbox" id="grey" name="drone" value="grey" />
<label for="grey">Grey</label>
</div>
</fieldset>
<label for="volume">Size of the tentacles</label>
<input type="range" id="volume" name="volume" min="0" max="100" />
<input type="submit" value="Submit">
<button type="reset">Reset</button>
<button>Cancel</button>
</fieldset>
</form>
<h2>Mark</h2>
<p><mark>This is a highlighted text.</mark></p>
<h2>Articles</h2>
<p>
I add a border and align to the right the footer.
Usages notes in <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article#usage_notes">MDN Web Docs</a>
</p>
<article>
<h3>Main Article Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum veritatis doloremque eum omnis corporis mollitia
tenetur! <mark>Provident quasi praesentium vel, alias saepe quisquam quae</mark> hic debitis expedita totam eum libero?</p>
<footer>
<p>Written by <a href="#">John Doe</a> - Posted on <time datetime="2020-01-01">January 1, 2020</time></p>
</footer>
</article>
<h2>Block quote</h2>
<blockquote cite="https://www.huxley.net/bnw/four.html">
<p>Words can be like X-rays, if you use them properly—they'll go through anything. You read and you're pierced.</p>
<footer>—Aldous Huxley, <cite>Brave New World</cite></footer>
</blockquote>
<h2>Lists</h2>
<ol>
<li>first item</li>
<li>
second item
<!-- closing </li> tag is not here! -->
<ul>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ul>
</li>
<!-- Here's the closing </li> tag -->
<li>third item</li>
</ol>
</main>
</body>
</html>