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 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>
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" } ]
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>
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>
<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>
<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>
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>
<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>