General

THE BUTTER

.page
.container
.breath .rbreath .lbreath .hbreath .breathout .lpad .rpad .hpad .padtop
.spaced .doublespaced .lspace .rspace .spacedout .doublespaced .spacetop
.l .r
.lauto .rauto
.center .center-content
.dinline .dblock .hidden .flex-nowrap .rel
.txt-c .txt-l .txt-r
.text-nowrap .wrap-break .wrap-none
.bthin .bthick .bthin-dark .bthick-dark
.clear

The idea is very simple, you only need one class to take care of responsive width, which is the page class. Following is a simple example of the most usably layout.

<div class="page">
  <div class="container">
    <h2>ShutLayout</h2>
    <p><strong>.page</strong> controls responsive behavior, <strong>.container</strong> adds paddings</p>
  </div>
</div>
<div style="background-color:#f3f3f3">
  <div class="page">
    <div class="container">
      <h3>Page content</h3>
      <p>This is content in another <strong>page</strong> class element, surrounded by a different background.</p>
    </div>
  </div>
</div>
<header>
  <div class="page">
    <div class="container">
        Header, use container to add padding
    </div>
  </div>
</header>
<footer>
  <div class="page">
    <ul>
      <li>copyrights</li>
      <li><a>Footer link</a></li>
    </ul>
  </div>
</footer>

Layout

The mantra of this framework is to reduce developer footprints, and fasten prototyping. You will not find the generous (unnecessary) margins and paddings you run across in Bootstrap. All of the following use one of four spacing defitions: @space, @halfspace, @extraspace, and @doublespace.

All classes that involve right or left definition, are mirrored in RTL automatically. logical classes use logical CSS logical properties.

.breath

Breathing (@halfspace padded from top and bottom)

.rbreath

Inline end padding logical

.lbreath

Inline start breath logical

.hbreath

Breathing horizontally (right and left)

.breathout

Breath for li elements

.rpad

Inline end padding (@space) logical

.lpad

Inline start padding logical

.hpad

Padding horizontally (right and left)

.padtop

Padding block start (should avoid, if you had to use this, reconsider your design strategy here).

.spaced

Block end margin (@space)

.doublespaced

Double block end margin (@doublespace)

.lspace

Margin inline start logical

.rspace

Margin inline end logical

.spacedout

Bottom (block-end) margin for li elements, gap for grid elements, or padding around for td elements.

.doublespacedout

Double bottom (block-end) margin for li elements.

.spacetop

Margin block start (should avoid).

.r

Float right mirrored

.l

Float left mirrored

.lauto

Margin inline start auto logical

.rauto

Margin inline end auto logical

.center

Horizontal auto margins

.center-content

Center content in the middle of a defined width and height (uses flex).

.dinline

Display inline-block

.dblock

Display block

.dflex

Display flex

.hidden

Display none

.flex-nowrap

flex-wrap: nowrap

.rel

Position relative Needed in rare cases during prototyping

.txt-c

Text center aligned

.txt-l

Text left aligned mirrored

.txt-r

Text right aligned mirrored

.text-nowrap

Prepares element for ellipses text overflow.

.wrap-break

word-wrap: break-word.

.wrap-none

whites-space: nowrap.

.bthin

Bottom bordered, thin logical

.bthick

Bottom bordered, thick logical

.bthin-dark

Bottom bordered dark, thin logical

.bthick-dark

Bottom bordered dark, thick logical

.clear

Clear both

.dscroll

Overflow-y: auto, overflow-x: hidden

Examples

Border bottom, used heavily in prototyping.

<div class="bthin spaced">.bthin.spaced</div>
<div class="bthick spaced">.bthick.spaced</div>
<div class="bthin-dark spaced">.bthin-dark.spaced</div>
<div class="bthick-dark spaced">.bthick-dark.spaced</div>

.bthin.spaced

.bthick.spaced

.bthin-dark.spaced

.bthick-dark.spaced

Content, of certain width and minimum height, centered.

<div class="center-content center h-5 c-8">
  Content center
</div>

Content center