Alecell
commented
10 months ago Closed Alecell closed 9 months ago
Alecell
commented
10 months ago 
JonasGz
commented
10 months ago eu quero!!!
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: ```scss @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.