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 --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 --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 :)

##### Atualização

Se você quer atualizar seu layout, execute o seguinte comando:

    gmd --update=latest

Após a atualização do pacote, entre na pasta raiz do seu projeto e execute o comando abaixo, perceba que será encontrado a paleta que foi gerado pela primeira vez:

    gmd

Se quiser atualizar apenas os arquivos JS, execute:

    gmd -g js

Se quiser atualizar apenas os arquivos CSS, execute:

    gmd -g css

##### 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>

Typography

# Typography 1

## Typography 2

### Typography 3

#### Typography 4

##### Typography 5

###### Typography 6

Paragraph

    <h1>Typography 1</h1>
    <h2>Typography 2</h2>
    <h3>Typography 3</h3>
    <h4>Typography 4</h4>
    <h5>Typography 5</h5>
    <h6>Typography 6</h6>
    <p>Paragraph</p>

Form
Biografia
{{option}}
Nav & Aside

##### Alternar

    $scope.navCollapse = function() {
      document.querySelector('.gumga-layout nav.gl-nav')
        .classList.toggle('collapsed')
    }
    $scope.asideCollapse = function() {
      document.querySelector('.gumga-layout aside.gl-aside')
        .classList.toggle('collapsed')
    }

##### Menu

###### JS

    $http.get('assets/data/menu.json')
      .then(function(response) {
        $scope.menu = response.data
      })
    $http.get('assets/data/keys.json')
      .then(function(response) {
          $scope.keys = response.data
      })

###### HTML

    <gl-menu menu="menu" keys="keys" icon-first-level="glyphicon glyphicon-home" text-first-level="Voltar ao primeiro nível"></gl-menu>

###### JSON keys

    [
      "CRUD-BASE",
      "CRUD-ADMIN",
      "CRUD-USER"
    ]

###### JSON menu

    [
      {
        "type": "header",
        "label": "Home"
      },
      {
        "type": "item",
        "label": "Home",
        "state": "welcome",
        "icon": "home",
        "key": "CRUD-BASE"
      },
      {
        "type": "item",
        "label": "Usuários",
        "state": "user",
        "icon": "group",
        "children": [
          {
            "type": "item",
            "label": "Criar novo",
            "state": "user.new",
            "icon": "add",
            "key": "CRUD-USER"
          },
          {
            "type": "item",
            "label": "Editar",
            "state": "user.edit",
            "icon": "edit",
            "key": "CRUD-ADMIN"
          }
        ]
      },
      {
        "type": "item",
        "label": "Produtos",
        "state": "welcome",
        "key": "CRUD-ADMIN"
      },
      {
        "type": "separator"
      },
      {
        "type": "header",
        "label": "Produtos"
      },
      {
        "label": "Últimos cadastrados",
        "state": "welcome",
        "key": "CRUD-ADMIN"
      }
    ]

Buttons

##### Normal

    <button type="button" class="btn gmd btn-default">Default</button>
    <button type="button" class="btn gmd btn-primary">Primary</button>
    <button type="button" class="btn gmd btn-success">Success</button>
    <button type="button" class="btn gmd btn-info">Info</button>
    <button type="button" class="btn gmd btn-warning">Warning</button>
    <button type="button" class="btn gmd btn-danger">Danger</button>
    <button type="button" class="btn gmd btn-link">Link</button>

##### Raised

    <button type="button" class="btn gmd raised btn-default">Default</button>
    <button type="button" class="btn gmd raised btn-primary">Primary</button>
    <button type="button" class="btn gmd raised btn-success">Success</button>
    <button type="button" class="btn gmd raised btn-info">Info</button>
    <button type="button" class="btn gmd raised btn-warning">Warning</button>
    <button type="button" class="btn gmd raised btn-danger">Danger</button>

###### Disabled

    <button type="button" class="btn gmd btn-default" disabled="disabled">Default</button>
    <button type="button" class="btn gmd btn-primary" disabled="disabled">Primary</button>
    <button type="button" class="btn gmd btn-success" disabled="disabled">Success</button>
    <button type="button" class="btn gmd btn-info" disabled="disabled">Info</button>
    <button type="button" class="btn gmd btn-warning" disabled="disabled">Warning</button>
    <button type="button" class="btn gmd btn-danger" disabled="disabled">Danger</button>
    <button type="button" class="btn gmd btn-link" disabled="disabled">Link</button>

###### Float Action Button

- Tags loyalty
- Reconhecimento Facial drafts

    <button type="button" class="btn gmd fab btn-primary">
        <i class="material-icons">add</i>
      </button>
      <button type="button" class="btn gmd fab btn-success">
        <i class="material-icons">add</i>
      </button>
      <button type="button" class="btn gmd fab btn-info">
        <i class="material-icons">add</i>
      </button>
      <button type="button" class="btn gmd fab btn-warning">
        <i class="material-icons">add</i>
      </button>
      <button type="button" class="btn gmd fab btn-danger">
        <i class="material-icons">add</i>
      </button>
      <button type="button" class="btn btn-success gmd fab fixed">
        <i class="material-icons">add</i>
      </button>

###### Raised Checkbox

Left Middle Right

      </div class="btn-group">
        </label class="btn gmd raised btn-default"
                        ng-model="radioModel"
                        uib-btn-radio="'Left'" uncheckable>Left</label>
        </label class="btn gmd raised btn-default"
                        ng-model="radioModel"
                        uib-btn-radio="'Middle'" uncheckable>Middle</label>
        </label class="btn gmd raised btn-default"
                        ng-model="radioModel"
                        uib-btn-radio="'Right'" uib-uncheckable="uncheckable">Right</label>
      </div>

###### Raised Radio & Uncheckable Radio

Left Middle Right

      <div class="btn-group">
        <label class="btn gmd raised btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label>
        <label class="btn gmd raised btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label>
        <label class="btn gmd raised btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label>
      </div>

Tabs

## Home content

## Profile content

## Message content

## Settings

    <ul class="nav nav-tabs gmd" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
      </ul>
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home"><h2>Home content</h2></div>
        <div role="tabpanel" class="tab-pane" id="profile"><h2>Profile content</h2></div>
        <div role="tabpanel" class="tab-pane" id="messages"><h2>Message content</h2></div>
        <div role="tabpanel" class="tab-pane" id="settings"><h2>Settings</h2></div>
      </div>

Pills

    <ul class="nav gmd nav-pills">
        <li role="presentation" class="active"><a>Home</a></li>
        <li role="presentation"><a>Profile</a></li>
        <li role="presentation"><a>Messages</a></li>
      </ul>

Badge

    <button class="btn btn-primary" badge="4" type="button"> Messages </button>
      <button class="btn btn-primary gmd" badge="6" type="button"> Messages </button>
      <a href="#" badge="10">Inbox</a>

Dropdown

    <div class="dropdown gmd">
        <button class="btn btn-default gmd dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li class="dropdown-header">Dropdown header</li>
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>

Card
Card Title

Texto

    <div class="panel gmd">
        <div class="panel-heading">
          Card Title
        </div>
        <div class="panel-body">
          <p>Texto</p>
        </div>
        <div class="panel-footer">
          <button type="button" class="btn gmd btn-default">Cancelar</button>
          <button type="button" class="btn gmd btn-success">Concordo</button>
        </div>
      </div>

Progress
60% Complete
60% Complete
Pagination

- «
- 1
- 2
- 3
- 4
- 5
- »

Spinner
Com box
Sem box
Alert
Sucesso! Você leu este alerta com êxito. Desfazer
Atenção! Esse alerta precisa de sua atenção, mas não é super importante. Desfazer
Atenção! Melhor verificar, você não está vendo muito bem. Desfazer
Falhou! Mude alguma coisa e tente novamente. Desfazer

    <div class="alert gmd alert-success alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
        <strong>Warning!</strong> Better check yourself, you're not looking too good.
        <a class="action" href="#">Desfazer</a>
      </div>
      <div class="alert gmd alert-info alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
        <strong>Warning!</strong> Better check yourself, you're not looking too good.
        <a class="action" href="#">Desfazer</a>
      </div>
      <div class="alert gmd alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
        <strong>Warning!</strong> Better check yourself, you're not looking too good.
        <a class="action" href="#">Desfazer</a>
      </div>
      <div class="alert gmd alert-danger alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
        <strong>Warning!</strong> Better check yourself, you're not looking too good.
        <a class="action" href="#">Desfazer</a>
      </div>

### Aside