Get Started

Version

version

O projeto Ugla foi desenvolvido com o objetivo de minimizar esfor√ßos no desenvolvimento FrontEnd de sistemas, trazendo consistencia e seguran√ßa para projetos que necessitam conversar entre si ou, que sejam totalmente independentes, mantendo uma identidade √ļnica e de f√°cil entendimento.

O que é Ugla?#

Ugla é na realidade um projeto que visa unir em seu nome tudo aquilo que se faz necessário para o desenvolvimento de um sistema.

Protótipo#

Todos seus componentes são planejados separadamente e adicionados a uma biblioteca de protótipo. Seus componentes são desenvolvidos no Figma.

Angular#

Cada componente do protótipo é desenvolvido dentro de uma biblioteca Angular que, considerando cada possibilidade, implementa de forma prática o que foi previsto no protótipo.

SCSS#

Junto a biblioteca Angular, o projeto possu√≠ uma estrutura SCSS que cont√©m classes que auxiliam no desenvolvimento das aplica√ß√Ķes.

Dependências#

Tentamos desenvolver o Ugla com c√≥digo 100% limpo, sem usar bibliotecas que n√£o s√£o de fato √ļteis e indispens√°veis. Por√©m, n√£o conseguimos uma pureza em 100% e por isso temos algumas bibliotecas inclusas.

√ćcones#

Os ícones presentes no Ugla fazem parte do pacote de ícones do Material.

Instalando e Configurando#

Estando em um projeto Angular 2 ou mais, basta executar o comando abaixo no terminal, na raiz do projeto:

npm i ugla

Instale também as dependencias necessárias para o Ugla funcionar corretamente:

npm i filepond filepond-plugin-file-validate-size filepond-plugin-file-validate-type filepond-plugin-image-crop filepond-plugin-image-exif-orientation filepond-plugin-image-preview filepond-plugin-image-resize filepond-plugin-image-transform filepond-plugin-image-validate-size js-datepicker ngx-filepond moment tooltip.js

Em seguida, é necessário configurar o Ugla dentro do projeto:

path/src/app/app.module.ts
import { UglaModule, Themes } from 'ugla';
path/src/app/app.module.ts
imports: [
BrowserModule,
...,
UglaModule.forRoot({themeName: Themes.YELLOW}),
],
Themas

Você pode escolher entre um dos temas que o Ugla possuí: RED, YELLOW, AQUAMARINE, GREEN, GRAY e WHITE.

path/style.scss
@import '~ugla/sass/index';

Dentro do angular.json, no nó architect.build.options, logo abaixo do script: [] adicionar o trecho abaixo:

path/angular.json
"allowedCommonJsDependencies": [
"lodash"
]

Com isso, seu projeto j√° est√° com Ugla e pronto para ser usado.