Vue.js component UI library using Tailwindcss by Chec

View the Storybook app

Installation & Usage

You can use either yarn or npm to install the ui-library and it's dependencies from this Github repo.

with yarn

yarn add github:chec/ui-library

with npm

npm install github:chec/ui-library

Setting up Tailwindcss

Create a tailwind.preview.js file at the root of the app exporting the ui-library's custom tailwind.preview.js from it.

module.exports = require('@chec/ui-library/tailwind.config');

Inject the ui-library's compiled css and Tailwind.css file which includes the @tailwind directives to include the ui-library configured Tailwindcss styles/utilities.

/*
ui-library.css compiled css
*/
@import '~@chec/ui-library/dist/ui-library.css';

/*
tailwind.css, uses the @tailwind directive to inject Tailwind's base, components, and utilities styles into your CSS: 
*/  
@import '~@chec/ui-library/src/assets/tailwind.css';

Utilizing Sass mixins

You can import helpful sass mixins such as aspect-ratio.

/* mixins.scss */

@import '~@chec/ui-library/src/assets/mixins.scss';

Mixins

aspect-ratio

use-case:

<div class="image-container">

  <img src="chec.io/image.jpg" />

  <div v-else>
    <h6>
      No Image
    </h6>
  </div>

</div>

.image-container {

  /* tailwind @apply directive */
  @apply w-1/2 max-w-sm; 

  /* apply aspect-ratio mixin */
  @include aspect-ratio(16, 9); 

  /* style fall-back element */
  div {
    @apply bg-gray-300;
  }
}

Translating

We use the vue-i18n library for this. See lang/*.js for the dictionaries. See the dashboard repo's lang/README.md for a detailed guide for using the library. TL;DRs:

<p>{{ $t('paginate.goToFirst') }}</p> renders "Go to the first page"
this.$t(...) from component instance methods

Project setup

git clone https://github.com/chec/ui-library.git

cd ui-library

yarn install

Start Storybook app on port 6006:

yarn storybook:serve

Run the frontend app proper on port 8080:

yarn run serve

Compiles and minifies for production (This is done continously)

yarn build-lib

Lints and fixes files

yarn lint:Fix

Customize configuration

See Configuration Reference.

License

chec/ui-library

ErrorLooks like something went wrong!

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Contributors 10

Uh oh!

Languages

Error
Looks like something went wrong!

Packages