Layout utilities module for Basscss
npm install basscss-layout
Change the default document flow with these display, float, and other utilities.
To adjust the display of an element, use the .block, .inline, .inline-block, .table, and .table-cell utilities.
``html`inlineinline-block
block
table-cell
table-cell
To adjust element overflow, use .overflow-hidden, .overflow-scroll, and .overflow-auto..overflow-hidden can also be used to create a new block formatting context or clear floats.
Use .clearfix, .left, and .right to clear and set floats.
`html`
.left
.right
Use .fit to set max-width 100%.
`html`
Use max-width utilities to control the width of containers.
` Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.html`
Use .border-box to set box-sizing border-box per element.
`html`.border-box
` Body Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.html`
Image
` Body Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.html``
Image
Image