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>

<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>