Base Reset Base Typography Base Forms Base Buttons Base Tables Utility Layout Utility Typography Utility White Space Utility Responsive States UI Utility Button Sizes UI Utility Groups UI Utility Disclosure States Positions Grid Table Object Color Base Color Forms Color Forms Dark Color Tables Color Buttons Colors Color Borders Flex Object Utility Headings Background Images

# basscss-utility-layout v0.0.2

# Utility Layout

NPM Github

basscss.com

Change the default document flow with display, float, and other utilities.

    .inline       { display: inline }
    .block        { display: block }
    .inline-block { display: inline-block }

    .overflow-hidden { overflow: hidden }
    .overflow-auto   { overflow: auto }
    .overflow-scroll { overflow: scroll }

    .clearfix:before,
    .clearfix:after {
      content: " ";
      display: table
    }
    .clearfix:after { clear: both }

    .left  { float: left }
    .right { float: right }

    .fit { max-width: 100% }

    .half-width { width: 50% }
    .full-width { width: 100% }

## Media Object

Create a media object using basic utilities.

Image

Body Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.

    <div class="clearfix mb2 outline-blue">
      <div class="left p2 mr1">Image</div>
      <div class="overflow-hidden">
        <p><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
      </div>
    </div>

## Double-Sided Media Object

For a container with a flexible center, use a double-sided media object.

Image
Image

Body Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.

    <div class="clearfix mb2 outline-blue">
      <div class="left p2 mr1">Image</div>
      <div class="right p2 ml1">Image</div>
      <div class="overflow-hidden">
        <p><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
      </div>
    </div>