Neglected Parking Meter

    monk-grid

    1.0.2 • Public • Published

    Monk.Grid

    Exemplo

    • Criado com flexbox
    • Baseado em container e item
    • CONTAINER deve ter um height fixo (aconselho usar min-height :D)

    Classes para o CONTAINER

    Classes principais para o container:

    • container (Principal)
    • wrap ou nowrap
    • column (row é padrão no container)
    • wrap-mobile ou wrap-tablet

    Classes para alinhar o item dentro do container:

    • top-left
    • top-center
    • top-right
    • center-left
    • center-center
    • center-right
    • bottom-left
    • bottom-center
    • bottom-right

    Classes para o ITEM

    Tamanhos flex:

    • flex (flex: 1, os outros possuem flex-grow: x)
    • flex1
    • flex2
    • flex3
    • flex4
    • flex5
    • flex6
    • flex7
    • flex8
    • flex9
    • flex10
    • flex11
    • flex12

    Clases para quebrar(wrap) os itens, flex-basis:

    • basis1(100px)
    • basis2(200px)
    • basis3(300px)
    • basis4(400px)
    • basis5(500px)
    • basis6(600px)
    • basis7(700px)
    • basis8(800px)
    • basis9(900px)

    Para alinhar o texto:

    • text-left
    • text-center
    • text-right

    ex:

    <div class="container center-center">
      <div class="text-center">
        ...
      </div>
    </div>
    <div class="container wrap center-center">
      <div class="flex1 basis3">
        ...
      </div>
      <div class="flex1 basis3">
        ...
      </div>
      <div class="flex1 basis3">
        ...
      </div>
    </div>

    Install

    npm i monk-grid

    DownloadsWeekly Downloads

    9

    Version

    1.0.2

    License

    ISC

    Last publish

    Collaborators

    • gustavoquinalha