Folha de estilos CSS para rápida prototipação utilizada pelo Laboratório de Inovação da Justiça Federal de São Paulo - iJuspLab.

1. Incluindo a folha de estilos em seu projeto

Abra o terminal na pasta raiz do projeto e digite:

yarn add -D @ijusplab/ijusplabcss

// ou

npm -i @ijusplab/ijusplabcss --save-dev

Uma vez feito isso, basta importar a folha de estilos no seu arquivo .scss:

@import "@ijusplab/ijusplabcss"

...

Bônus: a folha de estilos do iJuspLab já incorpora a folha normalize.css.

2. Como usar

A folha de estilos do iJuspLab contém classes para layout, tipografia e efeitos.

2.1. Tipografia

| Classe | Efeito | | ----------- | ---------- | | text-overflow-ellipsis | text-overflow: ellipsis + white-space: nowrap + overflow: hidden | | text-no-wrap | white-space: nowrap + overflow: hidden | | text-color-default | cinza médio | | text-color-light | cinza claro | | text-align-[position] | atribui a text-align o valor center/left/right/justify definido em position | | text-align-middle | vertical-align: middle | | font-family-default | Roboto e fallbacks sans-serif | | font-family-alt | Ralway e fallbacks sans-serif | | font-family-jf | fontes oficiais da identidade visual da Justiça Federal: Calibri, Arial, Helvetica, sans-serif | | font-weight-[#] | atribui a font-weight o valor de # * 100, onde # vai de 3 a 9 | | font-size-[#] | atribui a font-size o valor de (#/20)rem, onde # vai de 5 a 20 |

2.2. Layout

| Classe | Efeito | | ----------- | ---------- | | flex | display: flex | | flex-[direction] | flex-direction: [direction] | | flex-grow | flex-grow: 1 | | flex-shrink | flex-grow: 0| | align-[attr] | align-items: [attr] | | justify-[attr] | justify-content: [attr] | | fill-width | width: 100% | | fill-height | height: 100% | | ma-#, my-#, mx-#, mt-#,mb-#, ml-#, mr-#| define a propriedade margin do elemento em (#*2)px, onde # vai de 0 a 50| | pa-#, py-#, px-#, pt-#,pb-#, pl-#, pr-#| define a propriedade padding do elemento em (#*2)px, onde # vai de 0 a 50|

2.3. Efeitos

| Classe | Efeito | | ----------- | ---------- | | round-# | define a propriedade border-radius em #px, onde # vai de 0 a 50 | | overlay-# | cria overlay escuro com grau definido em #, que vai de 0 a 10 | | overlay-light-# | cria overlay claro com grau definido em #, que vai de 0 a 10 | | display-container (elemento pai) e display-hover (elemento filho) | oculta suavemente o elemento child ao passar do mouse | | hover-shrink | encolhe suavemente o elemento ao passar do mouse | | hover-opacity | diminui suavemente a opacidade do elemento ao passar do mouse | | highlight | destaca elemento | | visible | visibility: visible + opacity: 1 | | hidden | visibility: hidden + opacity: 0 | | scroll-[x/y] | overflow-[x/y]: scroll | | scroll-custom-bar | altera o visual da barra de rolagem para um estilo customizado |