Gumga layout é um framework web baseado em Bootstrap e AngularJs. Seu objetivo é possibilitar a melhoria no design de aplicações web que já existem sem perder compatibilidade.
Antes de começar a usar o gumga layout é preciso verificar se seu projeto possui os seguintes itens:
A instalação é muito simples, mas primeiro você precisa instalar NodeJS.
Após a instalação do NodeJs, execute o seguinte comando:
npm install -g gumga-layout
Caso você ainda não tenha uma paleta de cores, recomendamos que você entre em Material Palette e gere sua paleta de cores.
Para criar os arquivos do gumga layout, é essencial termos uma paleta de cores.
Com a paleta de cores em mãos, vá até a pasta raiz do seu projeto e execute o comando gmd
.
Se você executar apenas o comando gmd, iremos criar seu layout com base na nossa paleta padrão, mas você pode informar sua paleta como no exemplo abaixo:
gmd init --darkPrimary=#C2185B --primary=#E91E63 --lightPrimary=#F8BBD0 --textIcons=#FFFFFF --accent=#00BCD4 --primaryText=#212121 --secundaryText=#757575 --divider=#BDBDBD --background=#F5F5F5
gmd init --file exemplo.gmd
$darkPrimary: #512DA8
$primary: #673AB7
$lightPrimary: #D1C4E9
$textIcons: #FFFFFF
$accent: #03A9F4
$primaryText: #212121
$secundaryText: #757575
$divider: #BDBDBD
$background: #F5F5F5
Você pode criar vários temas e disponibilizar a troca de temas em tempo de execução.
Crie um tema executando o comando abaixo:
$ gmd create theme nomedotema
Para usar seu tema vocÊ chamar chamar o metodo setTheme do $gmdThemeProvider, exemplo:
angular.module('yourApp', ['gumga.layout'])
.config(['$gmdThemeProvider', function($gmdThemeProvider){
$gmdThemeProvider.setTheme('nomedotema');
}])
Na pasta gumga-layout existem os arquivos que foram gerados com base na sua paleta de cores, precisamos importar os arquivos gumga-layout.min.css e gumga-layout.min.js.
<link rel="stylesheet" href="gumga-layout/gumga-layout.min.css">
<script type="text/javascript" src="gumga-layout/gumga-layout.min.js"></script>
É importante colocar todo seu html dentro de uma div que possua a classe gumga-layout. Veja um exemplo:
<body>
<div class="gumga-layout">
<!--TODO HTML DO SEU PROJETO DEVE ESTAR DENTRO DESSE ELEMENTO. -->
</div>
<body>