Skip to content

Latest commit

 

History

History
132 lines (104 loc) · 4.98 KB

readme.md

File metadata and controls

132 lines (104 loc) · 4.98 KB
Raw

violin.css

Violin.css [DISCONTINUED]

Design system e framework css da Involves.
Documentação »

Importante: Projeto descontinuado devido a inserção do código no repositório de Componentes Angular

Status

Travis license David David

Utilizando

Você poderá utilizar o framework de diversas formas:

  • Baixando o último release
  • Clonando o repositório: git clone https://github.com/involvestecnologia/violin.css.git
  • Adicionando no head do seu html
<link rel="stylesheet" href="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/dist/index.min.css">

<!-- ou caso você queira dar suporte a navegadores antigos -->

<link rel="stylesheet" href="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/dist/index-old-browsers.min.css">
  • Instalar com o npm: npm install -d @involves/violin.css

Estrutura

Estamos utilizando o Fractal como ferramenta de desenvolvimento e documentação.

O projeto está estruturado da seguinte forma:

violin.css/
├── bin/
|   └── test # script para execução dos testes de regressão visual
├── dist/ # arquivos de produção
├── docs/ # arquivos estáticos para a documentação
├── public/ # arquivos públicos utilizados para desenvolvimento
├── src/ # ambiente de desenvolvimento
│   ├── components/
│   │   ├── _partials
│   │   ├── example/ # módulo do componente
│   │   │   ├── example.config.yml # arquivo de configuração do módulo
│   │   │   ├── example.css # css do módulo
│   │   │   ├── example.hbs # markup do módulo
│   │   │   └── README.md # documentação do módulo
│   ├── css/
│   │   ├── base/
│   │   │   ├── variables/
│   │   │   │   ├── typhography.css # variáveis de tipografia
│   |   |   |   └── variables.css # variáveis gerais utilizadas no framework
│   |   |   └── base.css # alteração de elementos
│   │   ├── themes/
│   |   |   └── default.css # tema padrão do framework
│   |   └── index.css # ponto de entrada para compilação do postcss
│   └── docs/ # documentação do fractal

Temos as seguintes npm tasks:

  • commit - utilizada para padronização dos commits
  • version - gerar o changelog
  • start - inicia o ambiente de desenvolvimento
  • start:css - compila o css do projeto e observa por alterações
  • start:fractal - inicia o fractal
  • build - cria o build de produção
  • build:css - builda o css da aplicação
  • build:themes - buildas todos os temas do framework e coloca na pasta de produção
  • build:css:doc - builda o css utilizado na documentação
  • build:css:support - builda a aplicação aplicando cssnext para suporte a navegadores antigos
  • build:fractal - cria uma documentação estática do projeto
  • test:visual - executa os testes de regressão visual
  • test:visual:approve - cria os snapshots de aprovação para os testes de regressão visual
  • analyse - mostra estatísticas referente ao css do projeto

Ambiente de desenvolvimento

cd violin.css
npm install
npm start

Ao realizar algum commit

npm run commit

Testes de regressão visual

Estamos utilizando a biblioteca BackstopJs

Para criar um novo teste, edite o arquivo backstop.json, e insira um novo cenário de teste, de preferência apontando para a url da documentação na páginas de preview do componente

"scenarios": [
  {
    "readySelector": "body",
    "label": "Button",
    "url": "http://localhost:3000/components/preview/button",
    "selectorExpansion": true,
    "misMatchThreshold" : 0,
    "requireSameDimensions": true
  },
  ...
],

Executando os testes

npm test:visual

Versionamento

Para transparência nos nossos ciclos de release, estamos utilizando Semantic Versioning