Detalhes do pacote

@vergelijkdirect/styles

vergelijkdirect1.6kISC1.1.11

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.

readme (leia-me)

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 [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git] more about npm version
  3. npm publish