@appnest/masonry-layout - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

package.json

 {
 	"name": "@appnest/masonry-layout",
-	"version": "0.0.9",
+	"version": "0.0.10",
 	"license": "MIT",
@@ -49,7 +49,25 @@ "module": "index.js",
 		"s": "npm run s:dev",
-		"deploy": "npm run b:demo:prod && firebase deploy"
+		"deploy": "npm run b:demo:prod && firebase deploy",
+		"readme": "node node_modules/.bin/readme"
 	},
 	"devDependencies": {
-		"@appnest/web-config": "0.3.0"
+		"@appnest/readme": "^1.0.2",
+		"@appnest/web-config": "0.3.11"
+	},
+	"readme": {
+		"ids": {
+			"npm": "@appnest/masonry-layout",
+			"webcomponents": "@appnest/masonry-layout",
+			"github": "andreasbm/masonry-layout"
+		},
+		"demo": "https://appnest-demo.firebaseapp.com/masonry-layout",
+		"bullets": [
+			"**Simple:** Works right out of the box (just add it to your markup)",
+			"**Lightweight:** Super small (1.5kb minified & gzipped)",
+			"**Zero dependencies:** Created using only vanilla js - no dependencies and framework agnostic!",
+			"**Customizable:** Can customize almost everything (eg. columns, transitions, spacing).",
+			"**User friendly:** Automatically re-distribute items when the size of the grid changes or new elements are added",
+			"**Performant:** Efficient & fast"
+		]
 	}
 }

README.md

@@ -1,29 +0,29 @@
-# @appnest/masonry-layout
+<h1 align="center">@appnest/masonry-layout</h1>
+<p align="center">
+		<a href="https://npmcharts.com/compare/@appnest/masonry-layout?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@appnest/masonry-layout.svg" height="20"/></a>
+<a href="https://www.npmjs.com/package/@appnest/masonry-layout"><img alt="NPM Version" src="https://img.shields.io/npm/v/@appnest/masonry-layout.svg" height="20"/></a>
+<a href="https://david-dm.org/andreasbm/masonry-layout"><img alt="Dependencies" src="https://img.shields.io/david/andreasbm/masonry-layout.svg" height="20"/></a>
+<a href="https://github.com/andreasbm/masonry-layout/graphs/contributors"><img alt="Contributors" src="https://img.shields.io/github/contributors/andreasbm/masonry-layout.svg" height="20"/></a>
+<a href="https://www.webcomponents.org/element/@appnest/masonry-layout"><img alt="Published on webcomponents.org" src="https://img.shields.io/badge/webcomponents.org-published-blue.svg" height="20"/></a>
+	</p>
+<p align="center">
+  <b>An efficient and fast web component that gives you a beautiful masonry layout</b></br>
+  <sub> Go here to see a demo <a href="https://appnest-demo.firebaseapp.com/masonry-layout">https://appnest-demo.firebaseapp.com/masonry-layout</a>.<sub>
+</p>
 
-<a href="https://npmcharts.com/compare/@appnest/masonry-layout?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@appnest/masonry-layout.svg" height="20"></img></a>
-<a href="https://david-dm.org/andreasbm/masonry-layout"><img alt="Dependencies" src="https://img.shields.io/david/andreasbm/masonry-layout.svg" height="20"></img></a>
-<a href="https://www.npmjs.com/package/@appnest/masonry-layout"><img alt="NPM Version" src="https://img.shields.io/npm/v/@appnest/masonry-layout.svg" height="20"></img></a>
-<a href="https://github.com/andreasbm/masonry-layout/graphs/contributors"><img alt="Contributors" src="https://img.shields.io/github/contributors/andreasbm/masonry-layout.svg" height="20"></img></a>
-<a href="https://opensource.org/licenses/MIT"><img alt="MIT License" src="https://img.shields.io/badge/License-MIT-yellow.svg" height="20"></img></a>
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@appnest/masonry-layout)
+<br />
 
-## What is this?
+* **Simple:** Works right out of the box (just add it to your markup)
+* **Lightweight:** Super small (1.5kb minified & gzipped)
+* **Zero dependencies:** Created using only vanilla js - no dependencies and framework agnostic!
+* **Customizable:** Can customize almost everything (eg. columns, transitions, spacing).
+* **User friendly:** Automatically re-distribute items when the size of the grid changes or new elements are added
+* **Performant:** Efficient & fast
 
-This is an efficient and fast web component that gives you a beautiful masonry layout. Go here to see a demo [https://appnest-demo.firebaseapp.com/masonry-layout](https://appnest-demo.firebaseapp.com/masonry-layout).
+<img src="https://raw.githubusercontent.com/andreasbm/masonry-layout/master/example.gif" width="600">
 
-**Features**
+![line](https://raw.githubusercontent.com/andreasbm/readme/master/assets/line.png)
 
-* Works right out of the box (just add it to your markup)
-* Created using only vanilla js - no dependencies and framework agnostic!
-* Can lock columns if specified
-* Automatically re-distribute items when the size of the grid changes or new elements are added
-* Can add transitions to elements when they reflow
-* Can customize the spacing and the amount of columns
-* Efficient & fast
-* Super small (1.5kb minified & gzipped)
+## ❯ Installation
 
-<img src="https://raw.githubusercontent.com/andreasbm/masonry-layout/master/example.gif" width="600">
-
-## Installation
-
 ```javascript
@@ -33,4 +33,6 @@ npm i @appnest/masonry-layout
 
-## Example
+![line](https://raw.githubusercontent.com/andreasbm/readme/master/assets/line.png)
 
+## ❯ Example
+
 Import `@appnest/masonry-layout` somewhere in your code and you're ready to go! Simply add the masonry layout to your `html` and you'll be singing and dancing from not having to build the masonry layout yourself.
@@ -40,12 +42,14 @@
 <masonry-layout>
-	<div class="item">1</div>
-	<div class="item">2</div>
-	<div class="item">3</div>
-	<div class="item">4</div>
-	<div class="item">5</div>
+  <div class="item">1</div>
+  <div class="item">2</div>
+  <div class="item">3</div>
+  <div class="item">4</div>
+  <div class="item">5</div>
 </masonry-layout>
 ```
 
-## Customize
+![line](https://raw.githubusercontent.com/andreasbm/readme/master/assets/line.png)
 
+## ❯ Customize
+
 Customize the functionality by applying the attributes.
@@ -59,3 +63,3 @@
 <masonry-layout cols="5">
-	...
+  ...
 </masonry-layout>
@@ -70,3 +74,3 @@ ```
 <masonry-layout spacing="50">
-	...
+  ...
 </masonry-layout>
@@ -81,3 +85,3 @@ ```
 <masonry-layout maxcolwidth="200">
-	...
+  ...
 </masonry-layout>
@@ -92,3 +96,3 @@ ```
 <masonry-layout collock>
-	...
+  ...
 </masonry-layout>
@@ -103,8 +107,10 @@ ```
 <masonry-layout debounce="500">
-	...
+  ...
 </masonry-layout>
 ```
 
-## Trigger layout
+![line](https://raw.githubusercontent.com/andreasbm/readme/master/assets/line.png)
 
+## ❯ Trigger layout
+
 If you want to force layout to can simply call the `layout()` function on the masonry layout.
@@ -122,9 +128,13 @@
 
-## ResizeObserver
+![line](https://raw.githubusercontent.com/andreasbm/readme/master/assets/line.png)
 
+## ❯ ResizeObserver
+
 You might want to polyfill the `ResizeObserver`. The observer in the component makes sure to distribute the items whenever the size of the grid changes. If this is not polyfilled you will have to call the `layout()` function yourself when the height of the grid changes. If no `ResizeObserver` can be found on the `window` object it will instead re-distribute items when the size of the window changes.
 
-## 🎉 License
+![line](https://raw.githubusercontent.com/andreasbm/readme/master/assets/line.png)
 
+## ❯ License
+	
 Licensed under [MIT](https://opensource.org/licenses/MIT).
 

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

Improved metrics

Total package byte prevSize

33120

increased by4.23%

Number of lines in readme file

133

increased by8.13%

Worsened metrics

Dev dependency count

2

increased by100%

No dependency changes