Arquivo de breakingpoints

[Alecell]

Describe the feature
Pesquisa e implementação de breakpoints no projeto, utilizando SCSS e a abordagem mobile-first.

Description

Realizar uma pesquisa para determinar quais breakpoints serão mais adequados para o projeto, com base em dispositivos e resoluções comuns. Criar um arquivo SCSS chamado "breakpoints.scss", que conterá mixins para cada breakpoint definido. Os mixins devem seguir a convenção de nomenclatura "fromXXXX", onde "XXXX" é o valor do breakpoint, indicando que o estilo se aplica a partir dessa resolução em diante. É fundamental que os valores dos breakpoints sejam armazenados em variáveis e não diretamente nos mixins @media para promover reutilização e fácil manutenção.

Use Case

A definição clara e a fácil reutilização de breakpoints são essenciais para um design responsivo eficaz, especialmente quando adotando uma abordagem mobile-first. Ter mixins prontos para uso facilita a implementação de estilos responsivos em todo o projeto e ajuda a manter a consistência e a clareza no código.

Implementation Details

Inicie pesquisando breakpoints comuns e relevantes para o projeto, considerando uma variedade de dispositivos e tamanhos de tela. No arquivo "breakpoints.scss", defina variáveis para cada breakpoint (por exemplo, $bp-small: 480px;). Em seguida, crie mixins que utilizam essas variáveis dentro de declarações @media. Por exemplo:

@mixin fromSmall {
  @media (min-width: $bp-small) {
    @content;
  }
}

Certifique-se de que o arquivo "breakpoints.scss" seja bem documentado e explique como e quando usar cada mixin. Teste os mixins para garantir que eles funcionem conforme esperado em diferentes cenários e dispositivos.

Visual Concepts

Embora esta tarefa não envolva conceitos visuais diretamente, pode ser útil incluir uma tabela ou gráfico no arquivo ou na documentação relacionada que mapeie os breakpoints escolhidos com os dispositivos ou tamanhos de tela correspondentes, proporcionando uma referência rápida para a equipe de desenvolvimento.

Additional Information

Forneça recomendações sobre como adicionar ou ajustar breakpoints no futuro e destaque a importância de manter a consistência na nomenclatura e no uso dos mixins. Inclua também qualquer recurso ou pesquisa que informou a escolha dos breakpoints para oferecer contexto adicional à equipe.

[Alecell]

Obrigado por abrir a issue

Verifique os nossos guidelines:

• Código de conduta
• Contribuição
• Guia de Estilo

[JonasGz]

eu quero!!!