-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
remove container query builtin support
- Loading branch information
1 parent
7a5ccbc
commit 88dc34e
Showing
7 changed files
with
19 additions
and
187 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -53,23 +53,6 @@ let node2 = greet('World') | |
You have all the [modules documented by Snabbdom](https://github.com/snabbdom/snabbdom#modules-documentation) loaded by default. See [Directives](#directives) for how to use modules, and [`snabby/create`](#snabby_create) for loading custom modules | ||
|
||
|
||
### Container Queries | ||
|
||
Container Queries are one of the most requested features of all time in CSS. It enables people that want to build responsive | ||
components by allowing classes to be attached to DOM elements based on their width, as opposed to `@media` queries, which only | ||
operate on the viewport width. | ||
|
||
In snabby you can specify a series of rules for setting classes on an element based on minimum width: | ||
|
||
```js | ||
html`<div data-breakpoints='{ "BP1": 400, "BP2": 600, "BP3": 1200 }'> Some content here </div>` | ||
``` | ||
|
||
If the div is 700px wide, it will have `BP2` in it's classlist. Only the class with the highest matching rule will be added, regardless of what order the rules are declared in. | ||
|
||
Internally, this is implemented with a ResizeObserver. As of version 5, we no longer bundle a ResizeObserver ponyfill with snabby. You should polyfill ResizeObserver yourself if you plan on using snabby on very old browsers. https://www.npmjs.com/package/resize-observer-polyfill | ||
|
||
|
||
### Directives | ||
|
||
Directives are attributes that begin with `@`, and let you interact with Snabbdom modules. In general, the form is `@<name>:[prop]:...`. | ||
|
@@ -151,22 +134,20 @@ Create a `snabby` tag function with your own modules. | |
Here is an equivalent to `snabby` for example: | ||
|
||
```js | ||
import create from './create.js' | ||
import { attributesModule } from 'https://cdn.jsdelivr.net/npm/[email protected]/build/package/modules/attributes.js'; | ||
import { classModule } from 'https://cdn.jsdelivr.net/npm/[email protected]/build/package/modules/class.js'; | ||
import { propsModule } from 'https://cdn.jsdelivr.net/npm/[email protected]/build/package/modules/props.js'; | ||
import { styleModule } from 'https://cdn.jsdelivr.net/npm/[email protected]/build/package/modules/style.js'; | ||
import { eventListenersModule } from 'https://cdn.jsdelivr.net/npm/[email protected]/build/package/modules/eventlisteners.js'; | ||
import containerQueryModule from './snabbdom-containerquery.js'; | ||
import create from './create.js' | ||
import { attributesModule } from 'https://cdn.jsdelivr.net/npm/snabbdom@3/build/package/modules/attributes.js'; | ||
import { classModule } from 'https://cdn.jsdelivr.net/npm/snabbdom@3/build/package/modules/class.js'; | ||
import { propsModule } from 'https://cdn.jsdelivr.net/npm/snabbdom@3/build/package/modules/props.js'; | ||
import { styleModule } from 'https://cdn.jsdelivr.net/npm/snabbdom@3/build/package/modules/style.js'; | ||
import { eventListenersModule } from 'https://cdn.jsdelivr.net/npm/snabbdom@3/build/package/modules/eventlisteners.js'; | ||
|
||
|
||
const html = create([ | ||
attributesModule, | ||
eventListenersModule, | ||
classModule, | ||
propsModule, | ||
styleModule, | ||
containerQueryModule | ||
styleModule | ||
]) | ||
|
||
``` | ||
|
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters