Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
primer-alerts
Advanced tools
primer-alerts - npm Package Compare versions
Comparing version 0.2.1 to 0.2.4
@@ -0,1 +1,11 @@ | ||
| # v0.2.4 | ||
| * Bump version, and including build/build.css in npm package - Jon Rohan [github/github@09cb3a3](https://github.com/github/github/commit/09cb3a3) | ||
| * setup unless installed - Jon Rohan [github/github@a798fb0](https://github.com/github/github/commit/a798fb0) | ||
| * Using a simplier script setup - Jon Rohan [github/github@be103f4](https://github.com/github/github/commit/be103f4) | ||
| * Renaming to compile - Jon Rohan [github/github@196d7ef](https://github.com/github/github/commit/196d7ef) | ||
| * 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 +12,0 @@ |
| { | ||
| "version": "0.2.1", | ||
| "version": "0.2.4", | ||
| "name": "primer-alerts", | ||
@@ -18,7 +18,6 @@ "description": "Flash messages, or alerts, inform users of successful or pending actions.", | ||
| "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" | ||
| }, | ||
@@ -25,0 +24,0 @@ "dependencies": { |
@@ -10,6 +10,2 @@ # Primer CSS Alerts | ||
| ## Documentation | ||
| You can read more about alerts in the [docs][docs]. | ||
| ## Install | ||
@@ -41,14 +37,87 @@ | ||
| ## 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: Alerts | ||
| --> | ||
| ### Alerts | ||
| Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don't show more than one at a time. | ||
| #### Default | ||
| Flash messages start off looking decently neutral—they're just light blue rounded rectangles. | ||
| ```html | ||
| <div class="flash"> | ||
| Flash message goes here. | ||
| </div> | ||
| ``` | ||
| You can put multiple paragraphs of text in a flash message—the last paragraph's bottom `margin` will be automatically override. | ||
| ```html | ||
| <div class="flash"> | ||
| <p>This is a longer flash message in it's own paragraph. It ends up looking something like this. If we keep adding more text, it'll eventually wrap to a new line.</p> | ||
| <p>And this is another paragraph.</p> | ||
| </div> | ||
| ``` | ||
| Should the need arise, you can quickly space out your flash message from surrounding content with a `.flash-messages` wrapper. *Note the extra top and bottom margin in the example below.* | ||
| ```html | ||
| <div class="flash-messages"> | ||
| <div class="flash"> | ||
| Flash message goes here. | ||
| </div> | ||
| </div> | ||
| ``` | ||
| #### Variations | ||
| Add `.flash-warn` or `.flash-error` to the flash message to make it yellow or red, respectively. | ||
| ```html | ||
| <div class="flash flash-warn"> | ||
| Flash message goes here. | ||
| </div> | ||
| ``` | ||
| ```html | ||
| <div class="flash flash-error"> | ||
| Flash message goes here. | ||
| </div> | ||
| ``` | ||
| #### With icon | ||
| Add an icon to the left of the flash message to give it some funky fresh attention. Just add `.flash-with-icon` and your Octicon. | ||
| ```html | ||
| <div class="flash flash-with-icon"> | ||
| <%= octicon :symbol => "alert" %> | ||
| Flash message with an icon goes here. | ||
| </div> | ||
| ``` | ||
| #### Dismiss | ||
| Add a JavaScript enabled (via Crema) dismiss (close) icon on the right of any flash message. | ||
| ```html | ||
| <div class="flash"> | ||
| <button class="flash-close js-flash-close"><%= octicon :symbol => "x" %></button> | ||
| Dismissable flash message goes here. | ||
| </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/ | ||
@@ -55,0 +124,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
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
Improved metrics
- Total package byte prevSize
- increased by36.57%
10008
- Number of lines in readme file
- increased by123.21%
125
No dependency changes