Skip to content
Vue Components for Global Brain Design System.
Vue JavaScript CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Add landing page and guide page to the docs Jul 30, 2019
lib Update NPM packages and README instructions Jul 30, 2019
test Fix Modals and Screens wired scrollbar behaviour on windows Jul 23, 2019
.babelrc Add tests Jun 11, 2019
.editorconfig Initial commit Jun 10, 2019
.env.example Add docs Jun 11, 2019
.eslintrc.js Add SAlert component Jun 17, 2019
.gitattributes Initial commit Jun 10, 2019
.gitignore Add tests Jun 11, 2019
.npmignore Ignore logo when packaging NPM Jul 10, 2019
.travis.yml Add CI Jun 11, 2019
LICENSE.md Use full company name in LICENSE.md Jul 10, 2019
README.md
logo-sefirot.png Add logo to the README Jul 10, 2019
nuxt.config.js Google Search Console Verification is not working, so switch to meta … Jul 11, 2019
package.json Update NPM packages and README instructions Jul 30, 2019
yarn.lock Update NPM packages and README instructions Jul 30, 2019

README.md

Sefirot

Sefirot

Travis CI codecov License

This repository contains Vue Components for Global Brain Design System. Components are meant to be clean, sophisticated, and scalable.

Note that Sefirot is focused on being used in Global Brain's ecosystem. Hence the design—UI/UX—of components is quite fixed, and customization capability is limited. In exchange for customizability, we can create components that are more robust, dynamic, and clean.

That's being said, feel free to leverage any component within this project. You may customize them however you want, and if maybe, some component might be valuable to you. Any suggestion, request, or questions are welcome.

Documentation

You can check out the documentation for Sefirot at https://sefirot.globalbrains.com.

Getting Started

At first, install Sefirot via npm or yarn.

# Via NPM.
$ npm install @globalbrain/sefirot

# Via Yarn.
$ yarn add @globalbrain/sefirot

To begin using the components, you should directly import them from lib directory under the Sefirot package.

<template>
  <div>
    <SButton label="BUTTON" />
  </div>
</template>

<script>
import SButton from '@globalbrain/sefirot/lib/components/buttons/SButton'

export default {
  components: {
    SButton
  }
}
</script>

By design, Sefirot doesn't ship with pre-built files, so you must compile the code in your project. Please follow the following instruction to set up your build system.

Sefirot assumes you have your CSS placed at @/assets/styles directory. Make sure to copy styles to your project on the same location. To copy CSS files, simply run the following command. The destination directly (@) should depend on your project setup.

$ cp ./node_modules/@globalbrain/sefirot/lib/assets/styles ./assets/

To compile Vue Components, you must have appropriate build settings. For example, in Nuxt.js, you should define the following settings at nuxt.config.js. In addition, Sefirot uses postcss plugins, postcss-nested and postcss-css-variables. Make sure to define them in your postcss config as well. And the last thing, don't forget to include base bootstrapping global CSS as well.

export default {
  // ...

  build: {
    transpile: ['@globalbrain/sefirot'],

    postcss: {
      plugins: {
        'postcss-nested': {},
        'postcss-css-variables': {},
      }
    }
  },

  css: ['@/assets/styles/bootstrap']

  // ...
}

Easier Component Import

If you think importing components from @globalbrain/sefirot/lib is too long to type, you can set up an alias to reduce the boilerplate. Again, this is an example set up on nuxt.config.js.

export default {
  // ...

  build: {
    // Alias the package path.
    extend (config) {
      config.resolve.alias['sefirot'] = '@globalbrain/sefirot/lib'
    },

    transpile: ['@globalbrain/sefirot'],

    postcss: {
      plugins: {
        'postcss-nested': {},
        'postcss-css-variables': {},
      }
    },

    extractCSS: process.env.NODE_ENV === 'production'
  }

  // ...
}

With the above setting, you can import components from sefirot.

<template>
  <div>
    <SButton label="BUTTON" />
  </div>
</template>

<script>
import SButton from 'sefirot/components/buttons/SButton'

export default {
  components: {
    SButton
  }
}
</script>

Contribution

We're really excited that you are interested in contributing to Sefirot. Before submitting your contribution though, please make sure to take a moment and read through the following guidelines.

Code style guide

Sefirot follows official Vue Style Guide. But always remember to follow the "Golden Rule" below.

Every line of code should appear to be written by a single person, no matter the number of contributors.
— @mdo

Development

$ npm run serve

Serve documentation website at http://localhost:3000.

$ npm run lint

Lint files using a rule of Standard JS.

$ npm run test

Run the test.

$ npm run test:watch

Run the test in watch mode.

$ npm run test:coverage

Generate test coverage in coverage directory.

License

Sefirot is open-sourced software licensed under the MIT license.

You can’t perform that action at this time.