https://github.com/cvan/flexbox-sort
sort a list of search results using flexbox (look mum, no DOM)
https://github.com/cvan/flexbox-sort
Last synced: 5 months ago
JSON representation
sort a list of search results using flexbox (look mum, no DOM)
- Host: GitHub
- URL: https://github.com/cvan/flexbox-sort
- Owner: cvan
- License: mit
- Created: 2014-04-01T11:05:52.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2015-02-17T10:12:14.000Z (over 11 years ago)
- Last Synced: 2025-03-24T09:50:17.980Z (about 1 year ago)
- Language: HTML
- Homepage: http://cvan.github.io/flexbox-sort/
- Size: 457 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# flexbox-sort
Sort a list of nodes without changing the DOM (thank you, flexbox).
The perfect use case: rendering filtered data, such as client-side search
results, without having to reconstitute the DOM based on sort order.
Instead of physically rearranging the existing DOM nodes,
or destroying the existing nodes and re-rendering new ones, we
can simply change them using one CSS property (flexbox's `order`).
## Caveat
If you copy the entire document to your clipboard, you'll notice that the
pasted text appears in the order in which the text is represented in the DOM,
not in the visual order set by flexbox.
You can still select the text content of each flexbox-ordered item - just not
text that overlaps to another flexbox-ordered item.
If you print the document, the visual order set by flexbox order is
preserved. But why are you printing this? And why do you still own a printer?
## Browser support
* Chrome (any)
* Firefox (any)
* Safari (any)
* Opera 12.1+
* IE 10+
* iOS (any)
* Android (any)
## Closing remark
Sic transit gloria.