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.
| 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 |
npm install @teft/viewport@media (--teft-viewport-large) {
.my-css {
color: #000;
}
}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><p class="hide-for-small">This text is hidden on small screens and up.</p>
<p class="hide-for-medium">This text is hidden on medium screens and up.</p>
<p class="hide-for-large">This text is hidden on large screens and up.</p>
<p class="hide-for-wide">This text is hidden on wide screens and up.</p>
<p class="hide-for-huge">This text is hidden on huge screens and up.</p>