sistema de design do rastrillo

Uma visão geral de tudo o que o sistema de design oferece. Tema: signal. Idioma: Português.

O sistema de design do Rastrillo quer ser um ponto de partida para que qualquer aplicação tenha uma interface coerente, cuidada e acessível, sem dependência de JavaScript ou com muito pouca, disponível em vários idiomas e escrita em HTML e CSS limpos e modernos. Foi pensado para dar gosto usá-lo com ou sem a ajuda de um LLM, e para se remisturar com facilidade.

A aplicação de demonstração

Uma app a funcionar, feita só com este sistema: um painel, uma lista, um registo aberto. Cada um tem o seu próprio endereço. Sem JavaScript.

Pré-visualização

Computador Telemóvel

Abrir a aplicação de demonstração (abre num separador novo).

Para onde ir a seguir

• Primeiros passosDetalhes sobre as folhas de estilo e os scripts que vêm com o sistema de design do Rastrillo.
• TokensTodas as propriedades personalizadas de que o sistema é feito: a cor e a tipografia do tema, e as escalas de tamanho, espaçamento e raio.
• ÍconesCada slug de ícone, no tamanho em que os componentes o desenham, com a chamada para copiar e o seu nome no lucide.dev.
• Ecrã de listaEcrã de lista genérico com título, barra de ferramentas e linhas que funcionam em computador e em telemóvel.
• ApresentaçãoAs peças pequenas de vocabulário com que se monta um ecrã: estado, identidade, progresso e a única forma de aviso.
• FormulárioTodos os controlos, nos estados em que um formulário a sério os põe. Cada um fica dentro de um rst-box com espaçamento, porque é essa a regra que estes parciais assumem.
• Data e horaOs quatro campos que o datetime.js melhora, cada um mantendo por baixo o seu controlo nativo, para que quem não tenha scripts receba o controlo simples e não um partido.
• RotaAs peças que são uma resposta inteira e não um pedaço de uma.
• Primitivas de interfaceAs formas que um componente não pode ser, porque envolvem um corpo que só quem chama conhece: cartões, grelhas de dados, menus e a moldura própria dos invólucros.
• Datas, números e nomesComo mostrar datas, números, dinheiro, nomes e moradas, e quais se confundem entre si.
• EcrãsExemplos de ecrãs feitos com o sistema de design. Pode usá-los como modelos de partida para as suas próprias aplicações.
• InvólucrosOs invólucros de página que o rastrillo new consegue gerar. Cada um abre a toda a largura.