OWSE CSS Framework

Este é um framework CSS personalizado para projetos Vue.js. Ele inclui temas personalizáveis e uma variedade de utilitários e componentes para ajudar a acelerar o desenvolvimento.

Instalação

Para instalar as dependências do projeto, execute o seguinte comando no terminal:

npm install

Desenvolvimento

Para iniciar o servidor de desenvolvimento e recarregar automaticamente as alterações, execute:

npm run serve

Temas

Este projeto inclui suporte para temas personalizados. Atualmente, temos temas azul e verde disponíveis.

Para desenvolvimento utilize o theme-teste.scss no arquivo vue.config linha 22. Caso alguma nova variável seja criada no arquivo theme-teste.scss ela deverá ser replicada nos outros temas.

Os temas publicados ficam disponíveis na pasta dist/theme-nome-do-tema e para compilar, execute um dos seguintes comandos:

npm run build:blue
npm run build:green

Estrutura dos arquivos

global-colors.scss Variáveis de cores 
theme-nome-do-tema.scss Variaveis do tema
global.scss Importar todos os arquivos SASS

Utilizando o Framework em Outro Projeto

Para utilizar o [OWSE CSS Framework]como uma dependência em outro projeto Vue.js, siga os passos abaixo:

1. Instale o pacote:

   Adicione o pacote owse-css-framework ao seu projeto:

   npm install owse-css-framework

Selecionando um Tema

No seu projeto, importe o arquivo CSS do tema desejado. Por exemplo, para utilizar o tema verde, adicione a seguinte linha no seu arquivo principal (por exemplo, [main.js]

import 'owse-css-framework/dist/theme-green/green.min.css';

Certifique-se de substituir [theme-green/green.min.css]pelo caminho correto do tema que você deseja utilizar.

Aqui está um exemplo de como importar e definir o tema no seu projeto:

// main.js
import Vue from 'vue';
import App from './App.vue';

// Importa o tema desejado do OWSE CSS Framework
import 'owse-css-framework/dist/theme-green/green.min.css';

new Vue({
  render: h => h(App),
}).$mount('#app');

Temas Disponíveis

Atualmente, os seguintes temas estão disponíveis:

• [theme-blue/blue.min.css]
• [theme-green/green.min.css]
• [theme-test/test.min.css]

Certifique-se de replicar qualquer nova variável criada no arquivo [theme-test.scss] nos outros temas.

Estrutura dos Arquivos

• [global-colors.scss]Variáveis de cores globais
• [theme-nome-do-tema.scss]Variáveis específicas do tema
• [global.scss] Importa todos os arquivos SASS

Linting

Para executar o linting no código, execute:

npm run lint

Contribuindo

Contribuições são bem-vindas! Por favor, leia as diretrizes de contribuição antes de enviar um pull request.