Reset Typography Grid Breadcrumb Navigation Table Form Required Buttons Notification Panels Tooltip Editor Dropdown

NORATO FRAMEWORK


A simple and easy framework made with Sass preprocessor

Reset

Instalation

_components/_reset.scss

Typography

Instalation

_components/_typography.scss

Usage

Only used to link external sources. You set the default font and size in the variable file.

Grid

Instalation

_components/_grid.scss

Usage

To use you must define three variables: $responsive, $wrapper, $grid-columns and $grid-gutter.
After it, on the HTML you must declare a father element (.wrapper) and add the children element (.grid). You must declare the width for each children element with the class .grid-x.
Also you can define the last children using the class .grid-last, case this isn't the last.

grid-2
grid-8
grid-2 grid-last
grid-9
grid-3
grid-8
grid-4

Also you can align the elements to right (.right), as well as add spaces with the class .grid-offset-x.

grid-4
right
grid-offset-3
grid-offset-2

Table

Instalation

_components/_table.scss

Usage

Title Title
Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum

Right border

Title Title
Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum

Form

Instalation

Use it only on contact page or pages with form.

_components/_form-custom.scss

Usage

You must declare a father element (.line) and add the children element (.box). Also, you must declare the width for each children element with the class .wd-x.

Text

E-mail

Text

Campos de entrada única

Text

Email

Data

Datetime

Tel

Url

Search

File

Textarea

Campos de entrada múltipla

Select

Number

Datetime-local

Week

Month

Time

Select multiple

Campos de entrada especiais

Color

Range

Radio / Checkbox

Label radio

Label checkbox

Radio inline / Checkbox inline

O que difere o .radio do .radio-inline é que o segundo foi feito para se utilizar junto de inputs.
Assim como a classe .radio, também é utilizada a classe .radio-inline ao invés de .box.

Text

Text

Button inline

Text

Required

Instalation

_components/_required.scss

Usage

Para adicionar a funcionalidade de campo obrigatório, adcione a class .required junto da class .box.
E para marcar o campo que está errado, adicione a class .error direto no input.

Para manipular a mensagem de erro (O campo XYZ é obrigatório!), insira um div dentro do .form com a class .return-error-message.
Você terá de manipular a posição do elemento via javascript.

Campo obrigatório

Campo obrigatório com erro

O campo XYZ é obrigatório!

Buttons

Instalation

_components/_buttons.scss

Usage

Sizes

Default colors

Clean colors

Gradient colors

Button link

One class, multiple tags

Link

Notification

Instalation

_components/_notification.scss

Usage

Default colors

Mensagem de sucesso
Mensagem de alerta
Mensagem de erro

Clean colors

Mensagem de sucesso clean
Mensagem de alerta clean
Mensagem de erro clean

Gradient colors

Mensagem de sucesso gradient
Mensagem de alerta gradient
Mensagem de erro gradient

Panels

Instalation

_components/_panels.scss

Usage

There are many variations of passages of Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.

State

Address

Phone

Mail

Default colors

Panel title
...

Panel title
...

Panel title
...

Gradient colors

Panel title
...

Panel title
...

Panel title
...

Panel title
...

Tooltip

Instalation

_components/_tooltip.scss

Usage

You must declare the class .tooltip on element and add the data-id data-tooltip with the message.

Passe o mouse sobre mim =}

Ou se preferir, passe o mouse aqui também ;)

E se ainda não estiver satisfeito, passe o mouse em cima de mim *-*

E por fim, dá uma passadinha aqui também =p

Editor

Instalation

_components/_editor.scss

Usage

Lorem Ipsum is simply dummy text of the printing

Lorem Ipsum is simply dummy text of the printing

Lorem Ipsum is simply dummy text of the printing

Lorem Ipsum is simply dummy text of the printing

Lorem Ipsum is simply dummy text of the printing
Lorem Ipsum is simply dummy text of the printing

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Mauris ac eros id tellus tristique porttitor sed auctor ipsum. Aliquam a nulla a tellus pretium consequat a ac libero. Suspendisse sed lorem vulputate, scelerisque quam quis, adipiscing risus. Nam ultrices in arcu at laoreet. Phasellus feugiat mattis lectus in rutrum. In vestibulum ipsum quam. Mauris eget urna eget lectus consectetur auctor ac nec dui. Phasellus enim metus, suscipit nec orci ut, varius pellentesque neque. Maecenas in adipiscing enim, ut ullamcorper ipsum



  • There are many variations;
  • Mauris ac eros id tellus tristique;
  • Class aptent taciti sociosqu ad litora;
This is a blockquote! You can modify the style ;)
  1. Cras ornare arcu vel eros posuere;
  2. Integer semper velit suscipit ante;
  3. Vestibulum posuere dignissim augue;