Registro de alterações

1.1 Update
25 de Janeiro de 2025

Pacote

Vamos dar uma olhada no conteúdo do pacote atual:

  • 01 - SGG - Capoeira Template (PHP)
    Inclui a versão abstrata em PHP. Essa versão pode ser muito útil como ponto de partida se você deseja construir uma aplicação PHP personalizada. Ela pode ajudar de várias maneiras:
    • Templating
      Código comum usado apenas uma vez e incluído em cada página (arquivos na pasta /inc).
    • Criação Automática da Navegação Principal
      No arquivo /inc/config.php, você pode alterar o array $primary_nav[] conforme necessário, e a navegação principal será criada automaticamente para você.
    • Variáveis
      No arquivo /inc/config.php, você pode definir algumas variáveis utilizadas em todo o SGG - Capoeira, como o modo de layout (fixo) ou o tema ativo.
    • Tarefas de Demonstração
      Algum código usado para fins de demonstração, como a criação de linhas de tabela com conteúdo fictício.
  • 02 - SGG - Capoeira Template (HTML)
    Inclui a versão abstrata em HTML. Essa versão pode ser usada com qualquer linguagem/framework do lado do servidor que você preferir ou estiver trabalhando no momento.
  • 03 - Extras
    Inclui arquivos PSD para os Glyphicons Pro e o logotipo do FreshUI.
  • Documentação
    Claro, inclui a documentação atual!

Bootstrap

Bootstrap é um dos frameworks front-end mais populares do momento e está repleto de recursos. É fácil de usar e oferece uma grande variedade de componentes CSS e Javascript.

FreshUI foi construído com base nesse framework e o estende em grande medida, apresentando componentes de navegação inteligentes, além da integração de muitos plugins populares do jQuery, como FullCalendar e Datatables. Ele possui um estilo único, limpo e moderno, além de oferecer suporte a todos os recursos do framework Bootstrap. Foi dada atenção aos detalhes para que cada recurso pareça parte do modelo de tema e não apenas mais uma funcionalidade.

Se você não estiver familiarizado com o framework, o site oficial ajudará bastante, mas se quiser começar rapidamente, pode facilmente replicar qualquer recurso ou componente já presente no FreshUI. O que é essencial saber é que os dois arquivos nos quais o framework é baseado (e que são necessários para o FreshUI) são os seguintes:

  • /css/bootstrap.css (inalterado, framework original)
  • /js/vendor/bootstrap.min.js (inalterado, framework original)

Os arquivos acima incluem todos os recursos do framework, exceto o conjunto padrão de ícones Glyphicons. Eles não foram incluídos porque foram utilizados Glyphicons PRO ($59) e FontAwesome (soluções superiores baseadas em fontes para ícones).

HTML

O layout do FreshUI é limpo e simples, como você pode ver no bloco de código a seguir. Para começar rapidamente, você pode usar a página em branco (page_ready_blank.php), criada exatamente para essa finalidade.

Existem várias opções disponíveis que você pode configurar, como a posição do cabeçalho ou o efeito do conteúdo ao abrir uma barra lateral. Se você estiver usando a versão em PHP, não precisa alterar as classes diretamente, pois pode configurar essas opções no arquivo /inc/config.php. 

<!-- Corpo -->
<!--
    Adicione uma das seguintes classes ao elemento body para ativar os recursos desejados:
    "sidebar-left-pinned"                         para fixar a barra lateral esquerda (sempre visível > 1200px)
    "sidebar-right-pinned"                        para fixar a barra lateral direita (sempre visível > 1200px)
    "sidebar-left-pinned sidebar-right-pinned"    para fixar ambas as barras laterais (sempre visíveis > 1200px)
-->
<body class="header-fixed-top">
    <!-- Barra Lateral Esquerda -->
    <!-- Se adicionar a classe .enable-hover, uma pequena parte da barra lateral esquerda ficará visível e poderá ser aberta ao passar o mouse (> 1200px) (pode afetar o desempenho do site) -->
    <div id="sidebar-left" class="enable-hover">
        Conteúdo da Barra Lateral Esquerda
    </div>
    <!-- FIM Barra Lateral Esquerda -->

    <!-- Barra Lateral Direita -->
    <!-- Se adicionar a classe .enable-hover, uma pequena parte da barra lateral direita ficará visível e poderá ser aberta ao passar o mouse (> 1200px) (pode afetar o desempenho do site) -->
    <div id="sidebar-right" class="enable-hover">
        Conteúdo da Barra Lateral Direita
    </div>
    <!-- FIM Barra Lateral Direita -->

    <!-- Contêiner da Página -->
    <!-- Adicione a classe .full-width para uma página de largura total (100%, largura máxima de 1920px) -->
    <div id="page-container">
        <!-- Cabeçalho -->
        <!-- Adicione a classe .navbar-default ou .navbar-inverse para um cabeçalho claro ou escuro, respectivamente -->
        <!-- Adicione a classe .navbar-fixed-top ou .navbar-fixed-bottom para um cabeçalho fixo na parte superior ou inferior, respectivamente -->
        <!-- Se adicionar a classe .navbar-fixed-top, lembre-se de adicionar a classe .header-fixed-top ao elemento <body> -->
        <!-- Se adicionar a classe .navbar-fixed-bottom, lembre-se de adicionar a classe .header-fixed-bottom ao elemento <body> -->
        <header class="navbar navbar-default navbar-fixed-top">
            Conteúdo do Cabeçalho
        </header>
        <!-- FIM Cabeçalho -->

        <!-- Contêiner FX -->
        <!--
            Todos os efeitos são aplicados em resoluções maiores que 1200px de largura.
            Adicione uma das seguintes classes ao #fx-container para definir um efeito no conteúdo principal quando uma das barras laterais for aberta:
            'fx-none'           remove todos os efeitos (melhor desempenho do site)
            'fx-opacity'        efeito de opacidade
            'fx-move'           efeito de movimento
            'fx-push'           efeito de empurrão
            'fx-rotate'         efeito de rotação
            'fx-push-move'      efeito de empurrão e movimento
            'fx-push-rotate'    efeito de empurrão e rotação
        -->
        <div id="fx-container" class="fx-opacity">
            <!-- Conteúdo da Página -->
            <div id="page-content" class="block">
                Conteúdo Principal
            </div>
            <!-- FIM Conteúdo da Página -->

            <!-- Rodapé -->
            <footer>
                Conteúdo do Rodapé
            </footer>
            <!-- FIM Rodapé -->
        </div>
        <!-- FIM Contêiner FX -->
    </div>
    <!-- FIM Contêiner da Página -->
</body>
<!-- FIM Corpo -->

CSS

Abaixo, você pode ver os arquivos CSS junto com suas descrições.

  • /css/fonts/
    Pasta que contém as fontes usadas em /css/plugins.css pelo Glyphicons PRO e FontAwesome.
  • /css/themes/
    Pasta que contém todos os temas disponíveis. Basta incluir o tema escolhido após o main.css e antes do themes.css. Para criar o seu próprio tema, copie e cole um existente, dê um novo nome e altere as cores conforme sua preferência. Se desejar que a nova cor esteja disponível para elementos individuais, adicione-a ao arquivo themes.css, da mesma forma que fizemos (verifique o arquivo). Se estiver usando a versão PHP, lembre-se de que pode definir um tema ativo no arquivo /inc/config.php.
    • amethyst.css
    • dragon.css
    • emerald.css
    • grass.css
    • river.css
  • /css/bootstrap.css
    O framework Bootstrap em sua forma original, sem alterações.
  • /css/plugins.css
    Estilos usados para os seguintes plugins. O estilo original foi alterado para combinar com o design do FreshUI. Sinta-se à vontade para fazer quaisquer alterações neste arquivo.
    • FontAwesome
    • Glyphicons PRO
    • FullCalendar
    • Dropzone.js
    • Chosen
    • Datepicker para Bootstrap
    • WYSIWYG5 para Bootstrap
    • PRISM.js
    • Magnific Popup CSS
    • Datatables
    • Easy Pie Chart
    • CSS3 ANIMATION CHEAT SHEET
    • Bootstrap Timepicker
    • jQuery Tags Input
  • /css/main.css
    Este é o arquivo principal de estilos do FreshUI. Aqui você encontra os estilos do layout, os elementos do FreshUI, bem como sobrescrições e extensões dos estilos do Bootstrap. Abaixo estão as seções do arquivo:
    • LAYOUT PRINCIPAL
    • CABEÇALHO
    • BARRAS LATERAIS/NAVEGAÇÃO
    • CONTEÚDO PRINCIPAL
    • PÁGINAS
    • SOBRESCRIÇÃO/EXTENSÃO DO BOOTSTRAP
    • AUXILIARES
    • RESPONSIVO
    • RETINA
    • IMPRESSÃO
  • /css/themes.css
    Este é o arquivo de estilos para os temas. Deve ser incluído por último, depois de todos os outros arquivos de estilo. As classes contidas neste arquivo podem ser usadas para alterar a cor, o fundo ou a borda de um elemento individualmente. Ele contém todos os temas de cores disponíveis.

No arquivo principal de estilos, comentamos o código da seguinte forma para que você possa navegar e encontrar facilmente a seção desejada. Também adicionamos alguns atalhos para cada seção no início do arquivo, permitindo que você os localize rapidamente através da busca. 

/*

JAVASCRIPT

Abaixo, você pode ver os arquivos JavaScript junto com suas descrições.

  • /js/ckeditor/*
    Necessário para usar o CKEditor em uma textarea. Esta pasta contém todos os arquivos relacionados ao plugin. Você só precisa incluir o arquivo ckeditor.js na página onde deseja utilizá-lo.
  • /js/helpers/excanvas.min.js
    Necessário para que os gráficos Flot e Easy Pie Charts funcionem corretamente no IE8 (carregado apenas no IE8 - inclua-o nas páginas em que você usar gráficos).
  • /js/helpers/gmaps.min.js
    Necessário para a funcionalidade do Google Maps, deve ser incluído junto com a API do Google Maps para usar os mapas.
  • /js/vendor/bootstrap.min.js
    Componentes JavaScript do framework Bootstrap.
  • /js/vendor/jquery-1.11.1.min.js
    A popular biblioteca JavaScript que reduz consideravelmente a quantidade de código que você precisa escrever. Este é o arquivo local e só é incluído caso a versão do Google APIs não possa ser carregada por algum motivo (por exemplo, se estiver trabalhando localmente sem conexão de rede disponível).
  • /js/vendor/modernizr-respond.min.js
    Modernizr, uma biblioteca de detecção de recursos do navegador, e
    Respond.js, permitindo código CSS responsivo em navegadores que não o suportam nativamente.
  • /js/plugins.js
    Todos os plugins JavaScript minimizados e incluídos em um único arquivo. Se você não pretende usar a maioria dos plugins no seu aplicativo, é recomendável remover os plugins desnecessários. Se precisar de um plugin em apenas uma página, é melhor removê-lo deste arquivo, colocá-lo em um arquivo separado e incluí-lo apenas na página necessária. Assim, você evita carregar um plugin desnecessário na maioria das páginas.
  • /js/main.js
    Inicialização de vários plugins, bem como código JavaScript utilizado em funcionalidades do FreshUI, como navegação principal e barras laterais.

O código JavaScript necessário e utilizado em todo o FreshUI está localizado em /js/main.js. Em algumas páginas, devido a funcionalidades específicas, existe código de inicialização apenas na parte inferior do arquivo (como acontece no index.php, por exemplo).

Existem muitos exemplos no FreshUI, mas você também pode conferir os sites dos plugins utilizados para encontrar mais exemplos. Incluímos os links deles na última seção desta documentação.

Por fim, todos os arquivos JavaScript são incluídos na parte inferior da página (/inc/footer.php para a versão PHP), exceto o /js/vendor/modernizr-respond.min.js, que precisa ser carregado na tag <head> (/inc/top.php para a versão PHP).

Dicas Rápidas

Ícones
Glyphicons (Licença PRO adquirida - para uso com este template)
Font Awesome

Retina

# Retina

Créditos | Parcerias

Gostaríamos de expressar nossa gratidão por utilizarmos o recurso indicado pelo SAS, destacando nosso profundo reconhecimento a todos os autores envolvidos, cujo esforço incansável e dedicação foram fundamentais para o desenvolvimento e disponibilização deste trabalho.

Frameworks
Bootstrap
CSS3 Animation Cheat Sheet
Fonts
Google Web Fonts (Open Sans)
Textures
Subtle Patterns
Icons
Glyphicons (PRO License acquired - for use with this template)
Font Awesome
Scripts
jQuery
jQueryUI
Modernizr
Respond.js
Flot Charts
Datatables
FullCalendar
Elastic
Dropzone.js
Chosen
Slimscroll
Retina.js
Wysihtml5
Bootstrap Wysihtml5
Datepicker for Bootstrap
jQuery Validation
Prism.js
jEditable
Magnific Popup
Easy Pie Charts
TouchSwipe
v1.2
Bootstrap Timepicker
Form Wizard
v1.4
jQuery Tags Input
CKEditor
v1.5
HTML5 Placeholder jQuery Plugin
Bootstrap Slider
v2.0
MomentJS (used by FullCalendar plugin)
Select2
Datetimepicker for Bootstrap