Skip to content

leveluptuts/Svelte-Element-Query

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Svelte Element Queries

@leveluptuts/svelte-element-query

Demo

Demo

Why Element / Container Queries

https://css-tricks.com/a-cornucopia-of-container-queries/

Usage

<script>
	import { container } from '@leveluptuts/svelte-element-query'
</script>

<div class="contain" use:container={{small: 0, medium: 200, large: 500}}>
	<h1>Hello</h1>
</div>

<style>
	.contain {
		border: dashed 5px var(--borderColor, #333);
	}

	:global(.medium) {
		--borderColor: red;
	}

	:global(.large) {
		--borderColor: blue;
	}
</style>

Sponsors

Level Up Tutorials

https://www.leveluptutorials.com

Cutting-edge, focused & high quality video tutorials for web developers and designers Syntax

Learn Svelte!

A Tasty Treats Podcast for Web Developers. Ft Wes Bos & Scott Tolinski

Thank you!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published