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


É 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>
  1. home Início
  2. shopping_cart Venda
  3. supervisor_account Produtos
Form
{{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
  </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 
  <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
Spinner


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