visualjerk / vue-cion-design-system Goto Github PK
View Code? Open in Web Editor NEWCION - Design system boilerplate for Vue.js
Home Page: https://cion.visualjerk.de
License: MIT License
CION - Design system boilerplate for Vue.js
Home Page: https://cion.visualjerk.de
License: MIT License
For some reason the page examples are not visible anymore!
Gird is calling window
and failing.
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?
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 ?
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?
Page scrolls to the bottom when clicking the copy field. Value is not copied.
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.
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.
@visualjerk Is there a way that the components could easily switch to dark mode without the need to dublicate the whole styleguide?
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?
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
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
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.
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. 😅
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.