tiny, simple, classless CSS framework inspired by new.css
devcss.devins.page
devins.page
framework
lightweight
css
classless
stylesheet
feat: elements section in readme
+44
-1
README.md
+44
-1
README.md
···
33
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/inter.min.css">
34
```
35
36
## Themes
37
38
-
You can also 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
```html
40
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@2/theme/terminal.min.css">
41
```
···
33
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/inter.min.css">
34
```
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
+
79
## Themes
80
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:
82
```html
83
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@2/theme/terminal.min.css">
84
```