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
  • .b1.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' )