@colorline/colorline-designsystem

Color Line Design System

Usage no npm install needed!

<script type="module">
  import colorlineColorlineDesignsystem from 'https://cdn.skypack.dev/@colorline/colorline-designsystem';
</script>

README

Color Line Design System

Color Line Design System is an open source tool for building UI Design Systems with Vue.js. It provides you and your team a set of organized tools, patterns & practices that work as the foundation for your application development.

Built on Vue Design System. This tool is built on top of Vue.js, Vue Styleguidist, Webpack, and Theo and is aimed for designers and front-end developers who have at least basic knowledge of component based workflows + HTML, SCSS & JavaScript.

Usage

import {
  ColorLineUiLibrary,
  config,
  DateHelper, //optional
  DOMHelper, //optional
  JSONManipulator, //optional
  SmoothScroll, //optional
} from '@colorline/colorline-designsystem'
import '@colorline/colorline-designsystem/dist/system/system.css'
import '@colorline/colorline-designsystem/dist/system/fonts/fonts.css'
// Fonts are optional. Remember to set up your bundler to include the font files.

config.setValue('svgPath', 'path_to_public_svg_icon_folder')

Vue.use(ColorLineUiLibrary)

Tokens in JavaScript

Tokens in JavaScript use underscore as word separator

import tokens from '@colorline/colorline-designsystem/dist/system/tokens/tokens.json'

console.log(tokens['radius_circle']) /* 50% */

Tokens in SCSS

Tokens in SCSS use hyphen as word separator

@import '../node_modules/@colorline/colorline-designsystem/dist/system/tokens/tokens.scss';

.circle {
  border-radius: $radius-circle; /* 50% */
}

Option: Using single components instead of entire system

You can optionally only use the components you need. To do this you should skip importing and using ColorLineUiLibrary, and instead import the components directly.

// In your Vue component's script section:
import InfoMessage from '@colorline/colorline-designsystem/dist/system/elements/InfoMessage'
export default {
  name: 'YourComponent',
  components: {
    InfoMessage,
  },
}

If you opt to not include the global CSS system.css you will also need to import the component CSS in your component's style section. Be aware that the styles need to be imported in a clean CSS or SCSS style block, as module and scoped blocks break imported style definitions.

@import '../node_modules/@colorline/colorline-designsystem/dist/system/elements/InfoMessage.css';

Vue Design System

Features

  • A set of interconnected patterns & practices for you and your team.
  • A well thought-out terminology, naming conventions, and hierarchy.
  • Get an automated overview of how your design system progresses over time.
  • Global design tokens in YAML format that you can use inside any component.
  • Automatic generation of living, user editable documentation.
  • Easily export and use your Design System as an NPM dependency in another Vue.js or Nuxt.js project.
  • Create a token, an element, or a pattern, and it’s immediately available across all components.
  • Pre-configured Prettier setup for auto-formatting code on both save and before commit.
  • Live Reloading, Autoprefixing, SCSS, and helper functions + simple and sane defaults for SVG and Webfont usage out-of-the-box.
  • Documentation and the app logic are separated, so you can have public docs while the app itself stays private.
  • And more…

Documentation