5.1.2 • Published 2 months ago
@teft/viewport v5.1.2
Viewport
Package provides default Teft aliases as custom media queries based on the most used Gutenberg breakpoints with mobile-first visibility helper classes. This package uses custom media queries PostCSS plugin and expects your setup to support it.
Breakpoints & Media Query aliases
Name | Pixel Width | Alias |
---|---|---|
mobile | 480 | --teft-viewport-mobile |
small | 600 | --teft-viewport-small |
medium | 782 | --teft-viewport-medium |
large | 960 | --teft-viewport-large |
wide | 1280 | --teft-viewport-wide |
huge | 1440 | --teft-viewport-huge |
Installation
npm install @teft/viewport
Usage
Example: Use custom media alias in your css file
@media (--teft-viewport-large) {
.my-css {
color: #000;
}
}
Example: Using the helper classes
In this example, we use the show visibility classes to show certain strings of text based on the device on which users view a page. If their browser meets the class's conditions, the element will be shown. If not, it will be hidden.
<p class="show-for-small">This text is shown on small screens and up.</p>
<p class="show-for-medium">This text is shown on medium screens and up.</p>
<p class="show-for-large">This text is shown on large screens and up.</p>
<p class="show-for-wide">This text is shown on wide screens and up.</p>
<p class="show-for-huge">This text is shown on huge screens and up.</p>