npm i
npm run dev
Format and lint consecutively
npm run flint
src/styles/global.scss
The readable store ize can be accessed with $ize in Svelte components
Outside of Svelte components, use the getSize() function
It can be compared against the Size enum
// Svelte components
if ($ize === Size.SUPERULTRAWIDE) {
// do something big
}
// Typescript files
if (getSize() <= Size.TABLET) {
// do something small
}Tailwind and Scss are configured to use the following values
| values | mob | tab | lap | dsk | wde | uwd | suw |
|---|---|---|---|---|---|---|---|
| before(tablet) | 🔵 | ||||||
| before(laptop) | 🔵 | 🔵 | |||||
| before(desktop) | 🔵 | 🔵 | 🔵 | ||||
| before(wide) | 🔵 | 🔵 | 🔵 | 🔵 | |||
| before(ultrawide) | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 | ||
| before(superultrawide) | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 | |
| after(mobile) | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 | |
| after(tablet) | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 | ||
| after(laptop) | 🔵 | 🔵 | 🔵 | 🔵 | |||
| after(desktop) | 🔵 | 🔵 | 🔵 | ||||
| after(wide) | 🔵 | 🔵 | |||||
| after(ultrawide) | 🔵 | ||||||
| is(small) | 🔵 | 🔵 | |||||
| is(medium) | 🔵 | 🔵 | |||||
| is(large) | 🔵 | 🔵 | 🔵 | ||||
| is(mobile) | 🔵 | ||||||
| is(tablet) | 🔵 | ||||||
| is(laptop) | 🔵 | ||||||
| is(desktop) | 🔵 | ||||||
| is(wide) | 🔵 | ||||||
| is(ultrawide) | 🔵 | ||||||
| is(superultrawide) | 🔵 |
<div class="bg-blue-500 after(tablet):bg-green-500">
default: blue
larger than tablet: green
</div>@include before(laptop) {
div {
color: red;
}
};