1.0.22 • Published 8 months ago

@vergelijkdirect/styles v1.0.22

Weekly downloads
-
License
ISC
Repository
bitbucket
Last release
8 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

8 months ago

1.0.21

8 months ago

1.0.22-VER-8002.0

8 months ago

1.0.22-VER-7987.1

8 months ago

1.0.22-VER-7987.2

8 months ago

1.0.22-VER-7987.0

8 months ago

1.0.17-VER-7952.1

8 months ago

1.0.17-VER-7952.2

8 months ago

1.0.17-VER-7952.0

8 months ago

1.0.20

8 months ago

1.0.20-VER-7878.0

8 months ago

1.0.18-VER-7909.0

9 months ago

1.0.20-VER-7909.0

9 months ago

1.0.18-VER-7889.4

9 months ago

1.0.18-VER-7889.3

9 months ago

1.0.19

9 months ago

1.0.18

9 months ago

1.0.18-VER-7889.2

9 months ago

1.0.18-VER-7889.1

9 months ago

1.0.18-VER-7878.0

9 months ago

1.0.18-VER-7878.1

9 months ago

1.0.18-VER-7878.2

9 months ago

1.0.17-VER-7826.0

9 months ago

1.0.17-VER-7826.1

9 months ago

1.0.17

9 months ago

1.0.18-VER-7319.0

9 months ago

1.0.18-VER-7472.0

9 months ago

1.0.18-VER-7889.0

9 months ago

1.0.18-ver-7731.0

9 months ago

1.0.17-VER-7878.0

9 months ago

1.0.17-VER-7878.1

9 months ago

1.0.17-VER-7472.1.0

9 months ago

1.0.17-VER-7319.3

9 months ago

1.0.17-VER-7319.2

10 months ago

1.0.17-VER-7319.5

9 months ago

1.0.17-VER-7319.4

9 months ago

1.0.17-ver-7472.0

9 months ago

1.0.17-VER-7319.1

10 months ago

1.0.17-VER-7319.0

10 months ago

1.0.17-VER-7824.0

10 months ago

1.0.16

10 months ago

1.0.17-ver-7731.0

10 months ago

1.0.15-ver-7832.1

10 months ago

1.0.15

10 months ago

1.0.15-ver-7731.0

11 months ago

1.0.15-VER-7775.1

11 months ago

1.0.15-VER-7775.0

11 months ago

1.0.11-VER-7584.0

11 months ago

1.0.14-VER-7584.1

11 months ago

1.0.14

11 months ago

1.0.13

11 months ago

1.0.12

11 months ago

1.0.12-rc.9

11 months ago

1.0.12-rc.11

11 months ago

1.0.12-rc.10

11 months ago

1.0.12-rc.8

11 months ago

1.0.12-rc.5

11 months ago

1.0.12-rc.4

11 months ago

1.0.12-rc.7

11 months ago

1.0.12-rc.6

11 months ago

1.0.12-rc.1

11 months ago

1.0.12-rc.0

11 months ago

1.0.12-rc.3

11 months ago

1.0.12-rc.2

11 months ago

1.0.12-ver-7731.0

11 months ago

1.0.11-VER-7596.0

12 months ago

1.0.11-VER-7596.2

12 months ago

1.0.11-VER-7596.1

12 months ago

1.0.11-VER-7594.4

12 months ago

1.0.11-VER-7594.3

12 months ago

1.0.11-VER-7594.6

12 months ago

1.0.11-VER-7594.5

12 months ago

1.0.11

12 months ago

1.0.11-ver-7588.0

1 year ago

1.0.11-VER-7594.2

1 year ago

1.0.11-VER-7594.1

1 year ago

1.0.11-VER-7594.0

1 year ago

1.0.10

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.8-ver-7669.0

1 year ago

1.0.8-ver-7571.1

1 year ago

1.0.8-ver-7625.0

1 year ago

1.0.8-ver-7449.3

1 year ago

1.0.8-rc.0

1 year ago

1.0.8-VER-7449.1.0

1 year ago

1.0.8-ver-7571.0

1 year ago

1.0.7

1 year ago

1.0.8-VER-7449.0

1 year ago

1.0.8-ver-7449.1

1 year ago

1.0.8-VER-7540.0

1 year ago

1.0.8-VER-7540.1

1 year ago

1.0.8-VER-7464.1

1 year ago

1.0.8-VER-7464.0

1 year ago

1.0.8-ver-7449.2

1 year ago

1.0.8-ver-7531.0

1 year ago

1.0.7-rc.0

1 year ago

1.0.7-rc.1

1 year ago

1.0.7-rc.2

1 year ago

1.0.6

1 year 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

2 years ago

1.0.2-rc.4

2 years ago

1.0.2-rc.1

2 years ago

1.0.2-rc.2

2 years ago

1.0.2-rc.0

2 years ago

1.0.1

2 years ago

1.0.1-rc.0

2 years ago

1.0.0

2 years ago