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.
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">