@citizensadvice/background-size - npm Package Compare versions

Comparing version 1.0.0-alpha.0 to 1.0.0

package.json

 {
   "name": "@citizensadvice/background-size",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0",
   "license": "MIT",
@@ -17,3 +17,3 @@ "cads": {
   "dependencies": {
-    "@citizensadvice/support": "^1.0.0-alpha.0"
+    "@citizensadvice/support": "^1.0.0"
   },
@@ -26,3 +26,3 @@ "scripts": {
   },
-  "gitHead": "e574e06673eb1e02922ba36c10c7196192d9ea19"
+  "gitHead": "f9fa5c90b329794d5470e766d439de4340b304dc"
 }

README.md

 # Background-size
 
-![npm (scoped)](https://img.shields.io/npm/v/@citizensadvice/background-size.svg)
+| Name                              | Type   | Version                                                                           |
+|-----------------------------------|--------|-----------------------------------------------------------------------------------|
+| `@citizensadvice/background-size` | Utilty | ![npm (scoped)](https://img.shields.io/npm/v/@citizensadvice/background-size.svg) |
 
-## Package type
-
-- Utility
-
 ## Dependencies
 
 | Name                      | Description                 |
-| ------------------------- | --------------------------- |
+|---------------------------|-----------------------------|
 | `@citizensadvice/support` | System wide settings/config |
@@ -17,7 +15,9 @@
 
+Using your package manager of choice...
+
 ```shell
-$ npm install @citizensadvice/backround-size
+$ npm install @citizensadvice/background-size
 ```
 
-## Usage
+Then bring into your stylesheets with...
 
@@ -28,7 +28,32 @@ ```scss
 
-> You can also make use of the [unpkg](https://unpkg.com) service, try adding the link below to the head of your `HTML` file
-> `<link src="https://unpkg.com/@citizensadvice/background-size@latest/build/background-size.css" />`
+### OR
+You can also make use of the [unpkg](https://unpkg.com) service, try adding the link below to the head of your `HTML` file
 
-## Implementation
+```html
+<link src="https://unpkg.com/@citizensadvice/background-size@latest/build/background-size.css"/>
+```
 
-> Documentation coming soon...
+## Introduction
+
+Defines the size of the background image.
+
+```CSS
+.bg-cover   { background-size: cover   }
+.bg-contain { background-size: contain }
+```
+
+## Responsive background-size classes
+
+To apply specific classes at set screen widths, use the following classes:
+
+| Available classes     | Description                                 |
+|-----------------------|---------------------------------------------|
+| `[aboveClassName]-ns` | Screens with a min-width of `48rem`         |
+| `[aboveClassName]-m`  | Screens with widths from `48rem` to `64rem` |
+| `[aboveClassName]-l`  | Screens with a min-width of `64rem`         |
+
+### Example markup
+
+```html
+<div class="bg-contain bg-cover-ns">...</div>
+```

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4515

increased by28.93%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

58

increased by81.25%

Dependency changes

• Updated@citizensadvice/support@^1.0.0