postcss-100vh-fix - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

CHANGELOG.md

 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 0.1.1
+* Improved docs.
+
 ## 0.1
 * Initial release.

package.json

 {
   "name": "postcss-100vh-fix",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "PostCSS plugin to fix height/min-height: 100vh on iOS",
@@ -5,0 +5,0 @@ "keywords": [

README.md

 # PostCSS `100vh` Fix
 
-[PostCSS] plugin to fix [iOS’s bug] with `100vh`.
+[PostCSS] plugin to fix [iOS’s bug] with `100vh`. It works in Chrome,
+iOS/iPad/MacOS Safari and [all other browsers].
+Pure CSS solution, no JS required.
 
 ```css
 body {
+  /* Footer will be hidden on iOS Safari because of bottom panel */
   height: 100vh;
@@ -16,4 +19,6 @@ }
 
+/* Avoid Chrome to see Safari hack */
 @supports (-webkit-touch-callout: none) {
   body {
+    /* The hack for Safari */
     height: -webkit-fill-available;
@@ -24,4 +29,9 @@ }
 
+<img src="https://chanind.github.io/assets/100vh_problem.png"
+     alt="100vh bug illusration by David Chanin"
+     title="By David Chanin">
+
 It works with `min-height` and `max-height` too.
 
+[all other browsers]: https://caniuse.com/#feat=viewport-units
 [iOS’s bug]: https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
@@ -34,1 +44,24 @@ [PostCSS]: https://github.com/postcss/postcss
 </a>
+
+## Usage
+
+
+**Step 1:** Check you project for existed PostCSS config: `postcss.config.js`
+in the project root, `"postcss"` section in `package.json`
+or `postcss` in bundle config.
+
+If you do not use PostCSS, add it according to [official docs]
+and set this plugin in settings.
+
+**Step 2:** Add the plugin to plugins list:
+
+```diff
+module.exports = {
+  plugins: [
++   require('postcss-100vh-fix'),
+    require('autoprefixer')
+  ]
+}
+```
+
+**Step 3:** Use `height: 100vh` or `min-height: 100vh` in your CSS.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4012

increased by32.1%

Number of lines in readme file

65

increased by103.13%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes