Este documento descreve como o framework CSS OpenProps foi utilizado para estilizar o site do professor do IFNMG-Salinas: Arthur Porto. O documento destaca as principais funcionalidades e benefícios aplicados no projeto.
O OpenProps é um framework CSS que fornece uma coleção de variáveis CSS reutilizáveis (CSS Custom Properties). Ele facilita a aplicação de estilizações consistentes, permitindo que você utilize variáveis predefinidas para cores, espaçamentos, tipografia, animações e muito mais. Link oficial: OpenProps
Estilizar o site do Arthur utilizando o OpenProps, explorando suas funcionalidades para demonstrar como o framework pode ser aplicado de forma prática em um projeto web. Link do site: https://04-open-props.vercel.app/
O site do OpenDrops disponibiliza suas instalações, utilizamos no css:
Adicionar o OpenProps ao projeto:
Utilize o recurso @import no arquivo CSS principal para incluir o OpenProps e seus pacotes adicionais.
Importando o OpenProps:
@import "https://unpkg.com/open-props";
Importando pacotes opcionais:
@import "https://unpkg.com/open-props/normalize.min.css";
@import "https://unpkg.com/open-props/buttons.min.css";
Importando temas:
@import "https://unpkg.com/open-props/normalize.dark.min.css";
@import "https://unpkg.com/open-props/buttons.dark.min.css";
Importando pacotes individuais:
@import "https://unpkg.com/open-props/easings.min.css";
@import "https://unpkg.com/open-props/animations.min.css";
@import "https://unpkg.com/open-props/gradients.min.css";
O OpenProps é uma excelente ferramenta para estilização de projetos web. Sua simplicidade e grande coleção de variáveis facilitam a criação de designs consistentes e elegantes. O site do Arthur foi estilizado com base nas melhores práticas do OpenProps, demonstrando como o framework pode ser usado para criar um design moderno e funcional.