Instalação

É possivel fazer a instalação do CPS Front-end (Atualmente na v1.0.0-alpha) de duas maneiras, escolha a que for mais adequada às suas necessidades.

Conteúdo

Via CDN (Rede de Distribuição de Conteúdo)

Use o CPS Front-end via CDN (Rede de Distribuição de Conteúdo). Também é possível baixar os arquivos fontes através da nossa seção download.

Copie e cole o link da folha de estilo dentro da tag <head>.

<link rel="stylesheet" href="http://bb.adammacias.com.br/cps-frontend/assets/css/centropaulasouza.css">

Adicione nossos plugins JavaScript e jQuery no fim das suas páginas, o lugar correto é antes de fechar a tag </body>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://bb.adammacias.com.br/cps-frontend/assets/js/main.min.js"></script>

Apenas isso basta para você começar a usufruir o CPS Front-end.

Via Download

Faça o download dos arquivos CSS, JavaScript e fonts compilados e minificados, e então, fazer a instalação manualmente.

Baixar CPS Front-end

O que está incluso

Feito o download, descompacte a pasta compactada para ver a estrutura do CPS Front-end (o compilado). Você verá algo parecido com isto:

cps-bootstrap/
├── css/
│   ├── cps.css
│   └── cps.min.css
├── js/
│   ├── cps.js
│   └── cps.min.js
└── brand/
    ├── cps/
    │   ├── logo.svg
    │   ├── logo-dark.svg
    │   ├── logo-gray.svg
    │   └── logo-light.svg
    ├── etec/
    │   ├── logo.svg
    │   ├── logo-dark.svg
    │   └── logo-light.svg
    ├── fatec/
    │   ├── logo.svg
    │   ├── logo-dark.svg
    │   └── logo-light.svg
    └── governo-sp/
        ├── logo.svg
        ├── logo-dark.svg
        └── logo-light.svg

Fornecemos os arquivos CSS e JS compilados (cps.*), tanto como compilados e minificados (cps.min.*). Juntamente com os logos CPS, Etec, Fatec e Governo SP no formato .svg.

Fatos importantes

Para usar de maneira correta o CPS Front-end, é importante que saiba algumas coisas, como:

HTML5 doctype

CPS Front-end faz uso de certos elementos HTML e propriedades CSS que requerem o uso do HTML5 doctype. Para garantir a renderização adequada e sensíbilidade ao toque, adicione a meta tag viewport dentro do <head>.

<!DOCTYPE html>
<html lang="pt-br">
...
</html>

Metatag responsiva

CPS Front-end é desenvolvido para ser amigável com todos dispositivos móveis desde o início. De fato, isso faz com que o Bootstrap torne-se Mobile first. Usamos essa estratégia para diminuir códigos usando CSS media queries.

Para garantir a renderização adequada e sensíbilidade ao toque, adicione a meta tag viewport dentro do <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">