O que é o WPF?

WPF 2.0 é um framework CSS desenvolvido com a intenção de simplificar o processo de estilização de aplicações web. Inspirado no popular framework Tailwind e utilizando todo o poder do SASS, WPF 2.0 permite aos desenvolvedores de facilmente criar e aplicar estilos em suas aplicações utilizando uma sintaxe intuitiva e nomes de classes fáceis de entender.

Com o WPF 2.0, você pode facilmente definir estilos que são amplamente únicos e flexíveis, enquanto ainda permanece fácil para manter e atualizar conforme seu projeto HTML definido e o WPF2 importado corretamente, começar a recortar a sua página web é de longe a etapa mais fácil de todo o processo.

Apesar de não existir uma lógica definida ou uma forma obrigatória de organizar as suas classes dentro do atributo class=”” ****no sua tag HTML, existe uma ordem que pessoalmente recomendamos para que você siga e se acostume, para garantir que seu código permaneça legível e organizado.

É importante lembrar que o WPF2 foi desenvolvido tendo em mente um escopo de projeto que é baseado em componentes e, por mais que ele seja ótimo para o recorte e desenvolvimento web tradicional, é através de projetos que utilizam a estruturação MVC que o WPF realmente brilha.

Sugerimos sempre você separe suas classes na seguinte ordem:

<div class=”custom pos display conf. display tam orient extra”></div>

Vamos entrar em mais detalhes sobre como essa organização funciona:

• Custom: Aqui vão todas as propriedades e classes criadas por você que não fazem parte do escopo do WPF. A ideia é que seja fácil visualizar o que é feito específicamente por você para incrementar os estilos que devem ser aplicados somente à uma ocasião específica;
• Posicionamentos: Nessa parte é onde inserimos as primeiras classes específicas do WPF. Aqui vamos tratar de posicionamentos ou tratamentos de posição, como todas as classes que envolvem as propriedades position, box-sizing entre outros similares;
• Display: Agora vamos especificar o tipo de exibição que seu elemento terá: grid, table, block, inline-block, contents, flex entre outros;
• Conf. do Display: E depois damos os detalhes e configurações disponíveis dessa exibição específica, como é o caso de align-items, justify-block, vertical-align entre outros;
• Tamanho e Espaçamento: Definimos então o tamanho do nosso elemento com width e height, além dos espaçamentos disponíveis, como margin e padding;
• Orientações: Por último, caso sua tag HTML necessite, aqui entra todos os tipos de orientações, como orientação de texto em text-align ou denominar um espaço específico do elemento para não renderizar mais linhas de texto do que o instruído, como clamp etc;
• Extra: Se sua tag HTML necessita de outras classes que fazem parte da estrutura do WPF, mas não entram em nenhuma dessas categorias, como transition, transform, filter, entre outras, você pode livremente alocá-las em qualquer ordem após ter organizado tudo seguindo este roteiro.

Lembrando que não é obrigatório utilizar essa organização específica, mas ela é a mais recomendada de todas as maneiras que já testamos esse framework. Pode parecer difícil no começo, mas naturalmente esse tipo de organização vai fazer mais e mais sentido pra vocêevoluí.