Soluções UI, desenho

O porquê do "estilos"?

O projeto estilos é composto por setores, organizados, para fornecer ao "developer" e utilizador a melhor informação sobre a construção das plataformas e aplicações web da FCT. Os elementos e componentes UI foram desenhados e trabalhados para garantir uma melhor consistência visual, extrair fácilmente o código das soluções e atualizar a informação do guia. O objetivo é poupar tempo na informação e na construção das soluções UI tipificadas.

Como instalar

A base de instalação são um conjunto de CSS preparados para trabalhar os projetos de forma independente, ou por uma estrutura tipo, fornecida por nós, para os projetos web. Pode-se efetuar a instalação através de cinco formas, e o modo manual é o mais básico.

A instalação manual

Para começar faça o download completo do projeto base, ou de forma independente retire apenas a CSS para os estilos. A base original do projeto está numa pasta com o nome /dist com o ficheiro base.spectre.css da framework. O tema estilos, com personalização, está localizado na pasta /css com o ficheiro estilos.themeFCT.css. Ainda existem outras CSS que podem auxiliar os projetos, são elas: estilos.themeFCT.icones.css, para utilizar a coleção de ícones personalizados e uma outra CSS para a apresentação estrutural do guia.


Estilos, projeto base

Outros modos de instalação

Existem mais quatro possibilidades de instalação a que os programadores/"developers" podem recorrer e trabalhar. Podem consultar toda a informação através do setor "Suporte" em "Modos de instalação".

Mais sobre este assunto.

Os temas

Os temas web trabalhados para a Fundação têm uma base de construção inspirada na "Framework da Bootstrap". O tema estilos foi trabalhado segundo alguns critérios de aparência visual, provenientes da maqueta e do desenho inicial para as soluções de User Interface.

A estrutura modelo

A estrutura original de construção é inspirada na framework "Spectre". Esta base não pode ser mexida, e a CSS original deve ser respeitada, mas qualquer tema personalizado ou a personalizar pode ser trabalhado, alterado e carregado. No entanto deve estar inserido num esquema semelhante ao que indicamos ao lado.


        ├── Nome do projeto/ (estilos)
        │   ├── dist/                       
        │   │   └── base.spectre.css            
        │   │
        |   ├── css/                       
        │   │   └── guia.css
        │   │   └── estilos.themeFCT.css (o tema) 
        │   │   └── estilos.themeFCT.icones.css 
        │   │   └── fonts/  
        │   │     └──── FCTicones.eot;FCTicones.svg;  
        │   │           FCTicones.ttf;FCTicones.woff 
        │   │ 
        |   ├── js/                       
        │   │   └── app.js
        │   │   └── jquery-3.3.1.min.js        
        │   │                 
        |   ├── docs/
        │   │   └── documento_um.pdf
        |   ├── img/
        │       └── imagem_um.jpg
        │       └── ilustracao_um.svg  
        │