Skip to content
This repository has been archived by the owner on Aug 19, 2023. It is now read-only.

Latest commit

 

History

History
69 lines (49 loc) · 2.18 KB

README.md

File metadata and controls

69 lines (49 loc) · 2.18 KB

Windi CSS Plugin Content Visibility

GitHub Actions Coverage Status Version

This plugin adds support for using the content-visibility and contain-intrinsic-size CSS properties in your Windi CSS project.

By default supports responsive variants.

Installation

Using NPM:

npm i -D windicss-content-visibility

Using PNPM:

pnpm add -D windicss-content-visibility

Add the plugin to your windi config file.

plugins: [
  require('windicss-content-visibility')
]

Usage

Available utilities:

Class CSS Property
content-auto content-visibility: auto
content-visible content-visibility: visible
content-hidden content-visibility: hidden
content-inherit content-visibility: inherit
content-initial content-visibility: initial
content-revert content-visibility: revert
content-revert-layer content-visibility: revert-layer
content-unset content-visibility: unset
intrinsic-size-${integer} contain-intrinsic-size: ${integer}px

Examples:

Basic:

<section class="content-auto intrinsic-size-200">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>

With responsive variants:

<section class="sm:content-hidden md:content-visible md:intrinsic-size-320">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>

License

This project use the MIT License. Please see License File for more information.