Turp

The lean CSS framework

Layout

.container - This is your generic container, use it

.vertical - Aligns items vertically

.start .end .center - Alignment of the items in the direction of the flex

.items-start .items-end .items-center - Alignment of the items in the opposite direction of the flex

.spaced .spaced-evenly - Relative placement of the items

.tile5 - Align items like a tile with 5 columns

.w20 - Width: 20%

.h20 - Height: 20%

.off20 - Margin-left: 20px

.flex20 - Flex: 20

<div class="container sm-flex xs-tile5"> <!-- Use tile alignment at xs, flex at sm and above sizes -->
  <div class="sm-w33 p5">1</div> <!-- Width: 33% for sm and above -->
</div>

Utils

.t-left .t-center .t-right - Text alignment

.t-sans-serif .t-serif - Font type

.t-italic .t-light .t-bold .t-black .t-linethrough .t-underline .t-small - Text specs

.t3 .h3 h3 - Use font size 3 (1-6)

.mb5 .pt3 .bb10 - Respectively margin-bottom, padding-top, border-bottom (1-10)

.b-radius20 - Border-radius: 20px (0-50)