Skip to content

Commit b3a037b

Browse files
CGWebDev2003CGWebDev2003
committed
[2.3.0] - Added Animation Snippets
1 parent beea116 commit b3a037b

File tree

8 files changed

+160
-11
lines changed

8 files changed

+160
-11
lines changed

‎CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
66

77
## [Released]
88

9+
## [2.3.0] - 2023-06-17
10+
11+
### Added
12+
13+
- Added snippets for Neptune Animations
14+
915
## [2.2.0] - 2023-06-08
1016

1117
### Added

‎neptunecss-snippets-2.2.0.vsix

29.9 KB
Binary file not shown.

‎neptunecss-snippets-2.3.0.vsix

32.2 KB
Binary file not shown.

‎package.json

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"publisher": "NeptuneCSS",
55
"icon": "icon.png",
66
"description": "VS Code snippets for Neptune CSS",
7-
"version": "2.2.0",
7+
"version": "2.3.0",
88
"scripts": {
99
"package": "C:/Users/colin/AppData/Roaming/npm/vsce package"
1010
},
@@ -28,6 +28,14 @@
2828
},
2929
"contributes": {
3030
"snippets": [
31+
{
32+
"language": "html",
33+
"path": "./snippets/animations/import.code-snippets"
34+
},
35+
{
36+
"language": "javascript",
37+
"path": "./snippets/animations/animations.code-snippets"
38+
},
3139
{
3240
"language": "html",
3341
"path": "./snippets/html/import.code-snippets"

‎snippets/animations/animations.code-snippets

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"New Neptune Animations Instance": {
3+
"scope": "javascript",
4+
"prefix": "nep-anim-instance",
5+
"body": "const ${1: neptuneAnimate} = new NeptuneAnimate(${2: myElement}, \"${3: nep-pulse}\");",
6+
"description": "Create a new instance of the NeaptuneAnimate class"
7+
},
8+
"Start Neptune Animation": {
9+
"scope": "javascript",
10+
"prefix": "nep-start-anim",
11+
"body": "${1: neptuneAnimate}.startAnimation();",
12+
"description": "Start Neptune Animation"
13+
}
14+
}

‎snippets/animations/import.code-snippets

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"Neptune Animations CSS CDN": {
3+
"scope": "html",
4+
"prefix": "nep-anim-css-cdn",
5+
"body": "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/neptunecss-animations@${1: latest}/neptune-animations.min.css\">",
6+
"description": "Insert CSS CDN for Neptune Animations"
7+
},
8+
"Neptune Animations JS CDN": {
9+
"scope": "html",
10+
"prefix": "nep-anim-js-cdn",
11+
"body": "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/neptunecss-animations@${1: latest}/neptune-animations.min.js\">",
12+
"description": "Insert JS CDN for Neptune Animations"
13+
},
14+
"Neptune Animations Quickstart": {
15+
"scope": "html",
16+
"prefix": "nep-anim-quick",
17+
"body": [
18+
"<!DOCTYPE html>",
19+
"<html lang=\"en\">",
20+
" <head>",
21+
" <meta charset=\"UTF-8\">",
22+
" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
23+
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
24+
"",
25+
" <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/neptunecss@${1: latest}/neptune.min.css\">",
26+
" <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/neptunecss-animations@${2: latest}/neptune-animations.min.css\">",
27+
"",
28+
" <title>${3: Example Page}</title>",
29+
" </head>",
30+
" <body>",
31+
" ${5: <!-- Your Content -->}",
32+
"",
33+
" <script src=\"https://cdn.jsdelivr.net/npm/neptunecss-js@${3: latest}/neptune.min.js\"></script>",
34+
" <script src=\"https://cdn.jsdelivr.net/npm/neptunecss-animations@${4: latest}/neptune-animations.min.js\"></script>",
35+
" </body>",
36+
"</html>"
37+
],
38+
"description": "Insert CSS CDN for Neptune Animations"
39+
},
40+
}

‎test.html

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,16 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
8-
<!-- Import example style -->
9-
<link rel="stylesheet" href="/examamples/example_style.min.css">
10-
11-
<!-- Import neptune ui -->
12-
<link rel="stylesheet" href="/neptune.css">
13-
14-
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
15-
<title>Title | Neptune examples</title>
7+
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neptunecss@ latest/neptune.min.css">
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neptunecss-animations@ latest/neptune-animations.min.css">
10+
11+
<title> Example Page</title>
1612
</head>
1713
<body>
18-
Content
14+
<!-- Your Content -->
15+
16+
<script src="https://cdn.jsdelivr.net/npm/neptunecss-js@ Example Page/neptune.min.js"></script>
17+
<script src="https://cdn.jsdelivr.net/npm/neptunecss-animations@ latest/neptune-animations.min.js"></script>
1918
</body>
2019
</html>

‎test.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# Welcome to Neptune JS!
2+
3+
![](https://img.shields.io/github/v/tag/neptune-css/neptune-css?color=%2300AACC) ![](https://img.shields.io/npm/dm/@neptune-css/neptune?color=%2300AACC) ![](https://img.shields.io/npm/l/@neptune-css/neptune?color=%2300AACC)
4+
***
5+
6+
![readme_banner_js](https://github.com/neptune-css/javascript-api/assets/122671813/42fd3da4-3f6e-42de-b68b-487e5fc7da47)
7+
8+
9+
## Install
10+
11+
### NMP
12+
Copy the following Code to install the [npm package](https://www.npmjs.com/package/neptunecss-js).
13+
```
14+
npm i neptunecss-js
15+
```
16+
17+
### CDN
18+
```html
19+
<script src="https://cdn.jsdelivr.net/npm/neptunecss-js@latest/neptune.min.js"></script>
20+
```
21+
22+
### Import
23+
24+
There are two ways to import Neptune JS. The first way is a namespaced import. Copy the following line into your file.
25+
26+
```javascript
27+
import * as NeptuneJS from "path/to/package/neptune.min.js"
28+
```
29+
30+
Now you have to write NeptuneJS. before every class of Neptune JS like:
31+
32+
```javascript
33+
const myBadge = new NeptuneJS.Badge({
34+
text: "default badge",
35+
size: "m",
36+
style: "primary"
37+
});
38+
```
39+
40+
The second way to import Neptune JS is to import only the components you need.
41+
42+
```javascript
43+
import { Badge, Spinner, Toast } from "path/to/package/neptune.min.js"
44+
```
45+
46+
### Example
47+
```html
48+
<!DOCTYPE html>
49+
<html lang="en">
50+
<head>
51+
<meta charset="UTF-8">
52+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
53+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
54+
55+
<!-- Import neptune ui -->
56+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neptunecss@latest/neptune.min.css">
57+
58+
<title>Neptune example</title>
59+
</head>
60+
<body>
61+
<!-- Your Content -->
62+
63+
<!-- Import Neptune JS -->
64+
<script src="https://cdn.jsdelivr.net/npm/neptunecss-js@latest/neptune.min.js"></script>
65+
</body>
66+
</html>
67+
```
68+
69+
## Documentation
70+
You can read the docs [here](https://neptune-css.gitbook.io/neptune-css-docs/neptune-js).
71+
72+
## Snippets Extension
73+
Download it in [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=NeptuneCSS.neptunecss-snippets) or checkout on [GitHub](https://github.com/neptune-css/neptune-snippets).
74+
75+
## License
76+
[MIT LICENSE](https://github.com/neptune-css/neptune-js/blob/main/LICENSE)
77+
78+
## Author
79+
[Colin Grahm](https://github.com/CGWebDev2003)
80+
81+
82+
> fef

0 commit comments

Comments
 (0)