windicss-content-visibility
v1.2.0
Published
Windi CSS plugin for support content visibility
Downloads
14
Maintainers
Readme
Windi CSS Plugin Content Visibility
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.