npm:@involves/violin.css

README

Violin.css

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

Status

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

Usage no npm install needed!