• .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">
    <p><strong>.page</strong> controls responsive behavior, <strong>.container</strong> adds paddings</p>
<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 class="page">
    <div class="container">
        Header, use container to add padding
  <div class="page">
      <li><a>Footer link</a></li>
SHUT basic layout
Basic 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.

Breathing (@halfspace padded from top and bottom)
Inline end padding logical
Inline start breath logical
Breathing horizontally (right and left)
Breath for li elements
Inline end padding (@space) logical
Inline start padding logical
Padding horizontally (right and left)
Padding block start (should avoid, if you had to use this, reconsider your design strategy here).
Block end margin (@space)
Double block end margin (@doublespace)
Margin inline start logical
Margin inline end logical
Bottom (block-end) margin for li elements, gap for grid elements, or padding around for td elements.
Double bottom (block-end) margin for li elements.
Margin block start (should avoid).
Float right mirrored
Float left mirrored
Margin inline start auto logical
Margin inline end auto logical
Horizontal auto margins
Center content in the middle of a defined width and height (uses flex).
Display inline-block
Display block
Display flex
Display none
flex-wrap: nowrap
Position relative Needed in rare cases during prototyping
Text center aligned
Text left aligned mirrored
Text right aligned mirrored
Prepares element for ellipses text overflow.
word-wrap: break-word.
whites-space: nowrap.
Bottom bordered, thin logical
Bottom bordered, thick logical
Bottom bordered dark, thin logical
Bottom bordered dark, thick logical
Clear both
Overflow-y: auto, overflow-x: hidden


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>

Content, of certain width and minimum height, centered.

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