@ijusplab/ijusplabcss
v0.0.5
Published
Pequena biblioteca CSS do iJuspLab para rápida prototipação.
Downloads
5
Readme
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 |