Skip to content

Commit ca412ad

Browse files
feat: add css reset
Signed-off-by: Henry Gressmann <[email protected]>
1 parent 227b9b0 commit ca412ad

File tree

10 files changed

+230
-0
lines changed

10 files changed

+230
-0
lines changed

.changeset/violet-numbers-sip.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@explodingcamera/css": patch
3+
---
4+
5+
initial release

packages/css/all.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "./reset.css";
2+
@import "./base.css";

packages/css/all.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import "./all.css"

packages/css/base.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/* some opinionated defaults for my projects */
2+
3+
html {
4+
min-height: 100vh;
5+
min-height: 100dvh;
6+
display: flex;
7+
}
8+
9+
body {
10+
flex: 1;
11+
margin: 0;
12+
display: flex;
13+
flex-direction: column;
14+
}
15+
16+
h1,
17+
h2,
18+
h3,
19+
h4,
20+
h5,
21+
h6,
22+
p {
23+
margin: 0;
24+
padding: 0;
25+
}
26+
27+
button {
28+
cursor: pointer;
29+
}

packages/css/base.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import "./base.css"

packages/css/index.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>test</title>
7+
<link rel="stylesheet" href="./index.css" />
8+
</head>
9+
<body>
10+
<p>
11+
<button>asdf</button>
12+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit
13+
voluptate harum voluptates aliquid, temporibus, recusandae praesentium
14+
numquam optio aut dolore culpa vitae quibusdam architecto excepturi
15+
corporis perspiciatis. Nisi, temporibus nobis? Lorem ipsum dolor sit amet,
16+
consectetur adipisicing elit. Reprehenderit voluptate harum voluptates
17+
aliquid, temporibus, recusandae praesentium numquam optio aut dolore culpa
18+
vitae quibusdam architecto excepturi corporis perspiciatis. Nisi,
19+
temporibus nobis? Lorem ipsum dolor sit amet, consectetur adipisicing
20+
elit. Reprehenderit voluptate harum voluptates aliquid, temporibus,
21+
recusandae praesentium numquam optio aut dolore culpa vitae quibusdam
22+
architecto excepturi corporis perspiciatis. Nisi, temporibus nobis? Lorem
23+
ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit
24+
voluptate harum voluptates aliquid, temporibus, recusandae praesentium
25+
numquam optio aut dolore culpa vitae quibusdam architecto excepturi
26+
corporis perspiciatis. Nisi, temporibus nobis? Lorem ipsum dolor sit amet,
27+
consectetur adipisicing elit. Reprehenderit voluptate harum voluptates
28+
aliquid, temporibus, recusandae praesentium numquam optio aut dolore culpa
29+
vitae quibusdam architecto excepturi corporis perspiciatis. Nisi,
30+
temporibus nobis? Lorem ipsum dolor sit amet, consectetur adipisicing
31+
elit. Reprehenderit voluptate harum voluptates aliquid, temporibus,
32+
recusandae praesentium numquam optio aut dolore culpa vitae quibusdam
33+
architecto excepturi corporis perspiciatis. Nisi, temporibus nobis? Lorem
34+
ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit
35+
voluptate harum voluptates aliquid, temporibus, recusandae praesentium
36+
numquam optio aut dolore culpa vitae quibusdam architecto excepturi
37+
corporis perspiciatis. Nisi, temporibus nobis? Lorem ipsum dolor sit amet,
38+
consectetur adipisicing elit. Reprehenderit voluptate harum voluptates
39+
aliquid, temporibus, recusandae praesentium numquam optio aut dolore culpa
40+
vitae quibusdam architecto excepturi corporis perspiciatis. Nisi,
41+
temporibus nobis? Lorem ipsum dolor sit amet, consectetur adipisicing
42+
elit. Reprehenderit voluptate harum voluptates aliquid, temporibus,
43+
recusandae praesentium numquam optio aut dolore culpa vitae quibusdam
44+
architecto excepturi corporis perspiciatis. Nisi, temporibus nobis? Lorem
45+
ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit
46+
voluptate harum voluptates aliquid, temporibus, recusandae praesentium
47+
numquam optio aut dolore culpa vitae quibusdam architecto excepturi
48+
corporis perspiciatis. Nisi, temporibus nobis? Lorem ipsum dolor sit amet,
49+
consectetur adipisicing elit. Reprehenderit voluptate harum voluptates
50+
aliquid, temporibus, recusandae praesentium numquam optio aut dolore culpa
51+
vitae quibusdam architecto excepturi corporis perspiciatis. Nisi,
52+
temporibus nobis? Lorem ipsum dolor sit amet, consectetur adipisicing
53+
elit. Reprehenderit voluptate harum voluptates aliquid, temporibus,
54+
recusandae praesentium numquam optio aut dolore culpa vitae quibusdam
55+
architecto excepturi corporis perspiciatis. Nisi, temporibus nobis? Lorem
56+
ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit
57+
voluptate harum voluptates aliquid, temporibus, recusandae praesentium
58+
numquam optio aut dolore culpa vitae quibusdam architecto excepturi
59+
corporis perspiciatis. Nisi, temporibus nobis?
60+
</p>
61+
</body>
62+
</html>

packages/css/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import "./all.css"

packages/css/package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "@explodingcamera/css",
3+
"version": "0.0.1",
4+
"description": "",
5+
"keywords": [],
6+
"homepage": "https://github.com/explodingcamera/esm/tree/main/packages/css",
7+
"repository": "https://github.com/explodingcamera/esm",
8+
"license": "MIT",
9+
"author": "Henry Gressmann <[email protected]> (https://henrygressmann.de)",
10+
"type": "module",
11+
"exports": {
12+
"./reset": "./reset.js",
13+
"./reset.css": "./reset.css",
14+
"./base": "./base.js",
15+
"./base.css": "./base.css",
16+
".": "./index.js",
17+
"./all.css": "./all.css"
18+
},
19+
"main": "dist/index.cjs",
20+
"module": "dist/index.js",
21+
"types": "dist/index.d.ts",
22+
"scripts": {
23+
"build": "exit 0"
24+
}
25+
}

packages/css/reset.css

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
/*! based on modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
2+
3+
*,
4+
::before,
5+
::after {
6+
box-sizing: border-box;
7+
}
8+
9+
html {
10+
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
11+
"Apple Color Emoji", "Segoe UI Emoji";
12+
line-height: 1.15;
13+
-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
14+
tab-size: 4; /* Use a more readable tab size */
15+
}
16+
17+
button,
18+
input,
19+
optgroup,
20+
select,
21+
textarea {
22+
font-family: inherit;
23+
font-size: 100%;
24+
line-height: 1.15;
25+
margin: 0;
26+
}
27+
28+
legend {
29+
padding: 0;
30+
}
31+
32+
code,
33+
kbd,
34+
samp,
35+
pre {
36+
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
37+
monospace; /* 1 */
38+
font-size: 1em; /* 2 */
39+
}
40+
41+
table {
42+
text-indent: 0;
43+
border-color: inherit;
44+
}
45+
46+
/* browser specific fixes */
47+
48+
summary {
49+
display: list-item; /* Add the correct display in Chrome and Safari. */
50+
}
51+
52+
::-webkit-search-decoration {
53+
-webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS. */
54+
}
55+
56+
::-webkit-file-upload-button {
57+
-webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari */
58+
font: inherit; /* Change font properties to 'inherit' in Safari */
59+
}
60+
61+
[type="search"] {
62+
-webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
63+
outline-offset: -2px; /* Correct the outline style in Safari */
64+
}
65+
66+
::-webkit-inner-spin-button,
67+
::-webkit-outer-spin-button {
68+
height: auto; /* Correct the cursor style of increment and decrement buttons in Safari. */
69+
}
70+
71+
progress {
72+
vertical-align: baseline; /* Add the correct vertical alignment in Chrome and Firefox. */
73+
}
74+
75+
button,
76+
[type="button"],
77+
[type="reset"],
78+
[type="submit"] {
79+
-webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari. */
80+
}
81+
82+
::-moz-focus-inner {
83+
border-style: none;
84+
padding: 0;
85+
}
86+
87+
:-moz-focusring {
88+
outline: 1px dotted ButtonText;
89+
}
90+
91+
:-moz-ui-invalid {
92+
box-shadow: none;
93+
}
94+
95+
button,
96+
select {
97+
text-transform: none; /* Remove the inheritance of text transform in Edge and Firefox. */
98+
}
99+
100+
b,
101+
strong {
102+
font-weight: bolder; /* Add the correct font weight in Edge and Safari. */
103+
}

packages/css/reset.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import "./reset.css"

0 commit comments

Comments
 (0)