@intergrav/dev.css 2.0.1 → 2.0.3
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 +45 -2
- package/dev.css +5 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -33,9 +33,52 @@ I also recommend adding a font through [intergrav/fonts](https://github.com/inte
|
|
|
33
33
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/inter.min.css">
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
+
## Elements
|
|
37
|
+
|
|
38
|
+
dev.css takes advantage of semantic HTML elements. Here are some guidelines on how these should be used for the best results.
|
|
39
|
+
|
|
40
|
+
### Header
|
|
41
|
+
|
|
42
|
+
Use the `<header>` tag to create a large header for your page. Only use this at the very top of your `<body>`, or else it may look wonky.
|
|
43
|
+
|
|
44
|
+
For the title, the header should contain an `<h1>` tag. You can also add an `<h4>` tag before the `<h1>` tag if you want to show extra information.
|
|
45
|
+
|
|
46
|
+
If you need a navigation bar, you can add a `<nav>` with `<a>` links inside it. dev.css will automatically add dividing bullet points between or before the `<a>` tags, depending on whether the user is in topbar or sidebar mode. In sidebar mode, the navigation bar will lay out into separate lines.
|
|
47
|
+
|
|
48
|
+
Optionally, you could add a `<p>` tag after the `<h1>` tag if you want to give a description of the page the user is currently on.
|
|
49
|
+
|
|
50
|
+
### Text
|
|
51
|
+
|
|
52
|
+
Wrap all body text in `<p>` tags, unless it's the sole child of another element. If you want to write quotes, you can use the `<blockquote>` tag. To highlight text, wrap it in the `<mark>` tag. Want to show code? Use `<code>` for short inline code. Use `<pre>` for code blocks. Use `<kbd>` for keyboard input.
|
|
53
|
+
|
|
54
|
+
### Button
|
|
55
|
+
|
|
56
|
+
For a link button, you can wrap the button in an `<a>` tag. Here's a code example:
|
|
57
|
+
|
|
58
|
+
```html
|
|
59
|
+
<a href="https://example.com">
|
|
60
|
+
<button>Click me!</button>
|
|
61
|
+
</a>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Details
|
|
65
|
+
|
|
66
|
+
The `<details>` element can make a toggle-able dropdown without using any JavaScript. Here's a code example:
|
|
67
|
+
|
|
68
|
+
```html
|
|
69
|
+
<details>
|
|
70
|
+
<summary>Click me!</summary>
|
|
71
|
+
<p>Lorem ipsum dolor sit amet.</p>
|
|
72
|
+
</details>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### More
|
|
76
|
+
|
|
77
|
+
To learn about other HTML elements and how to write HTML, visit [W3Schools/html](https://www.w3schools.com/html/).
|
|
78
|
+
|
|
36
79
|
## Themes
|
|
37
80
|
|
|
38
|
-
You can
|
|
81
|
+
You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. You can also copy the `boilerplate.css` and make a theme yourself. Simply apply it after the dev.css stylesheet. For example, to apply the terminal theme, put this after your main stylesheet:
|
|
39
82
|
```html
|
|
40
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@
|
|
83
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@2/theme/terminal.min.css">
|
|
41
84
|
```
|
package/dev.css
CHANGED
package/package.json
CHANGED