1.0.22 • Published 4 months ago

@vergelijkdirect/styles v1.0.22

Weekly downloads
-
License
ISC
Repository
bitbucket
Last release
4 months ago

Vergelijkdirect Styles

Vergelijkdirect Styles is a project contains common styles and resources for use in all company projects. It contains basic styles, variables, components, and other resources that can be used to maintain a consistent style and branding across projects.

This project follows the 7-1 pattern and utilizes SCSS. Styles are written according to the BEM methodology. It compiles to CSS and is added to npm as the package @vergelijkdirect/styles.

Quick start

  1. Clone the repo
  2. Install dependencies - npm install
  3. Start dev server - npm run dev
  4. Add the changes to sass

  5. Add link to compiled css file in html and add an example

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Globals</title>
    <link rel="stylesheet" href="../../../dist/css/globals/index.css">
</head>
<body>
    <button class="btn-a btn-a--primary">primary</button>
    <button class="btn-a btn-a--success">success</button>
    <button class="btn-a btn-a--danger">danger</button>
    <button class="btn-a btn-a--gray">gray</button>
</body>
</html>

  6. Open the http://localhost:3000 to check the styles

What's included

After compiling sass to css, you will find the following directories and files in the dist/css folder, logically grouped by project, as well as global styles that represent the compiled css files.

dist/css/[folder-name]/index.css
dist/css/[folder-name]/index.css.map

How to install

  1. Install the @vergelijkdirect/styles package use the exact version of the package

    npm i @vergelijkdirect/styles@x.x.x --save-exact

  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.

    @import "@vergelijkdirect/styles/dist/css/comparison-app";

    Since the styles are already compiled in css you can also use them in a regular css file.

Environment

This project requires the following environment:

  • Node.js (version 20.11.1)
  • npm (version 10.2.4)

Publish an NPM Package

  1. npm run sass:compile
  2. npm version patch
  3. npm publish
@vergelijkdirect/comparison-forms@vergelijkdirect/vd-base-components
1.0.22

4 months ago

1.0.21

4 months ago

1.0.22-VER-8002.0

4 months ago

1.0.22-VER-7987.1

4 months ago

1.0.22-VER-7987.2

4 months ago

1.0.22-VER-7987.0

4 months ago

1.0.17-VER-7952.1

4 months ago

1.0.17-VER-7952.2

4 months ago

1.0.17-VER-7952.0

4 months ago

1.0.20

5 months ago

1.0.20-VER-7878.0

5 months ago

1.0.18-VER-7909.0

5 months ago

1.0.20-VER-7909.0

5 months ago

1.0.18-VER-7889.4

5 months ago

1.0.18-VER-7889.3

5 months ago

1.0.19

5 months ago

1.0.18

5 months ago

1.0.18-VER-7889.2

5 months ago

1.0.18-VER-7889.1

5 months ago

1.0.18-VER-7878.0

5 months ago

1.0.18-VER-7878.1

5 months ago

1.0.18-VER-7878.2

5 months ago

1.0.17-VER-7826.0

5 months ago

1.0.17-VER-7826.1

5 months ago

1.0.17

6 months ago

1.0.18-VER-7319.0

5 months ago

1.0.18-VER-7472.0

5 months ago

1.0.18-VER-7889.0

5 months ago

1.0.18-ver-7731.0

5 months ago

1.0.17-VER-7878.0

6 months ago

1.0.17-VER-7878.1

5 months ago

1.0.17-VER-7472.1.0

6 months ago

1.0.17-VER-7319.3

6 months ago

1.0.17-VER-7319.2

6 months ago

1.0.17-VER-7319.5

6 months ago

1.0.17-VER-7319.4

6 months ago

1.0.17-ver-7472.0

6 months ago

1.0.17-VER-7319.1

6 months ago

1.0.17-VER-7319.0

6 months ago

1.0.17-VER-7824.0

6 months ago

1.0.16

6 months ago

1.0.17-ver-7731.0

6 months ago

1.0.15-ver-7832.1

6 months ago

1.0.15

6 months ago

1.0.15-ver-7731.0

7 months ago

1.0.15-VER-7775.1

7 months ago

1.0.15-VER-7775.0

7 months ago

1.0.11-VER-7584.0

7 months ago

1.0.14-VER-7584.1

7 months ago

1.0.14

7 months ago

1.0.13

7 months ago

1.0.12

7 months ago

1.0.12-rc.9

7 months ago

1.0.12-rc.11

7 months ago

1.0.12-rc.10

7 months ago

1.0.12-rc.8

7 months ago

1.0.12-rc.5

8 months ago

1.0.12-rc.4

8 months ago

1.0.12-rc.7

8 months ago

1.0.12-rc.6

8 months ago

1.0.12-rc.1

8 months ago

1.0.12-rc.0

8 months ago

1.0.12-rc.3

8 months ago

1.0.12-rc.2

8 months ago

1.0.12-ver-7731.0

8 months ago

1.0.11-VER-7596.0

8 months ago

1.0.11-VER-7596.2

8 months ago

1.0.11-VER-7596.1

8 months ago

1.0.11-VER-7594.4

8 months ago

1.0.11-VER-7594.3

8 months ago

1.0.11-VER-7594.6

8 months ago

1.0.11-VER-7594.5

8 months ago

1.0.11

8 months ago

1.0.11-ver-7588.0

9 months ago

1.0.11-VER-7594.2

9 months ago

1.0.11-VER-7594.1

9 months ago

1.0.11-VER-7594.0

9 months ago

1.0.10

9 months ago

1.0.9

9 months ago

1.0.8

9 months ago

1.0.8-ver-7669.0

9 months ago

1.0.8-ver-7571.1

10 months ago

1.0.8-ver-7625.0

9 months ago

1.0.8-ver-7449.3

10 months ago

1.0.8-rc.0

10 months ago

1.0.8-VER-7449.1.0

10 months ago

1.0.8-ver-7571.0

10 months ago

1.0.7

10 months ago

1.0.8-VER-7449.0

10 months ago

1.0.8-ver-7449.1

10 months ago

1.0.8-VER-7540.0

10 months ago

1.0.8-VER-7540.1

10 months ago

1.0.8-VER-7464.1

10 months ago

1.0.8-VER-7464.0

10 months ago

1.0.8-ver-7449.2

10 months ago

1.0.8-ver-7531.0

10 months ago

1.0.7-rc.0

12 months ago

1.0.7-rc.1

12 months ago

1.0.7-rc.2

12 months ago

1.0.6

12 months ago

1.0.5

1 year ago

1.0.6-rc.4

1 year ago

1.0.6-rc.3

1 year ago

1.0.6-rc.5

1 year ago

1.0.6-rc.2

1 year ago

1.0.6-rc.1

1 year ago

1.0.2

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2-rc.3

1 year ago

1.0.2-rc.4

1 year ago

1.0.2-rc.1

1 year ago

1.0.2-rc.2

1 year ago

1.0.2-rc.0

1 year ago

1.0.1

1 year ago

1.0.1-rc.0

1 year ago

1.0.0

1 year ago