Começando

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.


Pré requisitos

Antes de começar a usar o gumga layout é preciso verificar se seu projeto possui os seguintes itens:


Instalação

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


Gerando seu primeiro 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

Se preferir, você pode informar um arquivo gmd da sua paleta, veja um exemplo:

gmd init --file exemplo.gmd

Veja como é um arquivo gmd: exemplo.gmd

$darkPrimary:    #512DA8
$primary:        #673AB7
$lightPrimary:   #D1C4E9
$textIcons:      #FFFFFF
$accent:         #03A9F4
$primaryText:    #212121
$secundaryText:  #757575
$divider:        #BDBDBD
$background:     #F5F5F5

Se tudo ocorreu com sucesso, você verá uma mensagem te avisando que deu tudo certo :)


Criando temas

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');
}])


Adicionando layout no projeto

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>