All Projects → Sysvale → cuida

Sysvale / cuida

Licence: MIT license
A design system built by Sysvale, using storybook and Vue components

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language
SCSS
7915 projects

Projects that are alternatives of or similar to cuida

Nly Adminlte Vue
vuejs2 AdminLte3 template more than 50 components and 10 directives.such as collapse ,sidebar,container,infobox,breadcrumb,card,grid,dropdown,toast,navbar,timeline,icon,progress
Stars: ✭ 44 (+175%)
Mutual labels:  vue-components, bootstrap4, vue2
Amaze Vue
一只基于amazeui样式封装的vue组件库。万水千山总是情,点个star再走行不行~~~
Stars: ✭ 211 (+1218.75%)
Mutual labels:  vue-components, vue2
Heyui
🎉UI Toolkit for Web, Vue2.0 http://www.heyui.top
Stars: ✭ 2,373 (+14731.25%)
Mutual labels:  vue-components, vue2
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (+1481.25%)
Mutual labels:  vue-components, vue2
Vue Codemirror
⌨️ @codemirror component for @vuejs
Stars: ✭ 2,115 (+13118.75%)
Mutual labels:  vue-components, vue2
Vue Styleguidist
Created from react styleguidist for Vue Components with a living style guide
Stars: ✭ 2,133 (+13231.25%)
Mutual labels:  vue-components, design-system
Vuemmerce
👉 Responsive ecommerce template 🛒 built with Vue.js and Nuxt.js
Stars: ✭ 223 (+1293.75%)
Mutual labels:  vue-components, vue2
Vue Particles
Vue.js component for particles backgrounds ✨
Stars: ✭ 1,220 (+7525%)
Mutual labels:  vue-components, vue2
shared-react-components-example
An example of a mono-repository of shared React components libraries!
Stars: ✭ 85 (+431.25%)
Mutual labels:  storybook, design-system
react-uswds
USWDS 3.0 components built in React
Stars: ✭ 108 (+575%)
Mutual labels:  storybook, design-system
ui-kit
D2iQ UI Kit
Stars: ✭ 29 (+81.25%)
Mutual labels:  storybook, design-system
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+75350%)
Mutual labels:  vue-components, vue2
V Dialogs
A simple and clean instructional dialog plugin for Vue2, dialog type including Modal, Alert, Mask and Toast
Stars: ✭ 121 (+656.25%)
Mutual labels:  vue-components, vue2
Vue Objccn
🔥 Use Vue.js to develop a cross-platform full stack application / 用 Vue.js 开发的跨三端应用
Stars: ✭ 1,993 (+12356.25%)
Mutual labels:  vue-components, vue2
Xcui
🍴 A Vue.js 2.x desktop components colletion
Stars: ✭ 88 (+450%)
Mutual labels:  vue-components, vue2
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (+1250%)
Mutual labels:  vue-components, vue2
vue-drag-zone
Drag Zone component for @vuejs
Stars: ✭ 127 (+693.75%)
Mutual labels:  vue-components, vue2
Vue Cnode
基于vue2 + vue-router + vuet + ES6 + less + flex.css重写vue版cnode社区,使用webpack2打包
Stars: ✭ 1,134 (+6987.5%)
Mutual labels:  vue-components, vue2
Awesome Uikit
Collect JS Frameworks, Web components library and Admin Template.
Stars: ✭ 1,136 (+7000%)
Mutual labels:  vue-components, bootstrap4
vue-cli-template-library
Template for developing open-source vue.js libraries with Rollup + Jest + Babel + Storybook + TravisCI + SemanticRelease
Stars: ✭ 61 (+281.25%)
Mutual labels:  vue-components, storybook

⚠️ Estamos removendo o Bootstrap como dependência de projeto! Evite construir em cima de componentes do BootstrapVue e, se possível, evite utilizar classes do Bootstrap!



Cuida logo

A design system built by Sysvale, using storybook and Vue components

https://sysvale.github.io/cuida/

Instalando

  • O Cuida pode ser instalado com o npm:
$ npm i @sysvale/cuida;

Usando

  • Instale o bootstrap-vue como dependência:
$ npm i @sysvale/cuida;
  • Para usar o bootstrap-vue, importe a biblioteca no seu entry point, provavelmente vai ser seu main.js ou app.js:
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
  • Instale o bootstrap-vue com:
$ npm install bootstrap-vue bootstrap;
  • Para usar o cuida, importe a biblioteca no seu entry point, provavelmente vai ser seu main.js ou app.js:
import Cuida from '@sysvale/cuida';
  • E instale o Cuida:
Vue.use(Cuida);
  • Agora para utilizar os componentes, basta usá-los no seu template. Como exemplo, para usar a Badge:
<cds-badge variant="gray"> Conteúdo </cds-badge>
  • Para utilizar os tokens, importe-os na sua tag script.
<style lang="scss" scoped>
	@import 'node_modules/@sysvale/cuida/dist/@sysvale/tokens.scss';
	...
</style>

Desenvolvendo

Configurando o projeto

  • Clone o repositório:
$ git clone https://github.com/Sysvale/cuida.git
  • Instale as dependências e suba o container docker:
$ docker-compose up -d

A aplicação estará disponível na porta 6006, em http://localhost:6006/.

  • Caso não queira usar docker, instale as dependências com:
$ npm i

Executando o Cuida

  • Após a execução do comando docker-composer up -d a aplicação já estará rodando no http://localhost:6006/ .
  • Ou alternativamente, sem o docker, rode apenas:
$ npm run storybook

Testando-o

  • Utilizando o docker:
$ docker-compose exec cuida npm run test

ou

$ ./on-server.sh npm run test
  • Sem o docker:
$ npm run test

Contribuindo

Para informações sobre como contribuir com o projeto, acesse o CONTRIBUTING.MD

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].