NoZebra Design System

Desenvolvedores

O NoZebra Design System fornece aos desenvolvedores front-end uma coleção de códigos HTML e SCSS reutilizáveis para criar sites e interfaces de usuário. A adoção da biblioteca permite que os desenvolvedores usem marcação, estilos e comportamento consistentes no trabalho de protótipo e produção.

Instalação

npm install --save clickjogos/nozebra-design-system#development

Pacotes Recomendados:

Node SASS

npm install --save-dev node-sass

PostCSS

npm install --save-dev postcss

Autoprefixer

npm install --save-dev autoprefixer

CSS MQPacker

npm install --save-dev css-mqpacker

cssnano

npm install --save-dev cssnano

PostCSS Import

npm install --save-dev cssnano

Estrutura

nozebra-design-system
├── .storybook
├── dist
├── docs
├── scripts
├── src
│   ├── abstracts
│   ├── components
│   ├── utilities
│   └── main.scss
└── tokens
    ├── branding
    └── global

Uso

O uso dos arquivos Sass do NoZebra Design System implicam no uso do pré-processador SCSS. Todos os arquivos Sass usam a extensão de arquivo * .scss.

@import 'nozebra-design-system/dist/tokens/{brand}';
@import 'nozebra-design-system/src/main';

Definições

Atenção

Em desenvolvimento

Ferramentas

EditorConfig

O EditorConfig ajuda a manter estilos de codificação consistentes para vários desenvolvedores trabalhando no mesmo projeto em vários editores e IDEs.

.editorconfig:

root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf
max_line_length = null

Babel

O Babel é uma ferramenta que é usada principalmente para converter o código ECMAScript 2015+ em uma versão compatível com versões anteriores do JavaScript em navegadores ou ambientes atuais e antigos . - Babel

npm install --save-dev @babel/core @babel/preset-env

.babelrc:

{
  "presets": ["@babel/preset-env"]
}

Lint Javascript

Utilitário de linting plugável para JavaScript e JSX. - ESLint

npm install --save-dev eslint

StandardJS

npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

ESLint Babel parser

npm install --save-dev babel-eslint

ESLint plugin for Vue.js (Projetos com Vue.js)

npm install --save-dev eslint-plugin-vue

ESLint plugin for Prettier

npm install --save-dev eslint-config-prettier

.eslintrc.json:

{
  "root": true,
  "env": {
    "browser": true,
    "es6": true
  },
  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 6
  },
  "plugins": ["standard", "vue", "import"],
  "extends": [
    "standard",
    "plugin:vue/essential",
    "prettier",
    "prettier/standard",
    "prettier/vue"
  ]
}

package.json:

"scripts": {
  "lint:scripts": "eslint --ext .js,.vue ./ --fix"
}

Lint CSS

Um poderoso e moderno linter que ajuda a evitar erros e impor convenções em seus estilos. - Stylelint

npm install --save-dev stylelint

Stylelint config recommended

npm install --save-dev stylelint-config-recommended

Stylelint config based on SASS Guidelines

npm install --save-dev stylelint-config-sass-guidelines

Stylelint config for Prettier

npm install --save-dev stylelint-config-prettier

.stylelintrc.json:

{
  "defaultSeverity": "warning",
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-sass-guidelines",
    "stylelint-config-prettier"
  ]
}

package.json:

"scripts": {
  "lint:styles": "stylelint **/*.{css,scss,vue} --fix"
}

Prettier

Um formatador de código opinativo. - Prettier

npm install --save-dev --exact prettier

.prettierrc.json:

{
  "singleQuote": true,
  "semi": false,
  "proseWrap": "always"
}

package.json:

"scripts": {
  "format": "prettier --write **/*.{html,js,json,vue,css,scss,md}"
}

Lint Staged

Execute linters em arquivos git staged. - lint-staged

npm install --save-dev lint-staged husky

package.json:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,vue}": [
    "eslint --fix",
    "prettier --write",
    "git add"
  ],
  "*.{css,scss,vue}": [
    "stylelint --fix",
    "prettier --write",
    "git add"
  ],
  "*.{html,json}": [
    "prettier --write",
    "git add"
  ]
}

VSCode

settings.json:

{
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": false,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "vue-html",
      "autoFix": true
    }
  ],
  "prettier.eslintIntegration": true,
  "prettier.stylelintIntegration": true,
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 80,
      "wrapAttributes": true
    }
  },
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.validation.script": false,
  "vetur.validation.style": false,
  "vetur.validation.template": false,
  "css.validate": false,
  "javascript.validate.enable": false,
  "less.validate": false,
  "scss.validate": false
}

← Baixaki →