hint.css - npm Package Compare versions

Comparing version 2.7.0 to 3.0.0

CONTRIBUTING.md

 **Hint** is written in [SASS](http://sass-lang.com/).
 
 # Setup
+
 1. [Fork **Hint.css**](https://help.github.com/articles/fork-a-repo) and clone it on your system.
@@ -23,3 +24,3 @@ 2. Create a new branch out off `master` for your fix/feature. `git checkout new-feature master`
 
-Once you have the dependencies installed, run `grunt` from the project directory. This will run the default grunt task which compiles the SCSS files into `hint.css` file.
+Once you have the dependencies installed, run `npm run dev` from the project directory. This will start watching all the files in `src/` and run the default grunt task which compiles the SCSS files into `hint.css` file. You can then test your changes in `demo.html`.
 
@@ -29,2 +30,3 @@ Though this should be sufficient for building the library for testing, in case you want to build the minified version as well you can run the `grunt deploy` command instead.
 # Things to remember
+
 - Do not fix multiple issues in a single commit. Keep them one thing per commit so that they can be picked easily incase only few commits require to be merged.
@@ -40,4 +42,2 @@
 
-To catch all updates and discussion, join the mailing list: **[e-mail]**.
-
-To subscribe: **[e-mail]** or visit [here](https://groups.google.com/forum/?fromgroups=#!forum/hintcss).
+Best place to get in touch regarding this library is the [issues board on Github](https://github.com/chinchang/hint.css/issues).

Gruntfile.js

 /*global module:false*/
 
-const sass = require("node-sass");
+const sass = require("sass");
 
-module.exports = function(grunt) {
+module.exports = function (grunt) {
 	// Project configuration.
@@ -11,6 +11,6 @@ grunt.initConfig({
 		meta: {
-			getBanner: function() {
+			getBanner: function () {
 				return "/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - <%= meta.banner %>";
 			},
-			getBannerForBaseVersion: function() {
+			getBannerForBaseVersion: function () {
 				return "/*! <%= pkg.title || pkg.name %> (base version) - v<%= pkg.version %> - <%= meta.banner %>";
@@ -21,3 +21,3 @@ },
 				'<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
-				'* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %> */\n\n'
+				'* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %> */\n\n',
 		},
@@ -28,3 +28,3 @@
 				implementation: sass,
-				sourceMap: false
+				sourceMap: false,
 			},
@@ -34,5 +34,5 @@ dist: {
 					"<%= pkg.name %>.css": "src/<%= pkg.name %>.scss",
-					"<%= pkg.name %>.base.css": "src/<%= pkg.name %>.base.scss"
-				}
-			}
+					"<%= pkg.name %>.base.css": "src/<%= pkg.name %>.base.scss",
+				},
+			},
 		},
@@ -42,3 +42,3 @@
 			options: {
-				sourceMap: false
+				sourceMap: false,
 			},
@@ -48,5 +48,5 @@ compress: {
 					"<%= pkg.name %>.min.css": ["<%= pkg.name %>.css"],
-					"<%= pkg.name %>.base.min.css": ["<%= pkg.name %>.base.css"]
-				}
-			}
+					"<%= pkg.name %>.base.min.css": ["<%= pkg.name %>.base.css"],
+				},
+			},
 		},
@@ -57,26 +57,26 @@
 			options: {
-				banner: "<%= meta.getBanner() %>"
+				banner: "<%= meta.getBanner() %>",
 			},
 			lib: {
 				src: ["<%= pkg.name %>.css"],
-				dest: "<%= pkg.name %>.css"
+				dest: "<%= pkg.name %>.css",
 			},
 			minLib: {
 				src: ["<%= pkg.name %>.min.css"],
-				dest: "<%= pkg.name %>.min.css"
+				dest: "<%= pkg.name %>.min.css",
 			},
 			baseLib: {
 				options: {
-					banner: "<%= meta.getBannerForBaseVersion() %>"
+					banner: "<%= meta.getBannerForBaseVersion() %>",
 				},
 				src: ["<%= pkg.name %>.base.css"],
-				dest: "<%= pkg.name %>.base.css"
+				dest: "<%= pkg.name %>.base.css",
 			},
 			baseMinLib: {
 				options: {
-					banner: "<%= meta.getBannerForBaseVersion() %>"
+					banner: "<%= meta.getBannerForBaseVersion() %>",
 				},
 				src: ["<%= pkg.name %>.base.min.css"],
-				dest: "<%= pkg.name %>.base.min.css"
-			}
+				dest: "<%= pkg.name %>.base.min.css",
+			},
 		},
@@ -86,4 +86,4 @@
 			files: "src/*.scss",
-			tasks: "default"
-		}
+			tasks: "default",
+		},
 	});
@@ -90,0 +90,0 @@

package.json

@@ -5,6 +5,9 @@ {
 	"description": "A tooltip library in CSS for your lovely websites.",
-	"version": "2.7.0",
+	"version": "3.0.0",
 	"style": "hint.css",
 	"main": "hint.css",
 	"homepage": "https://kushagra.dev/lab/hint/",
+	"scripts": {
+		"dev": "watch 'grunt' ./src"
+	},
 	"author": {
@@ -32,9 +35,10 @@ "name": "Kushagra Gour",
 	"devDependencies": {
-		"grunt": "~0.4.1",
+		"grunt": "~1.6.1",
 		"grunt-contrib-concat": "~0.3.0",
 		"grunt-contrib-cssmin": "~0.12.3",
 		"grunt-contrib-watch": "~0.5.3",
-		"grunt-sass": "^3.0.2",
-		"node-sass": "^4.13.1"
+		"watch": "^1.0.2",
+		"grunt-sass": "^3.1.0",
+		"sass": "^1.69.5"
 	}
 }

README.md

 # Hint.css [![npm version](https://badge.fury.io/js/hint.css.svg)](https://badge.fury.io/js/hint.css) ![downloads/month](https://img.shields.io/npm/dm/hint.css.svg) [![Join the chat at https://gitter.im/chinchang/hint.css](https://badges.gitter.im/chinchang/hint.css.svg)](https://gitter.im/chinchang/hint.css?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) ![gzip size](http://img.badgesize.io/https://unpkg.com/hint.css/hint.min.css?compression=gzip&label=gzip%20size)
-*A tooltip library in CSS for your lovely websites*
 
+_A tooltip library in CSS for your lovely websites_
+
 [Demo](https://kushagra.dev/lab/hint/) • [Get started](#get-started) • [Who's using this?](#whos-using-this) • [Browser support](#browser-support) • [FAQs](#faqs) • [Contributing](#contributing) • [License](#license)
 
-`hint.css` is written as a pure CSS resource using which you can create cool accessible tooltips for your web app. It does not rely on JavaScript but rather uses **aria-label**/**data-* attribute**, **pseudo elements**, **content property** and **CSS3 transitions** to create the tooltips. Also it uses **BEM** naming convention particularly for the modifiers.
+`hint.css` is written as a pure CSS resource using which you can create cool accessible tooltips for your web app. It does not rely on JavaScript but rather uses **aria-label**/**data-\* attribute**, **pseudo elements**, **content property** and **CSS3 transitions** to create the tooltips. Also it uses **BEM** naming convention particularly for the modifiers.
 
-
-
 ## Get Started
@@ -16,10 +15,12 @@
 
- Full build
- - [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.css
- - [minified] : https://raw.github.com/chinchang/hint.css/master/hint.min.css
+Full build
 
- Base build *(Does not include color themes and fancy effects)*
- - [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.base.css
- - [minified] : https://raw.github.com/chinchang/hint.css/master/hint.base.min.css
+- [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.css
+- [minified] : https://raw.github.com/chinchang/hint.css/master/hint.min.css
 
+Base build _(Does not include color themes and fancy effects)_
+
+- [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.base.css
+- [minified] : https://raw.github.com/chinchang/hint.css/master/hint.base.min.css
+
 2. **Bower** : `bower install hint.css`
@@ -31,3 +32,3 @@
 
-Now include the library in the ``HEAD`` tag of your page:
+Now include the library in the `HEAD` tag of your page:
 
@@ -37,2 +38,3 @@ ```html
 ```
+
 or
@@ -47,3 +49,2 @@
 
-
 ```html
@@ -54,4 +55,5 @@ Hello Sir, <span class="hint--bottom" aria-label="Thank you!">hover me.</span>
 Use it with other available modifiers in various combinations. Available modifiers:
-- *Colors* - `hint--error`, `hint--info`, `hint--warning`, `hint--success`
-- *Sizes* - `hint--small`, `hint--medium`, `hint--large`
+
+- _Colors_ - `hint--error`, `hint--info`, `hint--warning`, `hint--success`
+- _Sizes_ - `hint--small`, `hint--medium`, `hint--large`, `hint--fit`
 - `hint--always`
@@ -61,3 +63,4 @@ - `hint--rounded`
 - `hint--bounce`
-- `hint-no-arrow`
+- `hint--no-arrow`
+- `hint--no-shadow`
 
@@ -76,2 +79,3 @@ ## Upgrading from v1.x
 ## Who's Using This?
+
 - [Webflow Playground](http://playground.webflow.com/)
@@ -95,10 +99,4 @@ - [Panda chrome app](http://usepanda.com/)
 ## Browser Support
-**hint.css** works on all latest browsers, though the transition effect is supported only on IE10+, Chrome 26+ and FF4+ at present.
 
-- Chrome - basic + transition effects
-- Firefox - basic + transition effects
-- Opera - basic
-- Safari - basic
-- IE 10+ - basic + transition effects
-- IE 8 & 9 - basic
+**hint.css** works on all latest browsers
 
@@ -110,2 +108,3 @@ ### FAQs
 ## Contributing
+
 `hint.css` is developed in SASS and the source files can be found in the `src/` directory.
@@ -118,2 +117,3 @@
 ## Changelog & Updates
+
 See the [Changelog](https://github.com/chinchang/hint.css/wiki/Changelog).
@@ -130,5 +130,7 @@
 ## Credits
+
 This doesn't make use of a lot of BEM methodology but big thanks to [@csswizardry](https://twitter.com/csswizardry), [@necolas](https://twitter.com/necolas) for their awesome articles on BEM and to [@joshnh](https://twitter.com/_joshnh) through whose work I came to know about it :)
 
 # Sponsor
+
 [![](https://user-images.githubusercontent.com/379918/134402085-15cf29bc-2266-4b2d-9354-1830adc4a240.png)](https://cssbattle.dev)

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

68891

increased by1.07%

Number of package files

27

increased by3.85%

Lines of code

1098

increased by6.29%

Number of lines in readme file

126

increased by1.61%

Worsened metrics

Dev dependency count

7

increased by16.67%

No dependency changes