primer-blankslate
Advanced tools
primer-blankslate - npm Package Compare versions
Comparing version 0.2.1 to 0.2.2
@@ -0,1 +1,9 @@ | ||
| # v0.2.2 | ||
| * Mentioning the build file - Jon Rohan [github/github@64ca4a7](https://github.com/github/github/commit/64ca4a7) | ||
| * Including build/build.css in distributed npm module - Jon Rohan [github/github@e4effbf](https://github.com/github/github/commit/e4effbf) | ||
| * Updating modules to run on prepublish to include build.css in distribution - Jon Rohan [github/github@5b573a0](https://github.com/github/github/commit/5b573a0) | ||
| * Re-ordering the docs to the bottom of the readme - Jon Rohan [github/github@9c1f291](https://github.com/github/github/commit/9c1f291) | ||
| * Updating the link - Jon Rohan [github/github@f67684b](https://github.com/github/github/commit/f67684b) | ||
| # v0.2.1 | ||
@@ -2,0 +10,0 @@ |
| { | ||
| "version": "0.2.1", | ||
| "version": "0.2.2", | ||
| "name": "primer-blankslate", | ||
@@ -11,3 +11,4 @@ "description": "Blankslates are for when there is a lack of content within a page or section.", | ||
| "index.scss", | ||
| "lib" | ||
| "lib", | ||
| "build" | ||
| ], | ||
@@ -19,7 +20,6 @@ "repository": "https://github.com/primer/blankslate.git", | ||
| "scripts": { | ||
| "build": "npm run setup && npm run preprocess", | ||
| "lint": "stylelint **/*.scss -c .stylelintrc.json -s scss", | ||
| "preprocess": "node-sass index.scss --include-path node_modules | postcss -c .postcss.json -o build/build.css", | ||
| "setup": "npm install", | ||
| "test": "npm run lint" | ||
| "setup": "if [ ! -d \"node_modules\" ]; then npm install; fi", | ||
| "build": "node-sass index.scss --include-path node_modules --output-style compressed | postcss -c .postcss.json -o build/build.css", | ||
| "prepublish": "npm run setup && npm run build", | ||
| "test": "stylelint **/*.scss -c .stylelintrc.json -s scss" | ||
| }, | ||
@@ -26,0 +26,0 @@ "devDependencies": { |
108
README.md
@@ -10,6 +10,2 @@ # Primer CSS Blankslate | ||
| ## Documentation | ||
| You can read more about blankslate in the [docs][docs]. | ||
| ## Install | ||
@@ -35,3 +31,3 @@ | ||
| For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` | ||
| For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. | ||
@@ -42,14 +38,104 @@ ``` | ||
| ## Related | ||
| ## Documentation | ||
| * [Primer Documentation][docs] | ||
| * [primer-css][primer] | ||
| * [primer-support][primer-support] | ||
| You can read more about other primer modules in the [full primer docs][docs]. | ||
| <!-- %docs | ||
| title: Blankslate | ||
| --> | ||
| ### Blankslate | ||
| Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn't there. Be sure to provide an action to add content as well. | ||
| #### Basic example | ||
| Wrap some content in the outer `.blankslate` wrapper to give it the blankslate appearance. | ||
| ```html | ||
| <div class="blankslate"> | ||
| <h3>This is a blank slate</h3> | ||
| <p>Use it to provide information when no dynamic content exists.</p> | ||
| </div> | ||
| ``` | ||
| #### With Octicons | ||
| When it helps the message, include (relevant) icons in your blank slate. Add `.blankslate-icon` to any `.mega-octicon`s as the first elements in the blankslate, like so. | ||
| ```html | ||
| <div class="blankslate"> | ||
| <%= octicon :symbol => "git-commit", :size => "large", :class => "blankslate-icon" %> | ||
| <%= octicon :symbol => "tag", :size => "large", :class => "blankslate-icon" %> | ||
| <%= octicon :symbol => "git-branch", :size => "large", :class => "blankslate-icon" %> | ||
| <h3>This is a blank slate</h3> | ||
| <p>Use it to provide information when no dynamic content exists.</p> | ||
| </div> | ||
| ``` | ||
| #### Variations | ||
| Add an additional optional class to the `.blankslate` to change its appearance. | ||
| ##### Narrow | ||
| Narrows the blankslate container to not occupy the entire available width. | ||
| ```html | ||
| <div class="blankslate blankslate-narrow"> | ||
| <h3>This is a blank slate</h3> | ||
| <p>Use it to provide information when no dynamic content exists.</p> | ||
| </div> | ||
| ``` | ||
| ##### Capped | ||
| Removes the `border-radius` on the top corners. | ||
| ```html | ||
| <div class="blankslate blankslate-capped"> | ||
| <h3>This is a blank slate</h3> | ||
| <p>Use it to provide information when no dynamic content exists.</p> | ||
| </div> | ||
| ``` | ||
| ##### Spacious | ||
| Significantly increases the vertical padding. | ||
| ```html | ||
| <div class="blankslate blankslate-spacious"> | ||
| <h3>This is a blank slate</h3> | ||
| <p>Use it to provide information when no dynamic content exists.</p> | ||
| </div> | ||
| ``` | ||
| ##### Large | ||
| Increases the size of the text in the blankslate | ||
| ```html | ||
| <div class="blankslate blankslate-large"> | ||
| <h3>This is a blank slate</h3> | ||
| <p>Use it to provide information when no dynamic content exists.</p> | ||
| </div> | ||
| ``` | ||
| ##### No background | ||
| Removes the `background-color` and `border`. | ||
| ```html | ||
| <div class="blankslate blankslate-clean-background"> | ||
| <h3>This is a blank slate</h3> | ||
| <p>Use it to provide information when no dynamic content exists.</p> | ||
| </div> | ||
| ``` | ||
| <!-- %enddocs --> | ||
| ## License | ||
| MIT © [GitHub](https://github.com/) | ||
| [MIT](./LICENSE) © [GitHub](https://github.com/) | ||
| [primer]: https://github.com/primer/primer | ||
| [primer-support]: https://github.com/primer/primer-support | ||
| [docs]: http://primercss.io/ | ||
@@ -56,0 +142,0 @@ [npm]: https://www.npmjs.com/ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Trivial Package
Supply chain riskPackages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Empty package
Supply chain riskPackage does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by59.62%
10155
- Number of package files
- increased by16.67%
7
- Lines of code
- increased byInfinity%
3
- Number of lines in readme file
- increased by153.57%
142
No dependency changes