Iugu UX Bundle

Um pacote de bibliotecas e códigos de apoio (glue code) para facilitar o desenvolvimento de aplicações web.

Vendor / Javascripts ( vendor.js )

• backbone.js
• gmaps.js (experimental)
• iscroll.js (experimental)
• jquery.base64.js
• jquery.checkboxes.js
• jquery.cookie.js
• jquery.ui.js
• jquery.ui.touch-punch.js (routeia toques para cliques)
• jquery.web-storage.js
• underscore.js

Iugu-UX / JS ( iugu-ux.js )

Porquê?

• Detecta as capacidades de cada navegador e adiciona na tag html como classe CSS
  • .no-js ou .js para suporte à Javascript
  • .not-ready ou .ready para detectar load de carregamentos básicos
  • .desktop ou .mobile para tipo de dispositivos
  • .nome_SISTEMA para o tipo de navegador
  • .android ou .ios para o tipo de sistema operacional do dispositivo mobile
  • .deprecated_android para sistemas operacionais androids < 3
  • .os_SISTEMA para o tipo de sistema operacional
• .mediaquery para detectar suportes à modelos adaptativos
  • .mq-mp => Mobile Portrait
  • .mq-ml => Mobile Landscape
  • .mq-tb => Tablets
  • .mq-ls => Large Screens
  • .mq-sm => Small Screens
• Algumas bibliotecas do Twitter Bootstrap (Experimental) e Google Prettify
• Suporte à I18N via arquivos JSON
• Organização e inclusão automática de models, delegadores, controladores, apresentadores e funcionalidades
• Suporte à playback de Som (Experimental)

Helpers

detectLanguage: Tenta detectar o idioma do navegador

getMousePos(evento): Descobre a coordenada do clique ou do touch

debug( mensagem ): Adiciona uma linha ao console de depuração do navegador

String.capitalize: Extende a função string para suportar maiúscula na primeira letra

Iugu-UX / CSS ( iugu-ux.css )

Porquê?

• Helpers: Funções e Mixins em SASS
• Gerador Automático de Sprite/Atlas ( Detecção Automática de Retina e Não Retina )
• Variáveis
• Componentes
• Gerador de Código para MediaQuery
• Reset / Padronizador HTML
• Tipografia
• Utilitários

Referência SASS Iugu-UX

Core

Incluir arquivo "iugu-ux/core"

• Compass/CSS3 Background Size
• Compass/CSS3 Images
• Compass/Utilities/Sprites
• Compass/CSS3
• Mixins
• Mixins Adaptativos
• Sprites Padrões Iugu

Filtros/Seletores Adaptativos

Exemplo de uso dos mixins

@include for-hd()
  body
    background: #FF0000

for-hd: Tela de alta definição for-ios-hd: Retina for-no-js: Sem suporte à Javascript for-screen: Tela for-print: Impressão for-mobile-portrait: Dipositivos Portateis ( Retrato ) for-mobile-landscape: Dispositivos Portateis ( Paisagem ) for-tables: Tablets (768 ateh 1024) for-large-screens: Qualquer tela com resolução maior que 1024 for-small-screens: Qualquer tela com resolução menor que 768

Filtros/Seletores

• box-mode: Ativar Border-Box
• block( $n ): Largura de $n X tamanho de bloco (Variável)
• text-overflow: Melhora a quebra de texto ( Experimental )
• prefix( $variable, $value ): Ativa prefixos de compatibilidade
• transition( $transition ): Transições de Navegadores
• user-select( $select ): Compatibilidade de Seleção de Usuário

Reset

• .auto-clear: Ou clear Fix Iugu
• .clear

Outros Utilitários em Reset (Beta/Troca de Arquivo)

• .responsive: Width: 100% (Experimental)
• .only-{android,ios,mobile,desktop}: Seleção criteriosa

Sprites

• build-sprites( $name, $images, $size{ retina, normal } ): Gera automaticamente atlas de sprites, ideal para transformar todas as imagens da aplicação em um único mapa. Leva em consideração e se adapta a telas de alta definição (Retina Display)

@import "iugu-ux/core"

$iux-default: sprite-map("iux-default/*.png", $layout: smart, $spacing: 0px, $cleanup: true, $sprite-dimensions: true)
@include build-sprites("iux-default", $iux-default, normal)

@include for-hd()
  $iux-default-hd: sprite-map("iux-default-hd/*.png", $layout: smart, $spacing: 0px, $cleanup: true, $sprite-dimensions: true)
    @include build-sprites("iux-default", $iux-default-hd, retina)

Utilitários

• .no-bottom-margin
• .element-spacing
• .b{1..128}: Bloco
• .icon-

Variáveis

$sansFontFamily: Helvetica, Arial, sans-serif

$baseElementSpacing: 20px
$baseFontSize: 14px
$baseFontFamily: $sansFontFamily
$baseLineHeight: 14px
$baseLineSpacing: 6px
$baseBlockSize: 20px
$baseLineColor: #DDD
$baseLineShadowColor: #BBB

$lineAlternateBackgroundColor: #EFEFEF
$lineHighlightBackgroundColor: #E7E7E7

$gridSpacing: $baseElementSpacing 

$textColor: #333333

$bodyBackgroundColor: #FFFFFF
$applicationBackgroundColor: #F0F0F0

$headingFontWeight: bold
$headingFontColor: #000000

$white: #FFFFFF
$gray: #999999
$red: #b94a48
$yellow: #f89406
$green: #468847
$blue: #3a87ad

$redText: #b94a48
$redBackground: #f2dede
$redBorder: darken(adjust-hue($redBackground, -10), 3%)

$yellowText: #c09853
$yellowBackground: #fcf8e3
$yellowBorder: darken(adjust-hue($yellowBackground, -10), 3%)

$greenText: #468847
$greenBackground: #dff0d8
$greenBorder: darken(adjust-hue($greenBackground, -10), 3%)

$blueText: #3a87ad
$blueBackground: #d9edf7
$blueBorder: darken(adjust-hue($blueBackground, -10), 3%)

Aplicação (Web-App)

Como criar sprites normal e HD:

+find-sprite( $grupo_sprites, 'nome' )