https://github.com/jpdevries/deets
Pure HTML5 Tree Component. Works without JavaScript.
https://github.com/jpdevries/deets
Last synced: about 1 month ago
JSON representation
Pure HTML5 Tree Component. Works without JavaScript.
- Host: GitHub
- URL: https://github.com/jpdevries/deets
- Owner: jpdevries
- License: mit
- Created: 2016-10-12T10:16:24.000Z (over 9 years ago)
- Default Branch: gh-pages
- Last Pushed: 2016-10-12T16:05:42.000Z (over 9 years ago)
- Last Synced: 2025-10-25T13:58:19.618Z (5 months ago)
- Language: HTML
- Size: 10.7 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# deets
HTML5 tree component that works entirely without JavaScript and web fonts.
[Try it out](http://jpdevries.github.io/deets).
## Usage
[HTML5 Rocks](https://www.html5rocks.com). That's how this asynchronous component is architected with pure HTML5 and a sprinkle of CSS3.
### Pattern
You'll need to wrap everything in a `` tag so create one of those:
```html
```
Next create a summary. Summaries define the persisting area of each element in the tree.
```html
```
And the add the stuff to display when the element is expanded! This can be any HTML so by nesting `` you can create a familiar tree component that allows each item to act as a container.
```html
HTML5
```
[Visit this example](http://jpdevries.github.io/deets).
### icons
There are a few patterns to add icons.
#### SVG Use
Our [icon example](https://jpdevries.github.io/deets/icons.html) uses a SVG `` pattern.
##### HTML
```html
```
##### CSS
```css
details[open] > summary > a .folder {
display:none; /* hide the folder icon when open */
}
details[open] > summary > a .folder-open {
display:inline-block; /* show the folder-open icon when open */
}
```
##### Pros
- Any number of SVG icons can be contained in a sprite file or inlined in the HTML
- Accessible and semantic delivery of icons
- Dynamic color with `color:currentColor`
- Can [color an icon with CSS Properties](https://codepen.io/jpdevries/pen/MKbrrX)
##### Cons
- Markup weight
##### Costs
- an HTTP request
#### CSS Pseudo
Our [CSS Pseudo example](https://jpdevries.github.io/deets/icons-pseudo.html) is CSS only and therefore the icons aren't delivered semantically or accessible. But depending on your situation they may not need to be. For example, a screen reader user may not need to be informed there's an icon that indicates a folder is open if their assistive technology had already indicated that.
The CSS pattern requires no markup.
##### CSS
```css
summary > a:before {
content:' ';
position:absolute;
left:0;
bottom:0;
width:1em;
top:0;
display:block;
background:transparent url('assets/img/folder.svg') no-repeat center center;
background-size:contain;
}
details[open] > summary > a:before {
background:transparent url('assets/img/folder-open.svg') no-repeat center center;
}
```
##### Pros
- Light HTML
- Style where style goes
##### Cons
- Unsemantic icons
- Can't change icon color(s) with CSS
##### Costs
- Multiple HTTP requests
_These may not be cons or costly if you are serving over HTTP/2 and icons don't need to be semantic or accessible_
Yes you [could inline the icons with data URIs but probably don't](https://css-tricks.com/probably-dont-base64-svg/)?
### `no-marker`
If this attribute is present on the `` node or any parent node the triangular marker which indicates if summaries are expanded or closed will not be displayed.