# Referência: Fluig Style Guide

## Imports Obrigatórios

```html
<head>
    <!-- CSS (usar versão flat — padrão atual) -->
    <link rel="stylesheet" type="text/css"
        href="/style-guide/css/fluig-style-guide-flat.min.css" />

    <!-- JS obrigatórios (ORDEM IMPORTA) -->
    <script src="/portal/resources/js/jquery/jquery.js"></script>
    <script src="/portal/resources/js/jquery/jquery-ui.min.js"></script>
    <script src="/portal/resources/js/mustache/mustache-min.js"></script>
    <script src="/style-guide/js/fluig-style-guide.min.js" charset="utf-8"></script>
</head>
```

> **Nota:** Alguns projetos usam `/portal/resources/style-guide/css/fluig-style-guide.min.css`
> (sem "flat"). Ambos funcionam, mas o **flat** é o padrão mais recente.

## Componentes Disponíveis no Fluig Style Guide

| Componente | Classe CSS | Uso |
|---|---|---|
| Alert | `alert alert-{tipo}` | Mensagens contextuais |
| Breadcrumb | `breadcrumb` | Navegação hierárquica |
| Button | `btn btn-{tipo} btn-{tamanho}` | Ações |
| Card | `card` | Blocos de conteúdo |
| Checkbox | `custom-checkbox custom-checkbox-{cor}` | Seleção múltipla |
| Collapse | `collapse` + `data-toggle="collapse"` | Mostrar/ocultar conteúdo |
| Counter | `counter` | Indicadores numéricos |
| Dropdown | `dropdown` | Menus contextuais |
| Icons | `fluigicon fluigicon-{nome} icon-{tamanho}` | Ícones |
| Input Group | `input-group` + `input-group-addon` | Campo com adorno |
| Label/Badge | `label label-{tipo}` | Tags e status |
| List Group | `list-group` + `list-group-item` | Listas |
| Modal | `modal` ou `FLUIGC.modal()` | Janelas modais |
| Navbar | `navbar navbar-default` | Barra de navegação |
| Navs/Tabs | `nav nav-tabs` | Abas |
| Page Header | `page-header` | Títulos de seção |
| Pagination | `pagination` | Paginação |
| Panel | `panel panel-{tipo}` | Blocos com cabeçalho |
| Progress Bar | `progress` + `progress-bar` | Indicador de progresso |
| Radio | `custom-radio custom-radio-{cor}` | Seleção única |
| Smart Ellipsis | Truncamento inteligente | Textos longos |
| Steps | `steps` | Progresso multi-etapa |
| Switch | `switch switch-{cor}` | Toggle on/off |
| Tooltip | `data-toggle="tooltip"` | Dicas ao passar o mouse |
| Upload | Upload component | Upload de arquivos |
| Well | `well` | Bloco de destaque |

## Cores Disponíveis

Aplicam-se a botões, painéis, radios, checkboxes, switches:

| Sufixo | Uso |
|---|---|
| `-primary` | Ação principal (azul) |
| `-success` | Sucesso/positivo (verde) |
| `-info` | Informação (azul claro) |
| `-warning` | Atenção (amarelo) |
| `-danger` | Perigo/erro (vermelho) |
| `-default` | Neutro (cinza) |

## Tamanhos (Botões, Radios, Checkboxes)

| Sufixo | Tamanho |
|---|---|
| `-xl` | Extra grande |
| `-lg` | Grande |
| (padrão) | Médio |
| `-sm` | Pequeno |
| `-xs` | Extra pequeno |

## Ícones Fluig Mais Usados em Formulários

| Ícone | Classe | Uso |
|---|---|---|
| Calendário | `fluigicon-calendar` | Campos de data |
| Lupa | `fluigicon-zoom-in` | Botão de pesquisa |
| Lixeira | `fluigicon-trash` | Botão deletar |
| Clipe | `fluigicon-paperclip` | Anexos |
| Comentário | `fluigicon-comment` | Mensagens |
| Celular | `fluigicon-mobile` | Indicador mobile |
| Check | `fluigicon-check` | Confirmação |
| Warning | `fluigicon-warning` | Alerta |

## Grid Bootstrap (Fluig)

| Classe | Breakpoint | Largura |
|---|---|---|
| `col-xs-{N}` | < 768px | Mobile |
| `col-sm-{N}` | ≥ 768px | Tablet |
| `col-md-{N}` | ≥ 992px | Desktop |
| `col-lg-{N}` | ≥ 1200px | Tela grande |

**Regra:** Sempre definir `col-xs-12` como fallback mobile.
**Exemplo:** `<div class="col-xs-12 col-sm-6 col-md-4">` → 100% mobile, 50% tablet, 33% desktop.

## Máscaras de Campos

O Fluig permite habilitar máscaras por campo via atributo `mask` em inputs do tipo text.

```html
<input name="cep" type="text" mask="00000-000">
```

### Caracteres de Máscara

| Caractere | Significado |
|---|---|
| `0` | Somente números |
| `9` | Somente números (opcional) |
| `#` | Somente números (recursivo) |
| `A` | Números ou letras |
| `S` | Somente letras (A-Z, a-z) |

### Máscaras Comuns

| Campo | Máscara |
|---|---|
| Data | `00/00/0000` |
| Horário | `00:00:00` |
| Data e Hora | `00/00/0000 00:00:00` |
| CEP | `00000-000` |
| Telefone | `0000-0000` |
| Telefone (DDD) | `(00) 0000-0000` |
| Telefone (DDD + 9o dígito) | `(00) 90000-0000` |
| Placa de carro | `SSS 0000` |
| CPF | `000.000.000-00` |
| CNPJ | `00.000.000/0000-00` |
| IP | `099.099.099.099` |
| Porcentagem | `#00.000,00%` |
| Valor | `#00.000.000.000.000,00` |

## Documentação Oficial

- [Guia de Estilos](https://style.fluig.com/)
- [Componentes](https://style.fluig.com/components.html)
- [CSS](https://style.fluig.com/css.html)
- [JavaScript](https://style.fluig.com/javascript.html)
- [APIs](https://api.fluig.com/)
