Soluções UI, desenho

Layout com múltiplas soluções

O layout de uma página web é uma forma de apresentação dos conteúdos, que pode ter múltiplas soluções de visualização derivado da tipologia da grelha para a web. Na verdade a grelha define as combinações possíveis do layout de uma página e tem uma estrutura: fléxivel, ajustável e responsiva. A grelha para trabalhar os layouts assenta numa base com 12 colunas. É possível ter boas soluções para compor o layout da página, uma vez que a grelha permite ter qualquer quantidade de colunas columns dentro de um container. Ou seja pode colocar as colunas como pretender (tal como o exemplo abaixo) e adicionar à coluna ou container uma "classe" para mudar o fundo, distâncias, alturas, e outras funções. Qualquer elemento ou componente pode estar dentro de uma determinada coluna, desde que esta fique dentro do container. O conteúdo a trabalhar só tem que ter a coluna devidamente identificada por col-[1-12] (uma a doze colunas).

col-12 (100%)
col-9 (75%)
col-6 (50%)
col-3 (25%)

Mais soluções técnicas sobre este assunto.

KIT com as soluções para o User Interface

O projeto estilos foi pensado para ter um KIT técnico individual que faculta a informação necessária para as soluções de User Interface. O programador e web-designer tem ao dispor um KIT completo com código atualizado para as soluções mais comuns dos componentes para projetos web (sejam sites, aplicações ou plataformas). Juntamente com o KIT existem ainda, em paralelo, diretrizes de implementação técnica para os projetos web que estão, separadamente noutro menu, do guia dos estilos. A base independente da estrutura HTML, do KIT, permite uma fácil atualização e também a reutilização do código da CSS e do HTML para as soluções dos componentes, elementos e layouts das páginas para os projetos web da Fundação para a Ciência e a Tecnologia. A lista completa das soluções para as componentes estão trabalhados no KIT UI e devem ser atualizadas pela equipa de desenvolvimento (sempre que necessário, mas mencionado no projeto essa mesma atualização).