|||
|||
gran-style
GRAN STYLE
Feito com React, mas poderia ser JS, Angular ou Vue!

ANDROID • iOS • WINDOWS • LINUX • MAC

docs • demos • npm • git

gs-app
content
menu
context
dropdown
notify
alert
loader
gs-screen
LEFT
HEADER
BODY
FOOTER
RIGHT

LEFT
HEADER
LEFT
HEADER
BODY
FOOTE
RIGHT
FOOTER
RIGHT

HEADER
LEFT
BODY
RIGHT
FOOTER

HEADER
LEFT
BODY
FOOTE
RIGHT
gs-item
LEFT
CONTENT
RIGHT

LEFT
CONTENT

CONTENT
RIGHT

CONTENT
gs-notify
Título da mensagem!
Um monte de bla bla bla da mensagem...
Uma mensagem direta em nada de mais...
Uma linda mensagem de sucesso!
Apenas uma mensagem informativa...
Ops! Uma mensagem de alerta!
Deu ruim :(
Mensagem de erro ou falha... faz certo que dá certo porra!
gs-alert
Título da mensagem!
Um monte de bla bla bla da mensagem...
OK
Título da mensagem!
Um monte de bla bla bla da mensagem...
Cancelar
Continuar
Título da mensagem!
Um monte de bla bla bla da mensagem...
OK
gs-button

disable = true - false

Ativo
Inativo

color = primary - secondary - info - success - warning - danger

Primário
Secundário
Aviso!
Sucesso!
Atenção!
Cancelar
Padrão

size = xxl - xl - l - m - s - xs - xxs

Gran Grande
Muito Grande
Grande
Médio
Pequeno
Muito Pequeno
Micro

shape = edge | rounded |circle | square

rounded
rounded
rounded
rounded
rounded
rounded
rounded

square
square
square
square
square
square
square

🐻
🔥
🤏
🍔
❤️
⚽
i
gs-section
Título da seção!
Subtítulo de uma determinada seção.
Uma breve descrição ou informação sobre esta seção...
Contaúdo da sesão

Título da seção!
Subtítulo de uma determinada seção.
Uma breve descrição ou informação sobre esta seção...
Contaúdo da sesão

Título da seção!
Subtítulo de uma determinada seção.
col 1col 2col 3col 4col 5
value 1value 2value 3value 4value 5
value 1value 2value 3value 4value 5
value 1value 2value 3value 4value 5

Título da seção!
Uma breve descrição ou informação sobre esta seção...
gs-empty
Arquivo não encontrado.
O arquivo selecionado não existe ou talvez você não possa acessá-lo.
LEFT
HEADER
FOOTER
RIGHT
LEFT
HEADER
FOOTER
RIGHT