Template base
Introdução a estrutura padrão do CPS Front-end para começar a trabalhar com nossos templates modelos disponibilizados com objetivo de atender às suas necessidades.
Conteúdo
Estrutura Base
Conheça a estrutura base de um arquivo HTML do CPS Front-end.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template Padrão - CPS Front-end</title>
<!-- CPS Front-end CSS -->
<link rel="stylesheet" href="http://bb.adammacias.com.br/cps-frontend/assets/css/centropaulasouza.css">
</head>
<body>
<!-- Cabeçalho -->
<header class="cps-header">
...
</header>
<!-- Barra de navegação -->
<nav class="cps-navbar">
...
</nav>
<!-- Título da página (Banner) -->
<header class="cps-banner">
...
</header>
<!-- Conteúdo da página -->
<main class="cps-main">
<div id="content" tabindex="-1">
...
</div>
</main>
<!-- Rodapé -->
<footer class="cps-footer">
...
</footer>
<!-- jQuery (obrigatório para plugins JavaScript do CPS Front-end) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- CPS Front-end JavaScript -->
<script src="http://bb.adammacias.com.br/cps-frontend/assets/js/main.min.js"></script>
</body>
</html>
Wireframes
Template padrão do CPS Front-end.
Template com barra lateral do CPS Front-end.
Tutorial
Siga o passo a passo de como criar o template padrão.
Passo 1 - Pulo de navegação
É importante usar o link pulo de navegação para fazer sua página o mínimo acessível, saiba mais lendo nosso guia de boas práticas.
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container">
<span class="skiplink-text">Pular para o conteúdo</span>
</div>
</a>
Passo 2 - Cabeçalho
O conteúdo do cabeçalho é formado pelo logo da sua instituição (FATEC ou ETEC) e os do Centro Paula Souza e Governo do estado de São Paulo.
Veja como utilizar os cabeçalhos.
Passo 3 - Barra de navegação
A barra de navegação contém os principais links da sua página, como: Início, Institucional, Cursos, Vestibular, Contato e outros.
Veja como utilizar a barra de navegação.
Passo 4 - Título da página (Banner)
É utilizada a tag <header>
com a class .cps-banner
para definir o banner onde será exibido o título e descrição da página, nem todas as páginas devem usa-lo, como é caso do template home, por exemplo.
Passo 5 - Conteúdo da página
É utilizada a tag <main>
para definir o contéudo da página, normalmente é formado por apenas um <div id="content">
(Página padrão) ou <div id="content">
+ <aside class="cps-sidebar">
(Página com barra lateral), mas isso pode variar de acordo com sua necessidade.
Página padrão
Não há necessidade de usar a classes .row
ou .col-x-x
.
<main class="cps-main">
<div id="content" tabindex="-1">
...
</div>
</main>
Página com banner (Título)
O banner é usado para mostrar o título e descrição de uma página. Para utilizar, basta acrescentar a tag <header>
com a classe .cps-banner
antes do ínicio de main.cps-main.
<header class="cps-banner">
<h1>Título da página</h1>
<p class="lead">Sub-título da página com descrição...</p>
</header>
<main class="cps-main">
...
</main>
Página com barra lateral
São utilizadas as classes .row
após o main.cps-main e .col-x-x
em div#content e aside#sidebar.
<main class="cps-main">
<div class="row">
<div id="content" class="col-md-9" tabindex="-1">
...
</div>
<aside id="sidebar" class="col-md-3">
...
</aside>
</div>
</main>
Passo 6 - Rodapé
O rodapé do site é utilizado para mostrar o autor(es) do site e links de redes sociais ou de páginas.
Exemplo completo
Copie o código HTML abaixo para começar a trabalhar com nosso template padrão utilizando o CPS Front-end.
Veja a renderização do código abaixo.
Observação: Foi utilizada a Fatec Baixada Santista - Rubens Lara como exemplo.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template padrão - CPS Front-end</title>
<!-- CPS Front-end CSS -->
<link rel="stylesheet" href="http://bb.adammacias.com.br/cps-frontend/assets/css/centropaulasouza.css">
<!-- Seu CSS customizado -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container">
<span class="skiplink-text">Pular para o conteúdo</span>
</div>
</a>
<header class="cps-header">
<div class="container">
<div class="logo-group">
<div class="logo-group-item">
<a class="logo logo-fatec" href="#" data-title="Baixada Santista" data-sub-title="Rubens Lara">
<h1 class="sr-only">Fatec Baixada Santista - Rubens Lara</h1>
</a>
</div>
<div class="logo-group-item">
<a class="logo logo-cps" href="http://www.cps.sp.gov.br" title="Portal do Centro Paula Souza" target="_blank">
<h2 class="sr-only">Centro Paula Souza</h2>
</a>
</div>
<div class="logo-group-item">
<a class="logo logo-governo-sp" href="http://www.saopaulo.sp.gov.br" title="Portal do Governo do estado de São Paulo" target="_blank">
<span class="sr-only">Governo do estado de São Paulo</span>
</a>
</div>
</div>
</div>
</header>
<nav class="cps-navbar" data-spy="affix" data-offset-top="140">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapsed" aria-expanded="false" aria-controls="navbar-collapsed">
<span class="sr-only">Alterar navegação</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="#">Fatec-RL</a>
</div>
<div id="navbar-collapsed" class="collapse navbar-collapse ">
<ul class="nav navbar-nav">
<li class="home"><a href="#">Início</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li role="presentation" class="dropdown-header">Graduação</li>
<li><a href="#">Curso 1</a></li>
<li><a href="#">Curso 2</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Graduação a distância</li>
<li><a href="#">Curso 3</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Área exclusiva <i class="fa fa-user fa-fw" aria-hidden="true"></i></a>
<ul class="dropdown-menu">
<li role="presentation" class="dropdown-header">Acesso restrito</li>
<li><a href="#"><i class="fa fa-lock fa-fw" aria-hidden="true"></i> SIGA</a></li>
<li><a href="#"><i class="fa fa-lock fa-fw" aria-hidden="true"></i> Moodle</a></li>
<li><a href="#"><i class="fa fa-lock fa-fw" aria-hidden="true"></i> E-mail Fatec</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Aluno</li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<main class="cps-main">
<article id="content" tabindex="-1">
<h1>Template básico</h1>
<p class="lead">Use este documento para começar uma nova página do seu projeto.</p>
<p>Veja como usar o logo da sua institução na <a href="http://localhost:4000/branding/overview/">página de identidade</a>.</p>
</article>
</main>
<footer id="footer" class="cps-footer">
<p class="text-center">This site is © to CPS Front-end 2015</p>
</footer>
<!-- jQuery (obrigatório para plugins JavaScript do CPS Front-end) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- CPS Front-end JavaScript -->
<script src="http://bb.adammacias.com.br/cps-frontend/assets/js/main.min.js"></script>
</body>
</html>