- magick.css é um framework CSS de arquivo único, quase classless, que busca oferecer um estilo de documentos web parecido com “anotações de um mago”, fáceis de ler e eficazes na transmissão de informação
- Funciona em todos os tamanhos de tela e pode ser usado sem JavaScript, o que facilita sua aplicação direta em documentos estáticos ou páginas HTML leves
- Pode ser instalado via CDN, inclusão direta do arquivo ou import via npm, e a configuração com
normalize.css é recomendada
- A estrutura básica é centrada em
e para colunas legíveis, e é possível adicionar explicações complementares ao lado do texto com `` e sidenote
- Ele estiliza a maioria dos elementos HTML básicos, mas recursos que exigem estrutura, como sidenotes e numeração de linhas em código, são fornecidos por classes separadas
Objetivo e caráter do magick.css
- magick.css é um framework CSS minimalista e em sua maior parte classless
- Vem em um único arquivo, e os comentários no CSS permitem acompanhar o motivo das escolhas
- Visualmente, cria uma atmosfera mágica elegante e brincalhona, priorizando legibilidade e clareza na comunicação
- Mantém aparência e funcionalidade em todos os dispositivos e tamanhos de tela, funcionando sem JavaScript
- Foi inspirado por LaTeX, livros antigos de regras de TTRPG, concrete.css, Tufte CSS e pela ética brutalista de “usability as design”
Instalação e formas de uso
- Para testar rapidamente, adicione 2 folhas de estilo via CDN ao `` do HTML
- Também é possível baixar o arquivo
magick.css do repositório e incluí-lo como CSS comum
- Em projetos JavaScript, instale via npm e depois importe
npm install normalize.css magick.css
import 'normalize.css'
import 'magick.css'
- Por ser uma configuração 99% classless, foi feito para ser fácil de aplicar também a documentos HTML5 existentes
Layout focado na leitura
- Para criar colunas responsivas, a recomendação é envolver todo o conteúdo com
e dividir textos longos com
- A estrutura típica de um documento é colocar
, vários e dentro de
- Mesmo sem seguir essa estrutura, é possível usar o magick.css apenas para tipografia e componentes estilizados
- Informações adicionais são representadas com a tag ``
- Quando quiser acrescentar contexto extra no meio do texto, use sidenote; os números são atribuídos automaticamente
Estilo dos elementos HTML básicos
- A tipografia cobre títulos, parágrafos, links, ênfase, sublinhado, texto pequeno e código inline
- Headings abaixo de `` não são estilizados pelo magick.css
- A premissa é que headings de níveis mais baixos muitas vezes são usados para fins especiais, e não para hierarquia estrutural
- Se necessário, o usuário pode estilizá-los diretamente
- As listas são mantidas simples para não atrapalhar o conteúdo
- Listas não ordenadas
- Listas ordenadas
- Listas de descrição
- As tabelas usam um estilo claro e conciso para manter o foco nos dados
- Formulários e elementos de entrada podem ser usados isoladamente ou dentro de um form
- Como entradas de texto têm usos diversos, não há uma opinião forte sobre tamanho ou posicionamento
- Labels de checkboxes e radio buttons são esperados após o input
- Forms são estilizados para chamar a atenção do usuário com uma sensação de anotação manuscrita em papel
Mídia, código e citações
- Imagens e vídeos podem ser posicionados isoladamente ou colocados dentro de `` com legendas
- Um `` isolado é exibido em tamanho natural quando há espaço suficiente, sem ser esticado ou distorcido
- Usando
e, é possível destacar melhor a mídia e adicionar contexto
- Para código inline, use
; para blocos grandes de código, use a estrutura em que envolve ``
- Trechos de código também podem ser exibidos como figure
- Citações usam ``
- A atribuição da fonte é adicionada com `` dentro do blockquote
- Textos em que a formatação é importante, como poemas, podem ser envolvidos com ``
Recursos usados com classes separadas
- Alguns recursos exigem uma class especial e ficam separados do comportamento classless principal do magick.css
- Para inserir uma sidenote no texto, adicione juntos o ponto de referência e o corpo da sidenote
Sidenote Content.
- Em dispositivos móveis, a sidenote é movida para dentro da coluna principal
- Para exibir números de linha em blocos de código ou pre, é preciso inserir um `` contendo cada número de linha
- A inserção de números de linha pode ser feita da forma que preferir: manualmente, com JavaScript ou por processamento server-side
Links do projeto
- Se gostar, você pode dar uma estrela no GitHub
- Se tiver interesse em outros trabalhos, pode entrar no Discord
1 comentários
Opiniões no Hacker News
Gosto de como a letra manuscrita nas áreas de entrada combina com as serifas orgânicas, e de como houve cuidado até com a altura de linha e o peso bem equilibrados
Código para quem tiver interesse: https://github.com/wintermute-cell/magick.css/blob/master/ma...
Seria bom ter checkboxes e radio buttons customizados também. No momento, só esses dois quebram a imersão; o resto é realmente excelente. Talvez finalmente me faça criar aquele blog em que venho pensando há tempos
Combina tão bem que quase nem se percebe
Repare que a tag de fechamento é header, não main
Eu queria ver rapidamente como era, mas tive que passar por mais algumas etapas para ver o original. Pelo menos seria bom ter um link clicável direto para a forma não processada
Estranhamente, esse clima me atrai muito
Além disso, aquele visual extremamente minimalista, quase só HTML, como os sites de antigos professores universitários, também parece legal
Queria que blogs pessoais fossem mais populares
Pelo menos nos meus textos, sejam técnicos ou não, imagens e texto formam uma narrativa contínua. Reorganizar as imagens e movê-las para outro lugar faz tão pouco sentido quanto fazer isso com os parágrafos
Na verdade, é melhor não escrever nada totalmente em caixa alta. Como o sublinhado, é uma forma de ênfase vinda da era das máquinas de escrever, quando só era possível usar uma fonte
As formas das letras maiúsculas são parecidas demais entre si. Como não há variação na altura das letras, fica mais difícil para os olhos lerem. Misturar maiúsculas e minúsculas cria variação, com letras descendentes como y, p, j e ascendentes como b, d, t, tornando tudo mais fácil de reconhecer
Para ênfase, é melhor usar tamanho, peso e itálico
Mas é justamente isso que também cria um estilo distinto
Ainda assim, acho que gosto
É fácil encontrar frameworks genéricos muito bons, mas, quando se quer algo com uma personalidade marcante, é bem mais difícil
https://www.mcsweeneys.net/articles/im-comic-sans-asshole
Especialmente quando o peso menor se combina com o tema escuro, o texto fica bastante desconfortável de ler
Em vez de lidar com isso pelo bom senso, o Google acabou fazendo uma pesquisa com 800 usuários para chegar à conclusão de que “campos de entrada de texto devem parecer campos de entrada de texto”: https://medium.com/google-design/the-evolution-of-material-d...
Fiz um há algum tempo, mas provavelmente não é tão bom quanto este: https://elementcss.neocities.org