monk-grid

A css framework created with flexbox

Showing:

Popularity

Downloads/wk

3

GitHub Stars

0

Maintenance

Last Commit

4yrs ago

Contributors

0

Package

Dependencies

0

Size (min+gzip)

0.2KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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>

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100