Concafras-design-patterns NPM

Biblioteca de Estilos e Mixins LESS para a Concafras

Este pacote npm oferece uma biblioteca de estilos e mixins em LESS, desenvolvida especialmente para facilitar a customização e criação de temas em projetos relacionados à Concafras. A Concafras é um evento espírita anual, realizado durante o Carnaval, que reúne milhares de participantes para cursos que abordam o cotidiano do Centro Espírita, além de muitas outras atividades voltadas ao estudo e prática do Espiritismo.

Funcionalidades

Estilos Personalizáveis: Utilize variáveis e mixins pré-definidos para criar temas customizados de forma rápida e consistente.
Compatibilidade com Angular: Configurações específicas para facilitar a integração com projetos Angular, permitindo o uso direto dos estilos em seus componentes.
DRY (Don't Repeat Yourself): Aplicação de estilos consistentes em todo o projeto, mantendo o código limpo e reutilizável.

Como Usar

1. Configuração de `Path Aliases` no TypeScript

No arquivo tsconfig.json, configure os aliases para garantir que os arquivos LESS sejam encontrados corretamente:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@assets/*": ["assets/*"],
      "@concafras/*": ["node_modules/concafras-design-patterns/*"]
    }
  }
}

2. Configuração de `stylePreprocessorOptions` no `angular.json`

Adicione o caminho dos estilos no arquivo angular.json para que o pré-processador LESS funcione corretamente:

{
  "projects": {
    "nome-do-seu-projeto": {
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": [
                "node_modules/concafras-design-patterns"
              ]
            }
          }
        }
      }
    }
  }
}

3. Importação dos Estilos LESS

Após configurar os aliases, utilize-os em suas importações LESS:

@import "@concafras/_global.less";

Ou diretamente nos componentes:

@import "~concafras-design-patterns/_global.less";

Aqui está a seção explicando o que é um mixin em LESS, juntamente com exemplos práticos de como usá-los:

O que é um Mixin em LESS?

Em LESS, um mixin é uma maneira de incluir um conjunto de propriedades CSS em várias regras. Mixins permitem reutilizar estilos e aplicar variações desses estilos com base em parâmetros. Isso ajuda a manter o código mais organizado e a evitar repetição.

Exemplo de Mixins

Aqui estão alguns exemplos de mixins que você pode usar para aplicar estilos relacionados ao layout de um elemento:

1. Mixin para Display Flex

Este mixin aplica a propriedade display com suporte para várias versões de navegadores:

.mixin-display(@_value: flex) {
  display: ~"-webkit-@{_value}";
  display: ~"-ms-@{_value}box";
  display: @_value;
}

2. Mixin para Flex-Wrap

Este mixin aplica a propriedade flex-wrap para envolver os elementos flexíveis:

.mixin-display-flex-wrap(@_value: wrap) {
  flex-wrap: ~"-webkit-@{_value}";
  flex-wrap: ~"-ms-@{_value}";
  flex-wrap: @_value;
}

3. Mixin para Flex-Direction

Este mixin define a direção do layout flexível, permitindo organizar os itens em colunas ou linhas:

.mixin-display-flex-direction(@_value: column) {
  -webkit-flex-direction: @_value;
  -ms-flex-direction: @_value;
  flex-direction: @_value;
}

Como Usar Mixins

Para usar esses mixins em seu código LESS, basta incluí-los nas regras de estilo dos elementos desejados. Aqui estão alguns exemplos:

.element {
    .mixin-display(flex);
    .mixin-display-flex-wrap(wrap);
    .mixin-display-flex-direction(column);
}

Neste exemplo, o .element será configurado com display: flex, envolverá os itens em linhas (com flex-wrap: wrap), e os itens serão dispostos em uma coluna (com flex-direction: column). Esses mixins garantem que o código seja reutilizável e que as propriedades CSS sejam aplicadas de maneira consistente.

Essa explicação deve ajudar a entender o conceito de mixins no LESS e como aplicá-los em projetos.

Personalização

Temas Customizáveis: Personalize as variáveis em _theme.less conforme as necessidades específicas do seu projeto.
Mixins: Utilize mixins como .mixin-display(flex) e variáveis para cores, garantindo consistência e manutenção facilitada.