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:

- AngularJs.
- Bootstrap.

##### 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>`
** Atenção:
É 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>