@elvia/elvis NPM

Elvis CSS library

Elvis CSS library offers classes and variables for styling components as well other styling utilities like layout and typography classes.

📚 How to use

Read our get started guide at design.elvia.io to get started using our CSS library and components.

Usage example:

<button class="e-btn">Button</button>

💻 Development

Read about the philosophy behind Elvis here.

Technology

We use SCSS for our classes. With ABEM as our class naming convention.
We use Percy for visual regression testing for our CSS library.
We use Figma for sketching the components. Use Elvia figma to get sketches of how the component should be styled and work.

Create or change CSS library

NOTE! The web project will not work properly before the setup in main project has been done.

Rules

Follow the naming conventions for all classes.
Update Percy tests for the classes at packages/elvis/percy/components. How Percy works
Follow the versioning guidelines for publishing to NPM.

Good to know

Figma: Use the Elvia figma to get sketches of how the component should be styled and work.

Step 0 - Before you begin

Make sure you have done the main project setup.
Navigate to packages/elvis

Step 1 - Running project

Run yarn build to build the classes
Run yarn watch to watch for changes while developing
Test your changes by running the main project at the same time and using the classes in the doc-pages in packages/web. E.g. packages/web/src/app/doc-pages/components/button-doc

Step 2 - Create the classes / component

In packages/elvis/src choose between the components, utilities and variables folders depending on what you are creating.
Create your classes, utilities or variables with the rules explained over in mind.

Step 3 - Document the classes

The classes should be documented in the packages/web folder so that users of the design system can find information on how to use them.

Navigate to packages/web/src/app/doc-pages/components and find the component you want to add documentation to or create a new module (like the ones existing all ready).

Step 4 - Pull request and publish

NOTE! You will need to set up two-factor authentication with NPM to publish your changes. Elvia NPM.

Update version: When doing updates to Elvis remember to alway update the version in packages/elvis/package.json.
Document: the changes / removal or new classes in the CHANGELOG.json file as well as at the correct documentation-page. E.g. packages/web/src/app/doc-pages/components/button-doc. Example of an update in CHANGELOG.json:
```
{
   "version": "8.3.1",
   "date": "April 20, 2022",
   "changelog": [
      {
      "type": "breaking_changes",
      "changes": ["Fixed a class not working properly."],
      "fixes": [
         "Change something to fix something",
         "Another step"
         ],
      "components": [{ "displayName": "Table", "url": "https://design.elvia.io/components/table" }],
      "pages": []
      }
   ]
},
```
The type should be "breaking_changes", "bug_fix", "new_feature" or "patch". Changes describes what changes has been done, while fixes describes steps the user have to do to fix their code to be up to date. Components links to all related components, pages links to all related pages.
Commit & push: to your branch. Husky should run scripts before you are able to commit or push to ensure everything is built and all tests are running. If you are doing just documentation updates skip these scripts with --no-verify.
Pull request: Create a pull request with all the changes at the Design system Github repo.
Preview: Netlify will generate a preview link when the pull request is created. The link can be used to send a preview of the changes e.g. to designers or other developers. Find the link at the bottom of the checkpoint-list in the pull request.
Merge branch: When the branch has been approved from one other member of the team, merge the changes into master.
Publish to NPM: by navigating to packages/elvis in master (after pulling the updates) and use the command npm publish --otp=<code>.

@elvia/elvis-assets-icons @elvia/elvis-colors @elvia/elvis-typography

@everything-registry/sub-chunk-287

12 days ago

20 days ago

20 days ago

27 days ago

28 days ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

7 months ago

10 months ago

8 months ago

8 months ago

7 months ago

10 months ago

8 months ago

9 months ago

8 months ago

8 months ago

9 months ago

6 months ago

6 months ago

6 months ago

9 months ago

8 months ago

5 months ago

8 months ago

8 months ago

9 months ago

7 months ago

7 months ago

7 months ago

10 months ago

7 months ago

6 months ago

8 months ago

8 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago