Device Mockup
Uma biblioteca JavaScript para gerar dispositivos responsíveis usando apenas HTML e CSS.
Exemplo
Olá Mundo
Instalação
NPM
$ npm install device-mockup
Bower
$ bower install device-mockup
Uso
Dispositivos
Dispositivos são criados utilizando a tag <device>
. Todo dispositivo precisa de possuir um id.
- dev-width: Largura do dispositivo.
- dev-height: Altura do dispositivo.
- dev-color: Cor de preenchimento.
- dev-border-size: Tamanho das bordas.
- dev-border-radius: Tamanho do arredondamento das bordas.
Componentes
Componentes são criados utilizando a tag <dev-component>
. Componentes por padrão ficam centralizados mas podem ser reposicionados utilizando o atributo dev-position
.
- dev-place: Define aonde o componente será exibido.
- dev-position: Define o deslocamento do componente em relação ao centro. A direção em que o componente será deslocado depende da posição do mesmo.
- dev-width: Largura do componente
- dev-height: Altura do componente
- dev-color: Cor de preenchimento
- dev-border-size: Tamanho das bordas
- dev-border-color: Cor das bordas
- dev-border-radius: Tamanho do arredondamento das bordas.
Posicionamento de componentes
É possivel escolher aonde os componentes serão exibidos.
Valores possíveis são: center, top, right, bottom, left, outer-top, outer-right, outer-bottom, outer-left
Licença
Licença MIT.
Copyright (c) 2016 André F. Martins
Copyright (c) 2016 RooTM Soluções em Sistemas Multimídia Ltda