@vergelijkdirect/styles 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +72 -0
- package/package.json +32 -0
package/README.md
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
# Vergelijkdirect Styles
|
|
2
|
+
|
|
3
|
+
Vergelijkdirect Styles is a project contains common styles and resources for use in all company projects.
|
|
4
|
+
It contains basic styles, variables, components, and other resources
|
|
5
|
+
that can be used to maintain a consistent style and branding across projects.
|
|
6
|
+
|
|
7
|
+
This project follows the [7-1 pattern](https://sass-guidelin.es/#the-7-1-pattern) and utilizes [SCSS](https://sass-lang.com/).
|
|
8
|
+
Styles are written according to the [BEM](https://getbem.com/) methodology.
|
|
9
|
+
It compiles to CSS and is added to npm as the package `@vergelijkdirect/styles`.
|
|
10
|
+
|
|
11
|
+
### Quick start
|
|
12
|
+
|
|
13
|
+
1. Clone the repo
|
|
14
|
+
2. Install dependencies - `npm install`
|
|
15
|
+
3. Start dev server - `npm run dev`
|
|
16
|
+
4. Add the changes to sass
|
|
17
|
+
5. Add link to compiled css file in html and add an example
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<!DOCTYPE html>
|
|
21
|
+
<html lang="en">
|
|
22
|
+
<head>
|
|
23
|
+
<meta charset="UTF-8">
|
|
24
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
25
|
+
<title>Globals</title>
|
|
26
|
+
<link rel="stylesheet" href="../../../dist/css/globals/index.css">
|
|
27
|
+
</head>
|
|
28
|
+
<body>
|
|
29
|
+
<button class="btn-a btn-a--primary">primary</button>
|
|
30
|
+
<button class="btn-a btn-a--success">success</button>
|
|
31
|
+
<button class="btn-a btn-a--danger">danger</button>
|
|
32
|
+
<button class="btn-a btn-a--gray">gray</button>
|
|
33
|
+
</body>
|
|
34
|
+
</html>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
6. Open the `http://localhost:3000` to check the styles
|
|
38
|
+
|
|
39
|
+
### What's included
|
|
40
|
+
|
|
41
|
+
After compiling sass to css, you will find the following directories and files in the `dist/css` folder,
|
|
42
|
+
logically grouped by project, as well as global styles that represent the compiled css files.
|
|
43
|
+
|
|
44
|
+
```text
|
|
45
|
+
dist/css/[folder-name]/index.css
|
|
46
|
+
dist/css/[folder-name]/index.css.map
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### How to install
|
|
50
|
+
1. Install the `@vergelijkdirect/styles` package use the exact version of the package
|
|
51
|
+
|
|
52
|
+
```
|
|
53
|
+
npm i @vergelijkdirect/styles@x.x.x --save-exact
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
2. Include the styles in your project. Place `@import "@vergelijkdirect/styles/dist/css/comparison-app";` e.g. in the app.scss file in your project.
|
|
57
|
+
|
|
58
|
+
```scss
|
|
59
|
+
@import "@vergelijkdirect/styles/dist/css/comparison-app";
|
|
60
|
+
```
|
|
61
|
+
Since the styles are already compiled in css you can also use them in a regular css file.
|
|
62
|
+
|
|
63
|
+
### Environment
|
|
64
|
+
This project requires the following environment:
|
|
65
|
+
|
|
66
|
+
* Node.js (version 20.11.1)
|
|
67
|
+
* npm (version 10.2.4)
|
|
68
|
+
|
|
69
|
+
### Publish an NPM Package
|
|
70
|
+
1. `npm run sass:compile`
|
|
71
|
+
2. `npm version patch`
|
|
72
|
+
3. `npm publish`
|
package/package.json
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@vergelijkdirect/styles",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"style": "dist/css/globals/index.css",
|
|
6
|
+
"files": [
|
|
7
|
+
"dist/css/**/*.css"
|
|
8
|
+
],
|
|
9
|
+
"scripts": {
|
|
10
|
+
"sass:watch": "sass src/sass:dist/css --watch --no-source-map --load-path=node_modules",
|
|
11
|
+
"sass:compile": "sass src/sass:dist/css --style=compressed --load-path=node_modules --quiet-deps",
|
|
12
|
+
"html:watch": "browser-sync start --server --files \"dist/css\" \"src/html\" \"index.html\"",
|
|
13
|
+
"dev": "concurrently --kill-others \"npm run sass:watch\" \"npm run html:watch\""
|
|
14
|
+
},
|
|
15
|
+
"repository": {
|
|
16
|
+
"type": "git",
|
|
17
|
+
"url": "git+ssh://git@bitbucket.org/vergelijkdirect/styles.git"
|
|
18
|
+
},
|
|
19
|
+
"author": "",
|
|
20
|
+
"license": "ISC",
|
|
21
|
+
"bugs": {
|
|
22
|
+
"url": "https://bitbucket.org/vergelijkdirect/styles/issues"
|
|
23
|
+
},
|
|
24
|
+
"homepage": "https://bitbucket.org/vergelijkdirect/styles#readme",
|
|
25
|
+
"devDependencies": {
|
|
26
|
+
"@fortawesome/fontawesome-pro": "^5.15.4",
|
|
27
|
+
"bootstrap": "^4.6.2",
|
|
28
|
+
"browser-sync": "^3.0.2",
|
|
29
|
+
"concurrently": "^8.2.2",
|
|
30
|
+
"sass": "^1.72.0"
|
|
31
|
+
}
|
|
32
|
+
}
|