simpledev.css é uma nova estrutura CSS que descrevo como uma estrutura principalmente sem classes. Eu chamo isso de sem classe porque grande parte do código usa seletores de tipo, então você não precisa adicionar muitas classes para estilizar sua página da web. Existem algumas turmas, mas tentamos mantê-las no mínimo (até agora existem apenas cerca de 42 turmas).

Vamos examinar alguns dos recursos abaixo!

Características

1. Design principalmente sem classes: É quase sempre sem classes, então você verá a transformação de sua página HTML simples assim que adicionar a estrutura.
2. Classes mínimas para elementos comuns: Fornecemos classes para coisas que são realmente comuns: uma barra de navegação, fazer links parecerem botões, um rodapé básico, etc.
3. Foco na acessibilidade: Não sou um especialista em acessibilidade, mas tentei o meu melhor para incorporar as melhores práticas de acessibilidade à estrutura. Portanto, a estrutura possui um componente skip link, uma classe visualmente oculta e usamos rems para tamanhos de fonte.
4. Suporte a temas: simpledev.css oferece suporte a diferentes temas. Você pode usar apenas o modo claro, apenas o modo escuro ou ambos.
5. JavaScript mínimo: É muito leve em JS. Usamos JS apenas para o componente da barra de navegação. Se você não estiver usando a barra de navegação (ou estiver usando o componente simples da barra de navegação), poderá pular totalmente o JS!
6. Fácil de começar: Temos uma página de primeiros passos que contém modelos básicos e avançados que você pode copiar ou baixar, um repositório GitHub que você pode baixar ou usar para iniciar um novo repositório e uma caneta do CodePen para experimentá-lo diretamente no seu navegador.
7. Receitas: Também temos uma página de Receitas onde você pode copiar e colar regras CSS em seu arquivo custom.css para obter coisas como uma barra de navegação fixa, cantos arredondados, tabelas listradas e rolagem suave!
8. Paletas de cores personalizadas: Você pode trazer sua própria paleta de cores. simpledev.css realmente não tem nenhuma cor por padrão, então você pode escolher suas próprias cores e adicioná-las à estrutura.
9. Componentes modulares: Tecnicamente, você pode baixar alguns dos componentes e usá-los individualmente, se desejar. Basta visitar o repositório GitHub e baixar os arquivos CSS desejados. Lembre-se de que desenvolvemos nossos componentes com base no Modern Normalize, então talvez seja necessário incorporar o Modern Normalize para obter a mesma aparência.

Fundo

No ano passado descobri o repositório awesome-css-frameworks no GitHub. Ele contém uma longa lista de frameworks CSS agrupados em diferentes categorias. Fiquei particularmente interessado na seção sobre frameworks CSS sem classe. Gostei da ideia de vincular a um arquivo CSS e mudar instantaneamente a aparência de uma página HTML sem ter que modificar seu HTML.

Inicialmente, me inspirei no framework chamado Water.css na lista, mas depois me inspirei mais no Pico.css, outro framework sem classes.

Eventualmente decidi tentar criar meu próprio framework. Porém, eu queria que fosse um pouco diferente:

• Decidi usar apenas CSS vanilla em vez de Sass. Isso porque eu queria que fosse fácil para outras pessoas experimentarem o framework e também aprenderem com o código-fonte.
• Eu não queria que fosse puramente sem classes, porque acho que há algumas coisas que exigem classes CSS.
• Pico é provavelmente o framework CSS sem classe mais bonito, mas sinto que alguns dos elementos/componentes são um pouco grandes, então queria que meus elementos/componentes fossem menores.

Conclusão

Obrigado por ler esta postagem! Tenho alguns favores a pedir:

1. Por favor, marque o repositório no GitHub com uma estrela!
2. Tente construir um pequeno projeto com a estrutura
3. Se você notar algum problema, crie um problema no GitHub
4. Se você tiver alguma solicitação de recurso, inicie uma discussão no GitHub
5. Se você tem uma ideia para um componente, tente construí-lo no CodePen!

Deixe um comentário abaixo se tiver alguma dúvida ou sugestão! Provavelmente também seguirei com um tutorial sobre simpledev.css mais tarde.