Noções básicas do MAGICK.CSS
magick.css é um framework CSS minimalista, fácil de usar e de entender, (quase sempre) sem classes.- Ele consiste em um único arquivo, com todas as opções comentadas.
- O objetivo é alcançar uma aparência elegante e magicamente brincalhona, maximizando ao mesmo tempo a legibilidade e a capacidade de transmitir informação.
Como usar o MAGICK.CSS
- Recomenda-se usar
magick.css junto com normalize.css.
- Ele pode ser aplicado ao projeto adicionando duas linhas ao
<head> do HTML via CDN.
- Como alternativa, é possível baixar o arquivo
magick.css e incluí-lo no <head> do HTML.
- Em projetos JS, ele pode ser instalado com
npm install e usado no código via import.
- Quando usado com um documento HTML5, 99% das classes se tornam desnecessárias, e alguns recursos interessantes podem ser aproveitados.
Layout
- Para estruturar a página em colunas responsivas e fáceis de ler, todo o conteúdo pode ser envolvido pela tag
<main>, e a tag <section> pode ser usada para dividir conteúdos longos em seções.
- A tag
<aside> pode ser usada para adicionar informações periféricas, e sidenotes podem expandir pontos ou fornecer contexto adicional.
Tipografia
- São mostrados exemplos da tipografia oferecida por
magick.css.
- Títulos abaixo de
<h4> não recebem estilização, e o usuário pode aplicar seu próprio estilo quando necessário.
Conteúdo estruturado
- Listas e tabelas são mantidas simples para não distrair a atenção do conteúdo.
Formulários e entradas
- Elementos interativos podem ser usados de forma independente ou como parte de formulários.
- Exemplos incluem botões, entradas de texto, checkboxes, radio buttons, fieldsets etc.
Mídia e figuras
- Elementos de mídia como imagens e vídeos podem ser usados de forma independente ou apresentados como figuras, acrescentando estrutura e elegância ao conteúdo, com legendas para adicionar contexto.
Código, citações e texto pré-formatado
- O código pode ser exibido inline ou em blocos separados, e citações podem ser adicionadas com a tag
<blockquote>.
Recursos adicionais
- Recursos adicionais como sidenotes e numeração automática podem ser usados, mas como exigem classes especiais, não fazem parte dos recursos principais de
magick.css.
Opinião do GN⁺
magick.css oferece aos usuários uma forma de reduzir a complexidade do CSS e simplificar o design de páginas web.- Esse framework pode ser especialmente adequado para sites centrados em texto, como documentação ou blogs, ajudando o usuário a focar no conteúdo.
- No entanto, ele pode ser limitado para desenvolvedores que desejam construir recursos interativos complexos ou aplicações web dinâmicas.
- Outros frameworks CSS com funcionalidades semelhantes incluem Bootstrap, Foundation e Bulma, e cada framework pode ser escolhido de acordo com casos de uso e preferências específicas.
- Ao adotar
magick.css, é preciso considerar os requisitos de design do projeto e as limitações do framework, equilibrando bem simplicidade e facilidade de uso.
1 comentários
Comentários do Hacker News
Um comentário diz que este é um ótimo exemplo de quando a fonte combina tão bem com o estilo que quase passa despercebida.
Elogiam o sistema de design e a forma como ele é apresentado, dizendo que gostaram até da atenção aos detalhes de altura de linha e peso da fonte. Também compartilham um link para quem se interessa por código. Comentam que a ausência de checkboxes e botões de rádio personalizados quebra um pouco a imersão, mas dizem que isso os inspirou a criar um blog.
Apontam um pequeno erro de digitação em um exemplo simples, observando que deveria fechar
main, e nãoheader.Mencionam o charme de sites pessoais com aparência de documento LaTeX e dizem achar muito legal o estilo de sites ultra-minimalistas de antigos professores universitários. Também expressam o desejo de que blogs pessoais fossem mais populares.
Recomendam Tufte CSS e compartilham um link relacionado.
Dizem que uma fonte script em maiúsculas é péssima para legibilidade e recomendam evitar o uso de caixa alta, preferindo tamanho, peso e itálico para dar ênfase.
Comentam positivamente que a fonte é muito legível e fofa, mas sem exagero, o que a torna atraente.
Observam que, quando fontes remotas são bloqueadas, o texto acaba sendo renderizado em Comic Sans, o que causa uma má impressão.
Dizem que gostariam de ver mais frameworks CSS minimalistas, especialmente porque é difícil encontrar estilos com personalidade.
Afirmam gostar do design e, após verem a tradução para o chinês, dizem ter curiosidade sobre a opinião de quem sabe ler chinês. Mencionam que as opções de fonte são mais limitadas do que no inglês e apontam também que as fotos usadas são diferentes.