device-mockup v0.1.0

Device Mockup

Uma biblioteca JavaScript para gerar dispositivos responsíveis usando apenas HTML e CSS.

Exemplo

<device id="phone-device" dev-width="180" dev-height="320" dev-color="#111" dev-border-size="48 16" dev-border-radius="16">
   <dev-component dev-place="top" dev-position="-65" dev-width="12" dev-height="12" dev-color="#fff" dev-border-radius="6"></dev-component>
   <dev-component dev-place="top" dev-width="96" dev-height="6" dev-color="#fff" dev-border-radius="3"></dev-component>
   <dev-component dev-place="bottom" dev-width="80" dev-height="20" dev-color="#111" dev-border-size="2" dev-border-color="#fff" dev-border-radius="10"></dev-component>
   <dev-component dev-place="outer-right" dev-position="-70" dev-width="3" dev-height="40" dev-color="#626262" dev-border-radius="1.5"></dev-component>
   <dev-component dev-place="outer-left" dev-position="-80" dev-width="3" dev-height="40" dev-color="#626262" dev-border-radius="1.5"></dev-component>
   <dev-component dev-place="outer-left" dev-position="-125" dev-width="3" dev-height="40" dev-color="#626262" dev-border-radius="1.5"></dev-component>
   <dev-component dev-place="center" dev-color="#fff" dev-border-radius="8">
      <h2>Olá Mundo</h2>
   </dev-component>
</device>

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