@intergrav/dev.css 3.5.2 → 3.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/addon/header-oneline.css +50 -50
- package/addon/header-sidebar.css +97 -98
- package/demo.html +3 -5
- package/dev.css +501 -539
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -28,7 +28,7 @@ dev.css takes advantage of semantic HTML elements. Here are some guidelines on h
|
|
|
28
28
|
|
|
29
29
|
### Header
|
|
30
30
|
|
|
31
|
-
Use the `<header>` tag to create a large header for your page. Place it at the very top of your `<body>`.
|
|
31
|
+
Use the `<header>` tag to create a large header for your page. Place it at the very top of your `<body>`. You can use an `<h1>` tag for your website title, and another `<h1>` tag outside of the header for the page title.
|
|
32
32
|
|
|
33
33
|
If you need a navigation bar, add a `<nav>` element with a `<ul>` that contains `<li>` items with `<a>` links. dev.css will automatically lay out the navigation items horizontally, with dividing bullet points between them. If you are using the `header-sidebar.css` addon, the navigation items will be laid out vertically when in sidebar mode.
|
|
34
34
|
|
package/addon/header-oneline.css
CHANGED
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
/* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
-
/* about: everything in the header on one line, works well with addon/header-sticky.css */
|
|
3
|
-
/* warn: if using with the header-sidebar addon, be sure to include this before it */
|
|
4
|
-
/* warn: i do not recommend using this if you have p or multiple nav elements in header */
|
|
5
|
-
|
|
6
|
-
header {
|
|
7
|
-
align-items: center;
|
|
8
|
-
display: flex;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
header h1,
|
|
12
|
-
header h2,
|
|
13
|
-
header h3,
|
|
14
|
-
header h4,
|
|
15
|
-
header h5,
|
|
16
|
-
header h6 {
|
|
17
|
-
white-space: nowrap;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
header * {
|
|
21
|
-
margin: 0;
|
|
22
|
-
line-height: 1.5;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
header h1,
|
|
26
|
-
header p {
|
|
27
|
-
margin-right: 1rem;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
header h2,
|
|
31
|
-
header h3,
|
|
32
|
-
header h4,
|
|
33
|
-
header h5,
|
|
34
|
-
header h6 {
|
|
35
|
-
color: var(--dc-tx-2);
|
|
36
|
-
font-weight: normal;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
header h2::after,
|
|
40
|
-
header h3::after,
|
|
41
|
-
header h4::after,
|
|
42
|
-
header h5::after,
|
|
43
|
-
header h6::after {
|
|
44
|
-
content: "/";
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/* make sure that all header elements have same font size */
|
|
48
|
-
header * {
|
|
49
|
-
font-size: 1rem !important;
|
|
50
|
-
}
|
|
1
|
+
/* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
+
/* about: everything in the header on one line, works well with addon/header-sticky.css */
|
|
3
|
+
/* warn: if using with the header-sidebar addon, be sure to include this before it */
|
|
4
|
+
/* warn: i do not recommend using this if you have p or multiple nav elements in header */
|
|
5
|
+
|
|
6
|
+
header {
|
|
7
|
+
align-items: center;
|
|
8
|
+
display: flex;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
header h1,
|
|
12
|
+
header h2,
|
|
13
|
+
header h3,
|
|
14
|
+
header h4,
|
|
15
|
+
header h5,
|
|
16
|
+
header h6 {
|
|
17
|
+
white-space: nowrap;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
header * {
|
|
21
|
+
margin: 0;
|
|
22
|
+
line-height: 1.5;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
header h1,
|
|
26
|
+
header p {
|
|
27
|
+
margin-right: 1rem;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
header h2,
|
|
31
|
+
header h3,
|
|
32
|
+
header h4,
|
|
33
|
+
header h5,
|
|
34
|
+
header h6 {
|
|
35
|
+
color: var(--dc-tx-2);
|
|
36
|
+
font-weight: normal;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
header h2::after,
|
|
40
|
+
header h3::after,
|
|
41
|
+
header h4::after,
|
|
42
|
+
header h5::after,
|
|
43
|
+
header h6::after {
|
|
44
|
+
content: "/";
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* make sure that all header elements have same font size */
|
|
48
|
+
header * {
|
|
49
|
+
font-size: 1rem !important;
|
|
50
|
+
}
|
package/addon/header-sidebar.css
CHANGED
|
@@ -1,98 +1,97 @@
|
|
|
1
|
-
/* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
-
/* about: turns the header into a sidebar if the viewport is wide enough */
|
|
3
|
-
/* warn: if using with the header-sticky or header-oneline addon, be sure to include this after it */
|
|
4
|
-
|
|
5
|
-
@media (min-width: 84rem) {
|
|
6
|
-
header {
|
|
7
|
-
all: unset;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
header * {
|
|
11
|
-
margin-top: 0;
|
|
12
|
-
margin-bottom: 0.25rem;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
header {
|
|
16
|
-
padding: 3rem 2rem;
|
|
17
|
-
padding-right: 0;
|
|
18
|
-
position: fixed;
|
|
19
|
-
top: 0;
|
|
20
|
-
left: calc(50% - ((48rem + 4rem) / 2) - (16rem));
|
|
21
|
-
width: 16rem;
|
|
22
|
-
height: calc(100% - 6rem);
|
|
23
|
-
overflow-y: auto;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
header nav ul {
|
|
27
|
-
padding-left: 1rem;
|
|
28
|
-
border-top: 1px solid var(--dc-bg-3);
|
|
29
|
-
padding-top: 1rem;
|
|
30
|
-
margin-top: 0.75rem;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
header nav ul li {
|
|
34
|
-
display: list-item;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
header nav ul li:not(:first-child)::before {
|
|
38
|
-
content: unset;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
/* hacky: reset
|
|
42
|
-
h1 {
|
|
43
|
-
font-size: 2rem !important;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
h2 {
|
|
47
|
-
font-size: 1.5rem !important;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
h3 {
|
|
51
|
-
font-size: 1.17rem !important;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
h4,
|
|
55
|
-
p,
|
|
56
|
-
a {
|
|
57
|
-
font-size: 1rem !important;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
h5 {
|
|
61
|
-
font-size: 0.83rem !important;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
h6 {
|
|
65
|
-
font-size: 0.67rem !important;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
header nav {
|
|
69
|
-
font-size: 1rem !important;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
header
|
|
74
|
-
header
|
|
75
|
-
header
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
header
|
|
82
|
-
header
|
|
83
|
-
header
|
|
84
|
-
header
|
|
85
|
-
header
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
header
|
|
92
|
-
header
|
|
93
|
-
header
|
|
94
|
-
header
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
}
|
|
1
|
+
/* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
+
/* about: turns the header into a sidebar if the viewport is wide enough */
|
|
3
|
+
/* warn: if using with the header-sticky or header-oneline addon, be sure to include this after it */
|
|
4
|
+
|
|
5
|
+
@media (min-width: 84rem) {
|
|
6
|
+
header {
|
|
7
|
+
all: unset;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
header * {
|
|
11
|
+
margin-top: 0;
|
|
12
|
+
margin-bottom: 0.25rem;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
header {
|
|
16
|
+
padding: 3rem 2rem;
|
|
17
|
+
padding-right: 0;
|
|
18
|
+
position: fixed;
|
|
19
|
+
top: 0;
|
|
20
|
+
left: calc(50% - ((48rem + 4rem) / 2) - (16rem));
|
|
21
|
+
width: 16rem;
|
|
22
|
+
height: calc(100% - 6rem);
|
|
23
|
+
overflow-y: auto;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
header nav ul {
|
|
27
|
+
padding-left: 1rem;
|
|
28
|
+
border-top: 1px solid var(--dc-bg-3);
|
|
29
|
+
padding-top: 1rem;
|
|
30
|
+
margin-top: 0.75rem;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
header nav ul li {
|
|
34
|
+
display: list-item;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
header nav ul li:not(:first-child)::before {
|
|
38
|
+
content: unset;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* hacky: reset stuff to default incase you are using header-oneline.css */
|
|
42
|
+
h1 {
|
|
43
|
+
font-size: 2rem !important;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
h2 {
|
|
47
|
+
font-size: 1.5rem !important;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
h3 {
|
|
51
|
+
font-size: 1.17rem !important;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
h4,
|
|
55
|
+
p,
|
|
56
|
+
a {
|
|
57
|
+
font-size: 1rem !important;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
h5 {
|
|
61
|
+
font-size: 0.83rem !important;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
h6 {
|
|
65
|
+
font-size: 0.67rem !important;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
header nav {
|
|
69
|
+
font-size: 1rem !important;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
header h2 header h3,
|
|
73
|
+
header h4,
|
|
74
|
+
header h5,
|
|
75
|
+
header h6 {
|
|
76
|
+
color: var(--dc-tx-1);
|
|
77
|
+
font-weight: bold;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
header h1,
|
|
81
|
+
header h2,
|
|
82
|
+
header h3,
|
|
83
|
+
header h4,
|
|
84
|
+
header h5,
|
|
85
|
+
header h6 {
|
|
86
|
+
white-space: normal;
|
|
87
|
+
line-height: 1;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
header h2::after,
|
|
91
|
+
header h3::after,
|
|
92
|
+
header h4::after,
|
|
93
|
+
header h5::after,
|
|
94
|
+
header h6::after {
|
|
95
|
+
content: unset;
|
|
96
|
+
}
|
|
97
|
+
}
|
package/demo.html
CHANGED
|
@@ -17,8 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
<body>
|
|
19
19
|
<header>
|
|
20
|
-
<
|
|
21
|
-
<h1>Demo</h1>
|
|
20
|
+
<h1>dev.css</h1>
|
|
22
21
|
<p>This is the demo page for dev.css.</p>
|
|
23
22
|
<nav>
|
|
24
23
|
<ul>
|
|
@@ -36,10 +35,9 @@
|
|
|
36
35
|
</nav>
|
|
37
36
|
</header>
|
|
38
37
|
|
|
39
|
-
<h1>
|
|
38
|
+
<h1>Demo</h1>
|
|
40
39
|
<p>
|
|
41
|
-
This is
|
|
42
|
-
elit.
|
|
40
|
+
This is the demo page for dev.css, a classless, lightweight, and accessible CSS framework!
|
|
43
41
|
</p>
|
|
44
42
|
<h2>Heading 2</h2>
|
|
45
43
|
<p>
|