basscss-layout
v3.1.0
Layout utilities module for Basscss
0/weekUpdated 3 years agoMIT
Published by Brent Jackson
npm install basscss-layout
Change the default document flow with these display, float, and other utilities.
Display
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
Overflow
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.
Floats
Use .clearfix, .left, and .right to clear and set floats.
`html`
.left
.right
Max Width
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`
Box-Sizing Border-Box
Use .border-box to set box-sizing border-box per element.
`html`.border-box
Media Object
Create a media object using basic utilities.
` Body Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.html`
Image
Double-Sided Media Object
For a container with a flexible center, use a double-sided media object.
` Body Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.html``
Image
Image