Tema windows 8 para Bootstrap

capa_post_windows8bootstrap (1)
  
Se você é daquelas pessoas que curtem o sistema operacional windows ou um estilo mais retro nos projetos, essa indicação vai cair como uma luva em seus projetos Bootstrap, a comunidade trabalhou em um tema caracterizado no Windows 8 para aplicações Bootstrap e neste post vamos conhecer um pouquinho dele.

Getting Started

Acesse a página do tema, clicando aqui.

Logo de cara existem 2 opções para iniciarmos os trabalhos, que são:

  • Baixar arquivos diretamente
  • Source (infraestrutura do tema)

Veremos como iniciar os trabalhos em cada tópico

Arquivos compilados

Baixe os arquivos do tema, e você terá a seguinte estrutura de pastas

bootmetro/
  └── assets/
        
        ├── css/
           ├── bootmetro.css
           ├── bootmetro-icons.css
           ├── bootmetro-responsive.css
           ├── bootmetro-ui-light.css
           ├── bootmetro.min.css
           ├── bootmetro-icons.min.css
           ├── bootmetro-responsive.min.css
           └── bootmetro-ui-light.min.css
        
        ├── font/
           ├── IcoMoon.eot
           ├── IcoMoon.svg
           ├── IcoMoon.ttf
           ├── IcoMoon.woff
           ├── LICENSE.txt
           ├── opensans-bold-webfont.eot
           ├── opensans-bold-webfont.svg
           ├── opensans-bold-webfont.ttf
           ├── opensans-bold-webfont.woff
           ├── opensans-light-webfont.eot
           ├── opensans-light-webfont.svg
           ├── opensans-light-webfont.ttf
           ├── opensans-light-webfont.woff
           ├── opensans-regular-webfont.eot
           ├── opensans-regular-webfont.svg
           ├── opensans-regular-webfont.ttf
           ├── opensans-regular-webfont.woff
           ├── opensans-semibold-webfont.eot
           ├── opensans-semibold-webfont.svg
           ├── opensans-semibold-webfont.ttf
           └── opensans-semibold-webfont.woff
        
        └── js/
             ├── bootstrap.js
             ├── bootstrap.min.js
             ├── bootmetro-panorama.js
             ├── bootmetro-pivot.js
             └── bootmetro-icons-ie7.js

Crie um arquivo index.html para fazermos a chamada destes arquivos e empilhar exatamente nesta ordem.

CSS

<link ref="stylesheet" href="assets/css/bootmetro.min.css" />
<link ref="stylesheet" href="assets/css/bootmetro-responsive.min.css" />
<link ref="stylesheet" href="assets/css/bootmetro-icons.min.css" />
<link ref="stylesheet" href="assets/css/bootmetro-ui-light.min.css" />

JS

<script src="assets/js/min/bootstrap.min.js"></script>
<script src="assets/js/min/bootstrap-panorama.min.js"></script>
<script src="assets/js/min/bootstrap-pivot.min.js"></script>
<script src="assets/js/min/bootstrap-charme.min.js"></script>

Pronto, agora está preparado para começar a estudar a documentação e fazer testes.

 

Código fonte

Se você é um usuário avançado e sabe trabalhar com pré-processador, o projeto foi feito com LESS e tu pode encontrar o código fonte no Github oficial do tema, baixe o zip ou faça um clone do projeto.

 

Dependências

Com o Node.js instalado em sua máquina precisamos instalar globalmente 2 carinhas, que são

  • Grunt client: npm install -g grunt-cli
  • Karma: npm install -g karma

Feito isso, acesse a pasta do projeto e instale seus pacotes: npm install.

Dentro da pasta LESS você encontra todos arquivos fonte para editar e modificar como preferir, toda vez que efetuar alguma alteração basta ir no terminal e executar o comando grunt, para dar build nos arquivos.

Será gerada uma pasta “dist”com os arquivos recompilados por você.

Caso queira testar e ver como tudo está ficando, existe um arquivo server/server.js onde você pode rodar no node na porta 8080 e visualizar estas mudanças.

 

 

 

 

 

6 thoughts on “Tema windows 8 para Bootstrap

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *