@vergelijkdirect/styles

v1.0.11-VER-7596.2

Published

2 days ago

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.

Downloads

1,296

0High
0Medium
0Low

Vergelijkdirect Styles

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

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: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

Install the @vergelijkdirect/styles package use the exact version of the package
```
npm i @vergelijkdirect/[email protected] --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.

Environment

This project requires the following environment:

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

Publish an NPM Package

npm run sass:compile
npm version patch
npm publish

Published

Vulnerabilities

Links

Maintainers

Keywords