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.
-
Clone the repo
-
Install dependencies -
npm install -
Start dev server -
npm run dev -
Add the changes to sass
-
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>
-
Open the
http://localhost:3000to check the styles
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
-
Install the
@vergelijkdirect/stylespackage use the exact version of the packagenpm i @vergelijkdirect/styles@x.x.x --save-exact -
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.
This project requires the following environment:
- Node.js (version 20.11.1)
- npm (version 10.2.4)
npm run sass:compilenpm version patchnpm publish