visualjerk/vue-cion-design-system

CION - Design system boilerplate for Vue.js

CION - Design system boilerplate for Vue.js

CION is a design system build primarily for Vue.js applications. You can use it as a starting point for building your own design system.

The system utilizes design tokens, a living styleguide with integrated code playgrounds and reusable components for common UI tasks.

Living styleguide demo: https://styleguide.cion.visualjerk.de

Landing page demo: https://cion.visualjerk.de

Integrate it in your application: Usage

Project setup

yarn install

Developing

Compiles and hot-reloads living styleguide

yarn dev

Building

Living styleguide

Compiles living styleguide to ./docs

yarn build

Library

Compiles design system as a library to ./dist

yarn build:lib

Helper

Serve living styleguide locally

yarn serve

Lints and fixes files

yarn lint

Projects that use CION

• Human Connection Styleguide: https://styleguide.human-connection.org/

License

MIT License - Copyright (c) Jörg Bayreuther

vue-cion-design-system's Issues

Switch to Dark Mode?

@visualjerk Is there a way that the components could easily switch to dark mode without the need to dublicate the whole styleguide?

Copy field does not work on mobile.

Page scrolls to the bottom when clicking the copy field. Value is not copied.

Use non linear scale!?

A linear scale won’t work

Creating a spacing and sizing system isn’t quite as simple as something like “make sure everything is a multiple of 4px” — a naive approach like that doesn’t make it any easier to choose between 120px and 125px.

For a system to be truly useful, it needs to take into consideration the relative difference between adjacent values.

At the small end of the scale (like the size of an icon, or the padding inside a button), a couple of pixels can make a big difference. Jumping from 12px to 16px is an increase of 33%!

Just like you don’t want to toil over arbitrary values when sizing an element or fine-tuning the space between elements, you don’t want to build your spacing and sizing scale from arbitrary values either.
A simple approach is to start with a sensible base value, then build a scale using factors and multiples of that value.

16px is a great number to start with because it divides nicely, and also happens to be the default font size in every major web browser.

The values at the small end of the scale should start pretty packed together, and get progressively more spaced apart as you get further up the scale.

Here’s an example of a fairly practical scale built using this approach:

The question for me would be, how to use a scale system like that in a intelligent feshion? What do you think @visualjerk?

Better Sidebar

The current implementation of the Sidebar and Mobile Navigation are nice but not optimal. I like the approach apple has used on the developer side and on their main page.

Putting ether the right and middle elements from the topbar into a popover or a fullscreen list of items,
and the sidebar, still as a sidebar but not with 100% width but with the native one and a nice dark overlay beneath it.

Flex grid fails on SSR

Gird is calling window and failing.

does not work -at all- with IE11

I was surprised to see this boilerplate not working in IE11, which unfortunately still has about 11% of marketshare in our business... Simply polyfilling doesn't seem to do the job, so it requires a lot more effort to see why it's not working.

Page examples are not visible

For some reason the page examples are not visible anymore!

Improve Getting Started

You should add how to change (for example) the primary color after setting up the style guide. I was a bit lost the first time. 😅

Use with tailwind / other frameworks

This looks cool.

Maybe I misunderstand how this works, but can you use this with existing frameworks?

For example, an existing CSS setup with Tailwind, and Element UI for components?

I presume that with this you need to use its styles and components?

If not, is Storybook a better bet?

Color Changing Bug

Hello, Thank You for this wonderful and extermely helpfull design system.

I'm currently facing an issue with changing color set up, after editing color.yml and doing yarn build:lib. and then importing the new is a npm package to my project, everything stops working and my app comes to a white screen with nothing loading

Steps to reproduce

git clone https://github.com/visualjerk/vue-cion-design-system vuecds && cd vuecds && yarn install

Trying to setup a hot-reload to edit while viewing

yarn dev

Output:

Syntax Error: Error: SyntaxError: ...............
............................................

Syntax Error: Error: SyntaxError: 
C:\Users\dev\vuecds\src\system\components\typography\Code\Code.vue: Expecting Unicode escape sequence \uXXXX (11:1)

   9 | //
  10 | //
> 11 | \r
     |  ^
  12 | /**\r
  13 |  * The code component is used for displaying lines of code.\r
  14 |  * @version 1.0.0\r


Syntax Error: Error: SyntaxError: C:\Users\dev\vuecds\src\system\components\typography\Heading\Heading.vue: Expecting Unicode escape sequence \uXXXX (15:1)

  13 | //
  14 | //
> 15 | \r
     |  ^
  16 | /**\r
  17 |  * Headings are used as the titles of each major\r
  18 |  * section of a page in the interface.\r


Syntax Error: Error: SyntaxError: C:\Users\dev\vuecds\src\system\components\typography\Icon\Icon.vue: Expecting Unicode escape sequence \uXXXX (7:1)

   5 | //
   6 | //
>  7 | \r
     |  ^
   8 | import icons from '@@/icons'\r
   9 | /**\r
  10 |  * Icons are used to add meaning and improve accessibility.\r


Syntax Error: Error: SyntaxError: C:\Users\dev\vuecds\src\system\components\typography\Logo\Logo.vue: Expecting Unicode escape sequence \uXXXX (7:1)

   5 | //
   6 | //
>  7 | \r
     |  ^
   8 | import svgLogo from '@@/assets/img/logo_cion.svg'\r
   9 | /**\r
  10 |  * This component displays the brand's logo.\r


Syntax Error: Error: SyntaxError: C:\Users\dev\vuecds\src\system\components\typography\Tag\Tag.vue: Expecting Unicode escape sequence \uXXXX (11:1)

   9 | //
  10 | //
> 11 | \r
     |  ^
  12 | /**\r
  13 |  * Tags are used for styling and highlighting small pieces of information.\r
  14 |  * Most of the time they are used for keywords or numbers.\r


Syntax Error: Error: SyntaxError: C:\Users\dev\vuecds\src\system\components\typography\Text\Text.vue: Expecting Unicode escape sequence \uXXXX (16:1)

  14 | //
  15 | //
> 16 | \r
     |  ^
  17 | /**\r
  18 |  * Text is used for styling and grouping paragraphs or words.\r
  19 |  * Defaults to a `p` tag. If nested inside of another text\r


You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

Here All I see is white screen and nothing else.

then I just skipped this issue and went for changing the colors directly

vim src/system/tokens/color.yml 

edit: Switch secondary color value to primary

  - name: color-primary
    value: &color-primary "hsla({!purple}, 40%, 1)"
  - name: color-primary-active
    value: &color-primary-active "hsla({!purple}, 43%, 1)"
  - name: color-primary-inverse
    value: &color-primary-inverse "hsla({!purple}, 97%, 1)"

  - name: color-secondary
    value: &color-secondary "hsla({!teal}, 45%, 1)"
  - name: color-secondary-active
    value: &color-secondary-active "hsla({!teal}, 52%, 1)"
  - name: color-secondary-inverse
    value: &color-secondary-inverse "hsla({!teal}, 97%, 1)"

Then

yarn build:lib

Output:

Syntax Error: Error: SyntaxError: ...............
............................................
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
  File                      Size                     Gzipped

  dist\system.umd.min.js    384.21 KiB               103.23 KiB
  dist\system.umd.js        816.95 KiB               173.95 KiB
  dist\system.common.js     816.58 KiB               173.84 KiB
  dist\system.css           60.51 KiB                7.33 KiB

  Images and other types of assets omitted.

Webpack Bundle Analyzer saved report to C:\Users\dev\vuecds\dist\report.html

After that I create a new git repo and pushed the repo to it, so I would import it as a package in package.json. And so I did. and nothing is showing.

Is there a way to fix it ? or what I'm doing wrong
Thanks

Quirk in Search functionality

There seems to be a reactivity issue when searching for certain terms. For example, if I search for page, space, or spinner on the demo page, the navigation menu doesn't narrow down the terms, instead showing me a list. Many other terms work fine, though.

In the case of spinner, if I make a typo such as spinnner, then correct it back to spinn, it works. I think it is because the list has a chance to clear out entirely, but I'm not sure.

I have been trying to troubleshoot this locally by adding watchers to the menu routes object, but have not been able to fix it so far.

jsdoc-loader issues

Hi !
Thanks for this great boilerplate :)

I'm trying to adapt it to mine and am getting the following error on compiling :

Syntax Error: Error: SyntaxError: /Users/marine/Documents/MAKESENSE/makesense_design-system/src/system/components/typography/Text/Text.vue: Expecting Unicode escape sequence \uXXXX (24:9)

  22 |  */
  23 | export default {
> 24 |   name: \"DsText\",
    |          ^
  25 |   provide() {
  26 |     return {
  27 |       $parentText: this

It seems to be related to the jsdoc-loader file located in src/loader.
Im using version "2.6.12" of the vue-docgen-api, and the package.json says ^2.3.13`

Do you know where that could come from?

How to contribute?

Currently the way the styleguide is used prevents from getting the changes (or fixes) back to the main projects as the git link gets broken. At least thats the case for my current setup as I had to thorw await the git link.

Is there a good way or best practice to keep the git link? An upstream remote does not work as the styleguide lives in a subdirectory. What are your thoughts on that @visualjerk ?