Power Packed CSS Styling for Everyone

• Dyno Might CSS
  • Introduction
  • Benefits
• Fundamentals
  • Basic usage
  • CSS resets
  • Style model
  • Sacred Seven
  • Debugging
• Getting started
  • Setup
  • Starter HTML
  • Using NPM module
  • Using the CDN
• Box model
• Display
  • General Display styles
  • CSS Table styles
  • CSS Table caption
  • Layout example
• Sizing
  • Percentage based
  • Fixed unit based
  • Resetting sizing
• Spacing
• Padding
  • Padding top
  • Padding bottom
  • Padding left
  • Padding right
  • Padding vertical
  • Padding horizontal
• Margin
  • Margin top
  • Margin bottom
  • Margin left
  • Margin right
  • Margin vertical
  • Margin horizontal
  • Auto Margin
• Positioning
  • Position types
  • Position location
  • Z Index
• Font
  • Height scaling up
  • Height scaling down
  • Heading
  • Font styles
  • Font weight
• Text
  • Text justification
  • Text vertical alignments
  • Text transformation
  • Text wrapping
  • Text overflow
  • Text Word break
  • Text line height
  • Text direction
• CSS Borders
  • Border values
  • Border notations
  • Border all sides
  • Border top
  • Border bottom
  • Border left
  • Border right
  • Border vertical
  • Border horizontal
  • Removing Borders
  • Border Radius
  • Corner Radius
  • Face Radius
  • Border line style
  • Circle Radius
  • Pill style Borders
• Lists
  • Bullet marks
  • Bullet placement
  • List orientation
  • List style reset
• Utility
  • Centering
  • Visibility
  • Opacity
• Floats
  • Clearfix
• CSS Columns
• Flexbox
  • Flex Container
  • Flex direction
  • Flex item flow
  • Wrap mode
  • Justify Main axis
  • Justify Cross axis
  • Align content Cross axis
  • Item align Cross axis
  • Flex ordering
  • Growing Flex item
  • Shrinking Flex item
  • Grid
  • Responsive design

Dyno Might CSS

Introduction

Powerful CSS styling made simple, fast and fun!

Dyno Might CSS (DM-CSS) is a concise CSS Style-Notation layout and design Toolkit. It is designed specifically to use simple and memorable Style-Notation that is specified as a "class" attribute.

Dyno Might CSS brings consistency to your HTML/JSX coding and allows for quick addition of CSS styles that are easy to read.

Works with HTML, Angular, React and Vue.js.

Benefits

Some of the features of Dyno Might CSS Toolkit you will enjoy.

• Small size (21 KB).
• Fast loading and blazing execution.
• Robust compact Style-Notation.
• Easy to learn.
• Increased productivity.
• Designed for Designers, yet developer friendly!
• No side effects, works like your own custom CSS styles.
• Tested with hundreds of Test cases (604).

Fundamentals

Basic usage

Dyno Might CSS Style-Notation are added as "class" attribute to an element's HTML Tag.

For example, let us say we want to center text and capitalize it. We also want a dashed border with a width of 20% of available space. The Style-Notation would look like the following.

<div class="ttc ttup b1 dash w20">centered text</div>

The Style-Notation read from left to right adds the following CSS styles.

1. Center text (text transform).
2. Text transform uppercase.
3. Draw a border 1px wide.
4. Set border line style to dashed (default is solid).
5. Set "<div>" element to take up 20% of available width.

Notice the power of Style-Notation and how it is additive, resulting in increased productivity. Context switching between HTML/JSX and the CSS style sheet is eliminated for all core CSS styles.

CSS resets

The Root Font family is set to "Roboto" with a height of 16px. This base size is used to calculate the size of other elements by using the "rem" CSS unit.

Dyno Might CSS resets CSS styles by resetting margin and padding.

1. The padding values are reset to "0" (zero).
2. The margin values are reset to "0" (zero).

This is done to make layout calculations straight forward.

The global Box Model is changed to use "border-box". This simplifies layout calculation since both margin and padding are contained inside the element's Box Model.

Style model

The Style-Notation is intentionally designed to be short, so one may be productive with less typing. When several notations are applied, this helps keep the overall line length much shorter than if long descriptive words were used for Style-Notation.

Here are some general mnemonics used in the naming of Style-Notations.

|Mnemonic|Description| |-|-| |t|Top| |b|Bottom| |l|Left| |r|Right| |x|Left and right (horizontal), or expand (stretch) with Flexbox| |y|Top and bottom (vertical)|

For each Style-Notation category, the mnemonic (key) will be listed to help with learning.

Sacred Seven

Dyno Might CSS adheres to the "Sacred Seven" when it comes to value ranges. Almost all values range from 0 to 7. A value of zero "0", is used to reset or clear a style.

Debugging

If something seems off with the CSS, you can switch to using a non-compressed friendlier CSS file for DM-CSS.

|CSS Files|Description| |-|-| |dm.css|Uncompressed CSS| |dm.prefix.css|Uncompressed with vendor prefix added| |dm.min.css|Compressed, for Production use|

Getting started

Setup

In the HTML root in the head section, it is a good idea to add the following responsive viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Dyno Might CSS requires HTML5 doctype.

<!doctype html>
<html lang="en">
  ...
</html>

Starter HTML

You may use the following HTML file to start from.

<!doctype html>
<html lang="en">
  <head>
    <title>Dyno Might CSS</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- DM-CSS Toolkit -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/dm.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, Word Wide Web!</h1>
  </body>
</html>

There are two ways to install the Dyno Might CSS Toolkit as a dependency to your project.

1. Install as a NPM module.
2. Use the CDN.

Using NPM module

From a Node.js based project root, type:

npm install --save dm-css

Using the CDN

To use the CDN, add the following <link> Tag to your index.html file, and enter the version of your choice.

General format

<link href="https://cdn.jsdelivr.net/npm/dm-css@<version>/css/dm.min.css" rel="stylesheet">

Example usage for Dyno Might CSS version 2.2.1.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/dm.min.css" rel="stylesheet">

Box model

Dyno Might CSS defaults to using the "border-box" Box Model. You can however change this.

|Notation|Box model|Note| |-|-|-| |bbox|Border box|default| |cbox|Content box| |

<div class="cbox"> ... </div>
<div class="bbox"> ... </div>

Recommendation: Do not change the default Box Model for new projects, and never mix Box Models.

Display

You can hide and show the DOM element with the following styles. This will cause the element to be removed from the DOM and will affect layout. All descendant elements of hidden element are also removed.

|Notation|Visibility| |-|-| |show|Add and display element and its descendants| |hide|Hide and remove element and its descendants|

<div class="show"> ... </div>
<div class="hide"> ... </div>

Note: Styles "hide" is an alias for "dnone", prefer to use hide as it is more clear what we expect to happen.

General Display styles

Mnemonic: d = display

|Notation|CSS display style| |-|-| |dnone|none| |dinline|inline| |diblock|inline-block| |dblock|block| |dflex|flex| |diflex|inline-flex| |dgrid|grid| |digrid|inline-grid|

<div class="dnone"> ... </div>
<div class="dinline"> ... </div>
<div class="diblock"> ... </div>
<div class="dblock"> ... </div>
<div class="dflex"> ... </div>
<div class="diflex"> ... </div>
<div class="dgrid"> ... </div>
<div class="digrid"> ... </div>

CSS Table styles

Pure CSS table layout Style-Notation works like its HTML table counterpart, without the additional tags. This makes the HTML cleaner and less busy.

Mnemonic: t = table

|Notation|CSS Table display style| |-|-| |table|table| |tr|table-row| |td|table-cell| |tcap|table-caption| |tcol|table-column| |tcolgroup|table-column-group| |thead|table-header-group| |tbody|table-row-group| |tfoot|table-footer-group

<div class="table"> ... </div>
<div class="tr"> ... </div>
<div class="td"> ... </div>
<div class="tcap"> ... </div>
<div class="tcol"> ... </div>
<div class="tcolgroup"> ... </div>
<div class="thead"> ... </div>
<div class="tbody"> ... </div>
<div class="tfoot"> ... </div>

CSS Table caption

Mnemonic: tcap = table caption

|Notation|CSS Table caption| |-|-| |tcapt|Caption top| |tcapb|Caption bottom|

<div class="tcapt"> ... </div>
<div class="tcapb"> ... </div>

Layout example

Using CSS table to layout a HTML Form.

<div class="bg w30 m4">
  <form class="table w100 pr4">
    <p class="tcap ml3 pt3">Enter your full name and age.</p>
    <div class="tr">
      <label class="pl3 td wauto" for="fname">First name:</label>
      <input class="td w100" type="text" id="fname">
    </div>
    <div class="tr">
      <label class="pl3 td wauto" for="lname">Last name:</label>
      <input class="td w100" type="text" id="lname">
    </div>
    <div class="tr">
      <label class="pl3 td wauto" for="age">Age:</label>
      <input class="td w100" type="text" id="age">
    </div>
    <div class="tr ttr">
      <span class="td"></span>
      <button class="td">Save</button>
    </div>
  </form>
</div>

Sizing

Set the size of the element "viewport".

Scale values for width and height range from 10% to 100% and incremented by 10.

Percentage based

Mnemonic: w = width, h = height

|Notation|Values|Description| |-|-|-| |w|10-100|Set width percentage| |h|10-100|Set height percentage| |wmin|10-100|Set minimum width percentage| |wmax|10-100|Set maximum width percentage| |hmin|10-100|Set minimum height percentage| |hmax|10-100|Set maximum height percentage|

<div class="w10"> ... </div>
<div class="w20"> ... </div>
<div class="w30"> ... </div>
<div class="w40"> ... </div>
<div class="w50"> ... </div>
<div class="w60"> ... </div>
<div class="w70"> ... </div>
<div class="w80"> ... </div>
<div class="w90"> ... </div>
<div class="w100"> ... </div>

REM Fixed height and width

Fixed width and height sizes are based on the root font using the "rem" unit.

|Notation|Values|Description| |-|-|-| |wf|1-35|Fixed rem based width| |hf|1-35|Fixed rem based height|

<div class="wf10"> ... </div>
<div class="hf25"> ... </div>

Resetting sizing

The following Style-Notations can be used to clear and reset an element's minimum and maximum Viewport size.

These styles work on "inline" element, remember to change the display size for "block" type element when using these Styles-Notations.

  <div class="diblock wauto b1 p2">Some Title</div>

Mnemonic: w = width, h = height

|Notation|Size dimension reset| |-|-| |hauto|Height set to auto| |wauto|Width set to auto| |hscreen|Height max viewport| |wscreen|Width max viewport|

<div class="hauto"> ... </div>
<div class="wauto"> ... </div>
<div class="hnomax"> ... </div>
<div class="wnomax"> ... </div>

Sizing Pro Tip

In CSS, inline elements like "<span>" or "<i>" inherit their height values for margin and padding from surrounding text. The height value for margin or padding for an inline element cannot be changed. To be able to change these properties, you must change their display property from "inline" to "inline-block".

<span class="diblock"> ... </span>

Make sure you have a good understanding of CSS display types. How block and inline elements get rendered and ultimately how this will affect setting their width and height. Otherwise this can lead to some confusion as it will seem as the style changes are not working.

Spacing

The Box Model that Dyno Might CSS uses is "border-box". For more info on Box Model see MDN box-sizing.

By default both "padding" and "margin" values for each side has been set to zero. This allows for simple straight-forward layout calculation, giving you the control when and how much padding or space to add to each HTML element.

The Style-Notation for spacing allows setting the margin and padding used by an element.

• Padding and margin scale values range from 0 to 10.
• Scale values follow the Golden Ratio.

Padding

Padding size based on the Golden Ratio multiple of the base font size. Size range from 0 to 10.

Mnemonic: p = padding

|Notation|Values|Box side| |-|-|-| |p|0-10|Pad all sides| |pt|0-10|Pad top| |pb|0-10|Pad bottom| |pl|0-10|Pad left| |pr|0-10|Pad right| |py|0-10|Pad top and bottom| |px|0-10|Pad left and right|

<div class="p0">Padding size 0</div>
<div class="p1">Padding size 1</div>
<div class="p2">Padding size 2</div>
<div class="p3">Padding size 3</div>
<div class="p4">Padding size 4</div>
<div class="p5">Padding size 5</div>
<div class="p6">Padding size 6</div>
<div class="p7">Padding size 7</div>
<div class="p8">Padding size 87</div>
<div class="p9">Padding size 9</div>
<div class="p10">Padding size 10</div>

Padding top

Mnemonic: pt = padding top

<div class="pt0">Padding top size 0</div>
<div class="pt1">Padding top size 1</div>
<div class="pt2">Padding top size 2</div>
<div class="pt3">Padding top size 3</div>
<div class="pt4">Padding top size 4</div>
<div class="pt5">Padding top size 5</div>
<div class="pt6">Padding top size 6</div>
<div class="pt7">Padding top size 7</div>
<div class="pt8">Padding top size 8</div>
<div class="pt9">Padding top size 9</div>
<div class="pt10">Padding top size 10</div>

Padding bottom

Mnemonic: pb = padding bottom

<div class="pb0">Padding bottom size 0</div>
<div class="pb1">Padding bottom size 1</div>
<div class="pb2">Padding bottom size 2</div>
<div class="pb3">Padding bottom size 3</div>
<div class="pb4">Padding bottom size 4</div>
<div class="pb5">Padding bottom size 5</div>
<div class="pb6">Padding bottom size 6</div>
<div class="pb7">Padding bottom size 7</div>
<div class="pb8">Padding bottom size 8</div>
<div class="pb9">Padding bottom size 9</div>
<div class="pb10">Padding bottom size 10</div>

Padding left

Mnemonic: pl = padding left

<div class="pl0">Padding left size 0</div>
<div class="pl1">Padding left size 1</div>
<div class="pl2">Padding left size 2</div>
<div class="pl3">Padding left size 3</div>
<div class="pl4">Padding left size 4</div>
<div class="pl5">Padding left size 5</div>
<div class="pl6">Padding left size 6</div>
<div class="pl7">Padding left size 7</div>
<div class="pl8">Padding left size 8</div>
<div class="pl9">Padding left size 9</div>
<div class="pl10">Padding left size 10</div>

Padding right

Mnemonic: pr = padding right

<div class="pr0">Padding right size 0</div>
<div class="pr1">Padding right size 1</div>
<div class="pr2">Padding right size 2</div>
<div class="pr3">Padding right size 3</div>
<div class="pr4">Padding right size 4</div>
<div class="pr5">Padding right size 5</div>
<div class="pr6">Padding right size 6</div>
<div class="pr7">Padding right size 7</div>
<div class="pr8">Padding right size 8</div>
<div class="pr9">Padding right size 9</div>
<div class="pr10">Padding right size 10</div>

Padding vertical

Mnemonic: py = padding vertical

<span class="py0">Padding vertical 0</span>
<span class="py1">Padding vertical 1</span>
<span class="py2">Padding vertical 2</span>
<span class="py3">Padding vertical 3</span>
<span class="py4">Padding vertical 4</span>
<span class="py5">Padding vertical 5</span>
<span class="py6">Padding vertical 6</span>
<span class="py7">Padding vertical 7</span>
<span class="py8">Padding vertical 8</span>
<span class="py9">Padding vertical 9</span>
<span class="py10">Padding vertical 10</span>

Padding horizontal

Mnemonic: px = padding horizontal

<span class="px0">Padding horizontal 0</span>
<span class="px1">Padding horizontal 1</span>
<span class="px2">Padding horizontal 2</span>
<span class="px3">Padding horizontal 3</span>
<span class="px4">Padding horizontal 4</span>
<span class="px5">Padding horizontal 5</span>
<span class="px6">Padding horizontal 6</span>
<span class="px7">Padding horizontal 7</span>
<span class="px8">Padding horizontal 8</span>
<span class="px9">Padding horizontal 9</span>
<span class="px10">Padding horizontal 10</span>

Margin

Margin size based on the Golden Ratio multiple of the base font size. Size range from 0 to 10.

Mnemonic: m = margin

|Notation|Values|Box side| |-|-|-| |m|0-10|Margin all sides| |mt|0-10|Margin top| |mb|0-10|Margin bottom| |ml|0-10|Margin left| |mr|0-10|Margin right| |my|0-10|Margins top and bottom| |mx|0-10|Margins left and right|

<div class="m0">Margin size 0</div>
<div class="m1">Margin size 1</div>
<div class="m2">Margin size 2</div>
<div class="m3">Margin size 3</div>
<div class="m4">Margin size 4</div>
<div class="m5">Margin size 5</div>
<div class="m6">Margin size 6</div>
<div class="m7">Margin size 7</div>
<div class="m8">Margin size 8</div>
<div class="m9">Margin size 9</div>
<div class="m10">Margin size 10</div>

Margin top

Mnemonic: m t= margin top

<div class="mt0">Margin top size 0</div>
<div class="mt1">Margin top size 1</div>
<div class="mt2">Margin top size 2</div>
<div class="mt3">Margin top size 3</div>
<div class="mt4">Margin top size 4</div>
<div class="mt5">Margin top size 5</div>
<div class="mt6">Margin top size 6</div>
<div class="mt7">Margin top size 7</div>
<div class="mt8">Margin top size 8</div>
<div class="mt9">Margin top size 9</div>
<div class="mt10">Margin top size 10</div>

Margin bottom

Mnemonic: mb = margin bottom

<div class="mb0">Margin bottom size 0</div>
<div class="mb1">Margin bottom size 1</div>
<div class="mb2">Margin bottom size 2</div>
<div class="mb3">Margin bottom size 3</div>
<div class="mb4">Margin bottom size 4</div>
<div class="mb5">Margin bottom size 5</div>
<div class="mb6">Margin bottom size 6</div>
<div class="mb7">Margin bottom size 7</div>
<div class="mb8">Margin bottom size 8</div>
<div class="mb9">Margin bottom size 9</div>
<div class="mb10">Margin bottom size 10</div>

Margin left

Mnemonic: ml = margin left

<div class="ml0">Margin left size 0</div>
<div class="ml1">Margin left size 1</div>
<div class="ml2">Margin left size 2</div>
<div class="ml3">Margin left size 3</div>
<div class="ml4">Margin left size 4</div>
<div class="ml5">Margin left size 5</div>
<div class="ml6">Margin left size 6</div>
<div class="ml7">Margin left size 7</div>
<div class="ml8">Margin left size 8</div>
<div class="ml9">Margin left size 9</div>
<div class="ml10">Margin left size 10</div>

Margin right

Mnemonic: mr = margin right

<div class="mr0">Margin right size 0</div>
<div class="mr1">Margin right size 1</div>
<div class="mr2">Margin right size 2</div>
<div class="mr3">Margin right size 3</div>
<div class="mr4">Margin right size 4</div>
<div class="mr5">Margin right size 5</div>
<div class="mr6">Margin right size 6</div>
<div class="mr7">Margin right size 7</div>
<div class="mr8">Margin right size 8</div>
<div class="mr9">Margin right size 9</div>
<div class="mr10">Margin right size 10</div>

Margin vertical

Mnemonic: my = margin vertical

<span class="my0">Margin vertical 0</span>
<span class="my1">Margin vertical 1</span>
<span class="my2">Margin vertical 2</span>
<span class="my3">Margin vertical 3</span>
<span class="my4">Margin vertical 4</span>
<span class="my5">Margin vertical 5</span>
<span class="my6">Margin vertical 6</span>
<span class="my7">Margin vertical 7</span>
<span class="my8">Margin vertical 8</span>
<span class="my9">Margin vertical 9</span>
<span class="my10">Margin vertical 10</span>

Margin horizontal

Mnemonic: mx = margin horizontal

<span class="mx0">Margin horizontal 0</span>
<span class="mx1">Margin horizontal 1</span>
<span class="mx2">Margin horizontal 2</span>
<span class="mx3">Margin horizontal 3</span>
<span class="mx4">Margin horizontal 4</span>
<span class="mx5">Margin horizontal 5</span>
<span class="mx6">Margin horizontal 6</span>
<span class="mx7">Margin horizontal 7</span>
<span class="mx8">Margin horizontal 8</span>
<span class="mx9">Margin horizontal 9</span>
<span class="mx10">Margin horizontal 10</span>

Auto Margin

By setting margin to auto, size is determined from available space.

Mnemonic: ma = margin auto

|Notation|Box side| |-|-| |ma|Auto margins horizontal and vertical| |max|Auto margins left and right| |may|Auto margins top and bottom| |mal|Auto margins left | |mar|Auto margins right|

<div class="ma">Auto</div>
<div class="max">Auto horizontal</div>
<div class="may">Auto vertial</div>
<div class="mal">Auto left</div>
<div class="mar">Auto right</div>

Positioning

Most Browsers allow an element to be re-positioned relative to its default position, relative to another element, or fixed to a given location.

Dyno Might CSS makes positioning elements simple.

Position types

An element position property can be changed to one of the following CSS styles.

|Notation|Description| |-|-| |absolute|Position according to closest relative positioned ancestor| |fixed|Position relative to the Viewport| |relative|Position relative to natural position using offset value| |static|Default, use natural positioning| |sticky|Natural position until scroll max is reached, then sticks|

<span class="absolute"> ... </span>
<span class="fixed"> ... </span>
<span class="relative"> ... </span>
<span class="static"> ... </span>
<span class="sticky"> ... </span>

Position location

Using fixed or absolute positioning.

|Notation|Position value| |-|-|-| |top|Top value of zero| |bottom|Bottom value of zero| |left|Left value of zero| |right|Right value of zero|

<span class="top"> ... </span>
<span class="bottom"> ... </span>
<span class="left"> ... </span>
<span class="right"> ... </span>

Z Index

Set the Z order of an element. Positive Z values move an element in-front of stacked elements, while negative Z value move an element behind stacked elements.

Mnemonic: z = Z-Index

|Notation|Values|Z Index| |-|-|-| |z|0-10|Positive Z order| |z-|1-10|Negative Z order| |zauto||Automatic positive Z order|

For automatic Z ordering, successive elements are given a positive increasing Z order.

<span class="zauto"> ... </span>

The default Z-index value is 0, and goes up to 7.

Pro tip: Z indexing only work for elements with a position of "relative" or "absolute".

Positive Z-index values.

<span class="z0"> ... </span>
<span class="z1"> ... </span>
<span class="z2"> ... </span>
<span class="z3"> ... </span>
<span class="z4"> ... </span>
<span class="z5"> ... </span>
<span class="z6"> ... </span>
<span class="z7"> ... </span>
<span class="z8"> ... </span>
<span class="z9"> ... </span>
<span class="z10"> ... </span>

Negative Z-index values.

<span class="z-1"> ... </span>
<span class="z-2"> ... </span>
<span class="z-3"> ... </span>
<span class="z-4"> ... </span>
<span class="z-5"> ... </span>
<span class="z-6"> ... </span>
<span class="z-7"> ... </span>
<span class="z-8"> ... </span>
<span class="z-9"> ... </span>
<span class="z-10"> ... </span>

Font

A font scale of 1 has a font height equal to the root element, which is set to 16px from the font family of Roboto (unless changed).

Mnemonic: fh = Font height

|Notation|Values|Font scaling| |-|-|-| |fh |1-7|Increase font size| |fh-|1-7|Reduce font size| |h |1-7|Shrink Heading size|

Height scaling up

Positive font heights follows the "Perfect Third" scale, ranging from 1 to 7. Font size will grow.

Higher scale values result in progressively larger fonts. Note this is the reverse of HTML heading values.

<div class="fh1">Font height 1</div>
<div class="fh2">Font height 2</div>
<div class="fh3">Font height 3</div>
<div class="fh4">Font height 4</div>
<div class="fh5">Font height 5</div>
<div class="fh6">Font height 6</div>
<div class="fh7">Font height 7</div>

Height scaling down

Negative font height get incrementally smaller and follow a scale from 0.9 to 0.3 reduced by a fix delta of 0.1.

When a font height is scaled down, the values become a fraction of the root font height.

You will notice in the Style-Notation, scaled down fonts have a leading "-" dash before the value, this can be consider negative scaled values.

Mnemonic: fh = Font height

<div class="fh-1">Font height 1</div>
<div class="fh-2">Font height 2</div>
<div class="fh-3">Font height 3</div>
<div class="fh-4">Font height 4</div>
<div class="fh-5">Font height 5</div>
<div class="fh-6">Font height 6</div>
<div class="fh-7">Font height 7</div>

Heading

There are also 6 Heading Style-Notations, which display as the regular HTML heading tags.

• Headings have been changed to use the "Major Third" scale.
• For headings you can also use the regular HTML h1 to h6 tags.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Note: Style-Notation provides an extra heading value for h7.

Font styles

Mnemonic: fs = Font style

|Notation|Font style| |-|-| |fsn|Font style none, reset all styles| |fsb|Bold| |fsi|Italic| |fsu|Underline| |fss|Strike-through| |fsw|Wavy underline|

<div class="fsn">Font style none</div>
<div class="fsb">Font style bold</div>
<div class="fsi">Font style italic</div>
<div class="fsu">Font style underline</div>
<div class="fss">Font style strike-through</div>
<div class="fsw">Font style wavy underline</div>

Font weight

The font weight depends on the font being used. The weight determines the thickness of the displayed characters.

The weight range is from 100 to 900, and increases thickness (thin to think). Not all values maybe be valid, as it depends on the font set being used.

Note: Values increment by 100.

Mnemonic: fw = Font weight

|Notation|Values|Font weight| |-|-|-| |fw|100-900|Set the font boldness (thickness) value|

<div class="fw100"> ... </div>
<div class="fw200"> ... </div>
<div class="fw300"> ... </div>
<div class="fw400"> ... </div>
<div class="fw500"> ... </div>
<div class="fw600"> ... </div>
<div class="fw700"> ... </div>
<div class="fw800"> ... </div>
<div class="fw900"> ... </div>

Text

Here are a few handy CSS styles for working with text.

Text justification

The following Style-Notations are used to justify text.

Mnemonic: tt = Text transform

|Notation|Text transform| |-|-| |ttl|Left justify text| |ttc|Center text| |ttr|Right justify text| |ttj|Justify multi-line text|

<div class="ttl">This text is left justified</div>
<div class="ttc">This text is centered</div>
<div class="ttr">This text is right justified</div>
<div class="ttj">This text is fully justified, more text to wrap around and justify</div>

Note: For text justification to work, the text must span multiple lines.

Text vertical alignments

Specify the vertical alignment of an inline or table-cell box.

Mnemonic: ttv = Text transform vertical

|Notation|Description| |-|-| |ttvt|Vertical align top| |ttvm|Vertical align middle| |ttvbl|Vertical align baseline| |ttvb|Vertical align bottom| |ttvtt|Vertical align text top| |ttvtb|Vertical align text bottom| |ttsub|Vertical align sub-script| |ttsuper|Vertical align super-script|

<div class="ttvt"> ... </div>
<div class="ttvm"> ... </div>
<div class="ttvbl"> ... </div>
<div class="ttvb"> ... </div>
<div class="ttvtt"> ... </div>
<div class="ttvtb"> ... </div>
<div class="ttsub"> ... </div>
<div class="ttsuper"> ... </div>

Text transformation

Mnemonic: tt = Text transform

|Notation|Text transform| |-|-| |ttcap|Capitalize text| |ttup|Make all text upper-case| |ttlow|Mark all text lower-case| |ttnone|Remove any text transform previously set|

<div class="ttcap">text has been transformed</div>
<div class="ttup">text has been transformed</div>
<div class="ttlow">TEXT HAS BEEN TRANSFORMED</div>
<div class="ttnone">Text has NOT been transformed</div>

Style-Notation "ttnone" should be used to reset existing text style when they are not desired.

Text wrapping

Control if wrapping should occur when text overflows its Viewport.

Mnemonic: tt = Text transform

|Notation|Text flow mode| |-|-| |ttwrap|Wrap text outside its Viewport| |ttnowrap|Allow text to flow outside its Viewport|

<div class="ttwrap"> ... </div>
<div class="ttnowrap"> ... </div>

Text overflow

Specify text overflow behavior when it is bigger than its display Viewport.

Mnemonic: tt = Text transform

|Notation|Text flow mode| |-|-| |ttof|Allow text to overflow Viewport| |ttofa|Add a scroll-bar when text overflows| |ttclip|Hide overflowed text outside Viewport| |ttscroll|Add a scroll-bar when text overflows|

<div class="ttof">Allow overflow</div>
<div class="ttofa">Add scroll-bar when needed</div>
<div class="ttclip">Clip text outside Viewport</div>
<div class="ttscroll">Add scroll-bar</div>

Text overflow control for vertical direction, when lines wrap around.

Mnemonic: tt = Text transform

|Notation|Text vertical flow mode| |-|-| |ttofy|Allow text to overflow Viewport| |ttofya|Add a scroll-bar when text overflows| |ttclipy|Hide overflowed text outside Viewport| |ttscrolly|Add a scroll-bar when text overflows|

<div class="ttofy"> ... </div>
<div class="ttofya"> ... </div>
<div class="ttclipy"> ... </div>
<div class="ttscrolly"> ... </div>

Text overflow control for horizontal direction.

Mnemonic: tt = Text transform

|Notation|Text horizontal flow mode| |-|-| |ttofx|Allow text to overflow Viewport| |ttofxa|Add a scroll-bar when text overflows| |ttclipx|Hide overflowed text outside Viewport| |ttscrollx|Add a scroll-bar when text overflows|

<div class="ttofx"> ... </div>
<div class="ttofxa"> ... </div>
<div class="ttclipx"> ... </div>
<div class="ttscrollx"> ... </div>

Text Word break

Control how breaking occurs when end of line is reached.

Mnemonic: tt = Text transform

|Notation|Text word break| |-|-| |ttwb|Break word on space| |ttwba|Word with no space will be broken|

<div class="ttwb">The Fox jumped over the lazy sleeping Dog.</div>
<div class="ttwba">Supercalifragilisticexpialidocious</div>

Text line height

Set the line height.

Mnemonic: ttl = Text transform line

|Notation|Values|Line height| |-|-|-| |ttlh|0-10|Increase line height| |ttlh-|1-10|Reduce line height|

Increasing line heights.

<div class="ttlh0"> ... </div>
<div class="ttlh1"> ... </div>
<div class="ttlh2"> ... </div>
<div class="ttlh3"> ... </div>
<div class="ttlh4"> ... </div>
<div class="ttlh5"> ... </div>
<div class="ttlh6"> ... </div>
<div class="ttlh7"> ... </div>
<div class="ttlh8"> ... </div>
<div class="ttlh9"> ... </div>
<div class="ttlh10"> ... </div>

Decreasing line heights.

<div class="ttlh-1"> ... </div>
<div class="ttlh-2"> ... </div>
<div class="ttlh-3"> ... </div>
<div class="ttlh-4"> ... </div>
<div class="ttlh-5"> ... </div>
<div class="ttlh-6"> ... </div>
<div class="ttlh-7"> ... </div>
<div class="ttlh-8"> ... </div>
<div class="ttlh-9"> ... </div>
<div class="ttlh-10"> ... </div>

Text direction

Set the direction of text based on language in use.

|Notation|Text direction| |-|-| |ltr|Left of right| |rtl|Right to left|

<div class="ltr"> ... </div>
<div class="rtl"> ... </div>

CSS Borders

The Border Style-Notation provides the flexibility to add and remove borders.

• The default border line style is a solid line.

An element can be given borders on:

• All sides
• No sides
• One side (top, bottom, left ,right)
• Two sides (top-bottom or left-right)

Border values

The postfix value for a border denotes the thickness of the border line.

• The supported values range from 0 to 10.

A value of "0" (zero) indicates no border. You would use it to remove borders from an element that may already have borders.

Border notations

Mnemonic: b = border

|Notation|Values|Border sides| |-|-|-| |b|0-10|Border on all sides| |bt|0-10|Border on top| |bb|0-10|Border on bottom| |bl|0-10|Border on left| |br|0-10|Border on right| |by|0-10|Border on top and bottom| |bx|0-10|Border on left and right|

Border all sides

Border thickness value range from 0 to 10.

<div class="b0"> ... </div>
<div class="b1"> ... </div>
<div class="b2"> ... </div>
<div class="b3"> ... </div>
<div class="b4"> ... </div>
<div class="b5"> ... </div>
<div class="b6"> ... </div>
<div class="b7"> ... </div>
<div class="b8"> ... </div>
<div class="b9"> ... </div>
<div class="b10"> ... </div>

Border top

Mnemonic: bt = border top

<div class="bt0"> ... </div>
<div class="bt1"> ... </div>
<div class="bt2"> ... </div>
<div class="bt3"> ... </div>
<div class="bt4"> ... </div>
<div class="bt5"> ... </div>
<div class="bt6"> ... </div>
<div class="bt7"> ... </div>
<div class="bt8"> ... </div>
<div class="bt9"> ... </div>
<div class="bt10"> ... </div>

Border bottom

Mnemonic: bb = border bottom

<div class="bb0"> ... </div>
<div class="bb1"> ... </div>
<div class="bb2"> ... </div>
<div class="bb3"> ... </div>
<div class="bb4"> ... </div>
<div class="bb5"> ... </div>
<div class="bb6"> ... </div>
<div class="bb7"> ... </div>
<div class="bb8"> ... </div>
<div class="bb9"> ... </div>
<div class="bb10"> ... </div>

Border left

Mnemonic: bl = border left

<div class="bl0"> ... </div>
<div class="bl1"> ... </div>
<div class="bl2"> ... </div>
<div class="bl3"> ... </div>
<div class="bl4"> ... </div>
<div class="bl5"> ... </div>
<div class="bl6"> ... </div>
<div class="bl7"> ... </div>
<div class="bl8"> ... </div>
<div class="bl9"> ... </div>
<div class="bl10"> ... </div>

Border right

Mnemonic: br = border right

<div class="br0"> ... </div>
<div class="br1"> ... </div>
<div class="br2"> ... </div>
<div class="br3"> ... </div>
<div class="br4"> ... </div>
<div class="br5"> ... </div>
<div class="br6"> ... </div>
<div class="br7"> ... </div>
<div class="br8"> ... </div>
<div class="br9"> ... </div>
<div class="br10"> ... </div>

Border vertical

Mnemonic: by = border vertical

<div class="by0"> ... </div>
<div class="by1"> ... </div>
<div class="by2"> ... </div>
<div class="by3"> ... </div>
<div class="by4"> ... </div>
<div class="by5"> ... </div>
<div class="by6"> ... </div>
<div class="by7"> ... </div>
<div class="by8"> ... </div>
<div class="by9"> ... </div>
<div class="by10"> ... </div>

Border horizontal

Mnemonic: bx = border horizontal

<div class="bx0"> ... </div>
<div class="bx1"> ... </div>
<div class="bx2"> ... </div>
<div class="bx3"> ... </div>
<div class="bx4"> ... </div>
<div class="bx5"> ... </div>
<div class="bx6"> ... </div>
<div class="bx7"> ... </div>
<div class="bx8"> ... </div>
<div class="bx9"> ... </div>
<div class="bx10"> ... </div>

Removing Borders

There may be times you wish to remove a border from one or all sides. To do this, use a value of "0" (zero) with one of border Style-Notation.

Mnemonic: b = border

<div class="b0"> ... </div>
<div class="bt0"> ... </div>
<div class="bb0"> ... </div>
<div class="bl0"> ... </div>
<div class="br0"> ... </div>
<div class="by0"> ... </div>
<div class="bx0"> ... </div>

You can use a combination of border styles to add then remove borders.

• Add borders to all sides and clear the border on the right side.

<div class="b2 br0"> ... </div>

Border Radius

Border corners can be given a radius value to round out the corners.

• The border radius values range from 0 to 7.
• This scale follows the Golden Ratio.

A radius value of "0" (zero) will reset "round" borders to have square corners.

Mnemonic: r = radius

|Notation|Values|Radius size| |-|-|-| |r|0-10|All radius|

<div class="b1 r0"> ... </div>
<div class="b1 r1"> ... </div>
<div class="b1 r2"> ... </div>
<div class="b1 r3"> ... </div>
<div class="b1 r4"> ... </div>
<div class="b1 r5"> ... </div>
<div class="b1 r6"> ... </div>
<div class="b1 r7"> ... </div>
<div class="b1 r8"> ... </div>
<div class="b1 r9"> ... </div>
<div class="b1 r10"> ... </div>

NOTE: As the size gets bigger, radius value 6 and up come into play.

Radius size is always consistent as shown below for larger dimensions.

NOTE: As the size gets bigger, radius value 6 and up come into play.

Corner Radius

You can set the border value for each individual corner using the following Style-Notation.

Mnemonic: rt = radius top, rb = radius bottom

|Notation|Values|Border box corner| |-|-|-| |rtl|0-10|Top left| |rtr|0-10|Top right| |rbl|0-10|Bottom left| |rbr|0-10|Bottom right|

<div class="b1 rtl5">Top left radius</div>
<div class="b1 rtr5">Top right radius</div>
<div class="b1 rbl5">Bottom left radius</div>
<div class="b1 rbr5">Bottom right radius</div>

Face Radius

The face radius covers each side of the Box Model to have round corners.

Mnemonic: r = radius

|Notation|Values|Border box face| |-|-|-| |rt|0-10|Top face| |rb|0-10|Bottom face| |rl|0-10|Left face| |rr|0-10|Right face|

<div class="b1 rt5">Radius top face</div>
<div class="b1 rb5">Radius bottom face</div>
<div class="b1 rl5">Radius left face</div>
<div class="b1 rr5">Radius right face</div>

Border line style

Set border line style to dashed.

Mnemonic: b = border

|Notation|Border box side| |-|-| |bdash|All sides| |bdasht|Dash on top| |bdashb|Dash on bottom| |bdashl|Dash on left| |bdashr|Dash on right| |bdashy|Dash on top and bottom| |bdashx|Dash on left and right|

<div class="b2 bdash"> ... </div>
<div class="b2 bdasht"> ... </div>
<div class="b2 bdashb"> ... </div>
<div class="b2 bdashl"> ... </div>
<div class="b2 bdashr"> ... </div>
<div class="b2 bdashx"> ... </div>
<div class="b2 bdashy"> ... </div>

Border dot

Border line style dotted.

Mnemonic: b = border

|Notation|Border box side| |-|-| |bdot|All sides| |bdott|Dot on top| |bdotb|Dot on bottom| |bdotl|Dot on left| |bdotr|Dot on right| |bdoty|Dot on top and bottom| |bdotx|Dot on left and right|

<div class="b2 bdot"> ... </div>
<div class="b2 bdott"> ... </div>
<div class="b2 bdotb"> ... </div>
<div class="b2 bdotl"> ... </div>
<div class="b2 bdotr"> ... </div>
<div class="b2 bdotx"> ... </div>
<div class="b2 bdoty"> ... </div>

Border solid

Border line style dotted.

Mnemonic: b = border

|Notation|Border box side| |-|-| |bsolid|All sides| |bsolidt|Dot on top| |bsolidb|Dot on bottom| |bsolidl|Dot on left| |bsolidr|Dot on right| |bsolidy|Dot on top and bottom| |bsolidx|Dot on left and right|

<div class="b2 bsolid"> ... </div>
<div class="b2 bsolidt"> ... </div>
<div class="b2 bsolidb"> ... </div>
<div class="b2 bsolidl"> ... </div>
<div class="b2 bsolidr"> ... </div>
<div class="b2 bsolidx"> ... </div>
<div class="b2 bsolidy"> ... </div>

Border double

Border line style dotted.

Mnemonic: b = border

|Notation|Border box side| |-|-| |bdouble|All sides| |bdoublet|Dot on top| |bdoubleb|Dot on bottom| |bdoublel|Dot on left| |bdoubler|Dot on right| |bdoubley|Dot on top and bottom| |bdoublex|Dot on left and right|

<div class="b2 bdouble"> ... </div>
<div class="b2 bdoublet"> ... </div>
<div class="b2 bdoubleb"> ... </div>
<div class="b2 bdoublel"> ... </div>
<div class="b2 bdoubler"> ... </div>
<div class="b2 bdoublex"> ... </div>
<div class="b2 bdoubley"> ... </div>

Outline border notations

Mnemonic: ob = outline border

|Notation|Values|Border sides| |-|-|-| |0b|0-10|Border on all sides|

Outline border thickness value range from 0 to 10.

<div class="ob0"> ... </div>
<div class="ob1"> ... </div>
<div class="ob2"> ... </div>
<div class="ob3"> ... </div>
<div class="ob4"> ... </div>
<div class="ob5"> ... </div>
<div class="ob6"> ... </div>
<div class="ob7"> ... </div>
<div class="ob8"> ... </div>
<div class="ob9"> ... </div>
<div class="ob10"> ... </div>

Outline border line style

Set border line style to dashed.

Mnemonic: ob = outline border

|Notation|Border box side| |-|-| |obdash|All sides| |obdot|All sides| |obsolid|All sides| |obdouble|All sides|

<div class="obdash"> ... </div>
<div class="obdot"> ... </div>
<div class="obsolid"> ... </div>
<div class="obdouble"> ... </div>

Circle Radius

To draw a circular border, use Style-Notation "circle".

You must include the border notation, "b", as it governs the border property on an element, whereas "circle" sets the border radius value.

• The "circle" notation uses a radius of 50%.

|Notation|Radius side| |-|-| |circle|All sides have a 50% radius value|

Below are three boxes with pixel dimensions of: 80x40, 80x80, 40x80.

.box1 { width: 80px; height: 40px; }
.box2 { width: 80px; height: 80px; }
.box2 { width: 40px; height: 80px; }

<div class="box1 b1 circle"> ... </div>
<div class="box2 b1 circle"> ... </div>
<div class="box3 b1 circle"> ... </div>

Pill style Borders

There are four pill styles for curved borders.

|Notation|Values|Pill shape| |-|-|-| |pill|1-4|Pill shared radius|

<div class="b1 pill1"> ... </div>
<div class="b1 pill2"> ... </div>
<div class="b1 pill3"> ... </div>
<div class="b1 pill4"> ... </div>

Lists

Styles to apply to both order and un-ordered list and list items.

Bullet marks

Mnemonic: ls = List style

|Notation|Bullet style| |-|-| |lsnone|No bullet| |lsdisc|Dot shaped bullet| |lscircle|Circle outlined bullet| |lssquare|Square shaped bullet| |lsalpha|Lower case alpha bullets| |lsroman|Lower case Roman numbers bullets| |lsdecimal|Counting number bullets|

<div class="lsnone"> ... </div>
<div class="lsdisc"> ... </div>
<div class="lscircle"> ... </div>
<div class="lssquare"> ... </div>
<div class="lsalpha"> ... </div>
<div class="lsroman"> ... </div>
<div class="lsdecimal"> ... </div>

Bullet placement

Placement of the bullet for list items.

Mnemonic: ls = List style

|Notation|Bullet placement| |-|-| |lsin|Bullet placed on the inside| |lsout|Bullet placed on the outside|

<div class="lsin"> Inside </div>
<div class="lsout"> Outside </div>

List orientation

Change list orientation and hide bullets.

Mnemonic: ls = List style

|Notation|List orientation| |-|-| |lsrow|Display list along a row (horizontal)| |lscol|Display list down a column (vertical)|

<div class="lsrow"> Horizontal without bullets </div>
<div class="lscol"> Vertical without bullets </div>

List style reset

Reset list style, undo applied list style. Must be applied to a "ol" or "ul" HTML element.

Mnemonic: ls = List style

|Notation|Description| |-|-| |lsreset|Clear list to its default|

<ol class="lsreset"> ... </ol>
<ul class="lsreset"> ... </ul>

Utility

Here are some useful Style-Notation.

Centering

Vertical, horizontal and full centering elements inside the container.

|Notation|Centering| |-|-| |center|Center vertically| |centery|Center vertically and horizontally| |centerx|Center horizontally|

<div class="center"> ... </div>
<div class="centery"> ... </div>
<div class="centerx"> ... </div>

Visibility

Hide or show an element without affecting layout. Other displayed elements will not get re-positioned.

|Notation|Visibility| |-|-| |visible|Display element and its descendants| |invisible|Hide element and its descendants|

<div class="visible"> ... </div>
<div class="invisible"> ... </div>

Opacity

Control the opacity of an element and its descendants. A value of "0" (zero), is not visible, and a value of 10 is completely visible.

|Notation|Value|Opacity| |-|-|-| |opacity|0-10|Higher value is more opaque (visible)|

<div class="opacity0"> ... </div>
<div class="opacity1"> ... </div>
<div class="opacity2"> ... </div>
<div class="opacity3"> ... </div>
<div class="opacity4"> ... </div>
<div class="opacity5"> ... </div>
<div class="opacity6"> ... </div>
<div class="opacity7"> ... </div>
<div class="opacity8"> ... </div>
<div class="opacity9"> ... </div>
<div class="opacity10"> ... </div>

Floats

Positioning element by floating to one side.

Mnemonic: fl = float

|Notation|Float direction| |-|-|-| |fll|Float left| |flr|Float right| |fln|Float none|

<div class="fll"> ... </div>
<div class="flr"> ... </div>
<div class="fln"> ... </div>

Pro Tip: Use display "inline-block" to avoid having to use "clear" when working with "float".

Clearfix

Apply clearfix settings.

|Notation|Description| |-|-|-| |cf| Clearfix|

<div class="cf"> ... </div>

CSS Columns

Columns are the fast and simple way to work with text layout as seen in publications. You can decide between using fixed width column counts, or dynamic width column count.

Mnemonic: col = column

|Notation|Values|Description| |-|-|-| |col|1-7|Dynamic size, fixed columns| |colf|1-7|Fixed width dimension based columns| |colgap|0-7|Gap size between columns| |colauto||Set column width to auto| |colsa||Column span all|

Example: Text using 3 columns.

If you want a fixed number of columns that vary in width based on its container size, use "col".

If you want to maintain a fixed width for each column, and have the column count determined by the size of its container, use "colf".

Flexbox

The Style-Notation for Flexbox makes it easy to do layout.

Flex Container

To create a Flex container, you must change the display property.

Mnemonic: d = display

|Notation|CSS Display| |-|-| |dflex|Flex| |diflex|Inline Flex|

Making descendant items Flex or inline Flex items.

<div class="dflex"> ... </div>
<div class="diflex"> ... </div>

Flex direction

The default Main and Cross axis look like this.

Using the direction Style-Notations, will change the direction of the Main and Cross axis.

Mnemonic: fb = Flexbox

|Notation|Flex direction|Main axis direction| |-|-|-| |fbr|Row (right)|Left to right| |fbl|Row reverse (left)|Right to left| |fbu|Column reverse (up)|Bottom to top| |fbd|Column (down)|Top to bottom|

Note: The Cross axis is always perpendicular to Main axis.

The direction Style-Notation must be added to a Flex container.

<div class="dflex fbr"> ... </div>
<div class="dflex fbl"> ... </div>
<div class="dflex fbu"> ... </div>
<div class="dflex fbd"> ... </div>

Flex item flow

Wrap mode

Additional notation to use for a multi-line Flex container. This will control Flex wrapping mode, items determine too long to fit the line can be set to wrap onto a new line.

Mnemonic: fb = Flexbox

|Notation|Wrap mode| |-|-| |fbw|Flex wrap| |fbnw|Flex no wrap| |fbrw|Flex reverse wrap|

The wrap Style-Notation must be added to a Flex container.

<div class="dflex fbw"> ... </div>
<div class="dflex fbnw"> ... </div>
<div class="dflex fbrw"> ... </div>

Justify Main axis

Justify Flex items along the Main axis.

Mnemonic: fbj = Flexbox justify

|Notation|Justification along Main axis| |-|-| |fbjfs|Justify start| |fbjee|Justify end| |fbjc|Justify center| |fbjsa|Justify space around| |fbjsb|Justify space between|

The justify Style-Notation must be added to a Flex container.

<div class="dflex fbjfs"> ... </div>
<div class="dflex fbjfe"> ... </div>
<div class="dflex fbjc"> ... </div>
<div class="dflex fbjsa"> ... </div>
<div class="dflex fbjsb"> ... </div>

Justify Cross axis

Vertically justify Flex items along their Cross axis.

Mnemonic: fbi = Flexbox item

|Notation|Justification Cross axis| |-|-| |fbifs|Justify items start| |fbife|Justify items end| |fbic|Justify items center| |fbib|Justify items baseline| |fbix|Justify items stretch (eXpand)|

<div class="fbifs"> ... </div>
<div class="fbife"> ... </div>
<div class="fbic"> ... </div>
<div class="fbib"> ... </div>
<div class="fbix"> ... </div>

Align content Cross axis

Justify all Flex items inside a Flex container.

Mnemonic: fbc = Flexbox content

|Notation|Content alignment| |-|-| |fbcfs|Align content start| |fbcfe|Align content end| |fbcc|Align content center| |fbcsa|Align content space around| |fbcsb|Align content space between| |fbcx|Align content stretch (eXpand)|

<div class="fbcfs"> ... </div>
<div class="fbcfe"> ... </div>
<div class="fbcc"> ... </div>
<div class="fbcsa"> ... </div>
<div class="fbcsb"> ... </div>
<div class="fbcx"> ... </div>

Item align Cross axis

Justify single Flex item along the Cross axis.

Mnemonic: fbs = Flexbox self

|Notation|Item self alignment| |-|-| |fbsfs|Align self start| |fbsfe|Align self end| |fbsc|Align self center| |fbsb|Align self baseline| |fbsx|Align self stretch (eXpand)| |fbsa|Align self auto|

<div class="fbsfs"> ... </div>
<div class="fbsfe"> ... </div>
<div class="fbsc"> ... </div>
<div class="fbsb"> ... </div>
<div class="fbsx"> ... </div>
<div class="fbsa"> ... </div>

Flex ordering

Flex items position ordering.

Mnemonic: fbo = Flexbox order

|Notation|Values|Flex item order| |-|-|-| |fbo|0-10|Flex item positive order| |fbo-|1-10|Flex item negative order|

<div class="fbo1"> ... </div>
<div class="fbo2"> ... </div>
<div class="fbo3"> ... </div>
<div class="fbo4"> ... </div>
<div class="fbo5"> ... </div>
<div class="fbo6"> ... </div>
<div class="fbo7"> ... </div>
<div class="fbo8"> ... </div>
<div class="fbo9"> ... </div>
<div class="fbo10"> ... </div>

Example: Flex item ordering.

<div class="fbo3">A</div>
<div class="fbo1">B</div>
<div class="fbo2">C</div>

Negative order positions.

<div class="fbo-1"> ... </div>
<div class="fbo-2"> ... </div>
<div class="fbo-3"> ... </div>
<div class="fbo-4"> ... </div>
<div class="fbo-5"> ... </div>
<div class="fbo-6"> ... </div>
<div class="fbo-7"> ... </div>
<div class="fbo-8"> ... </div>
<div class="fbo-9"> ... </div>
<div class="fbo-10"> ... </div>

Growing Flex item

Grow a Flexbox item.

Mnemonic: fbg = Flexbox grow

|Notation|Values|Description| |-|-|-| |fbg|0-10|Flex item grow|

<div class="fbg0"> ... </div>
<div class="fbg1"> ... </div>
<div class="fbg2"> ... </div>
<div class="fbg3"> ... </div>
<div class="fbg4"> ... </div>
<div class="fbg5"> ... </div>
<div class="fbg6"> ... </div>
<div class="fbg7"> ... </div>
<div class="fbg8"> ... </div>
<div class="fbg9"> ... </div>
<div class="fbg10"> ... </div>

Example: Sizing Flex items.

<div class="fbg0">A</div>
<div class="fbg1">B</div>
<div class="fbg2">C</div>

Shrinking Flex item

Shrink a Flexbox item.

Mnemonic: fbg = Flexbox grow

|Notation|Values|Description| |-|-|-| |fbg-|1-10|Flex item shrink|

<div class="fbg-1"> ... </div>
<div class="fbg-2"> ... </div>
<div class="fbg-3"> ... </div>
<div class="fbg-4"> ... </div>
<div class="fbg-5"> ... </div>
<div class="fbg-6"> ... </div>
<div class="fbg-7"> ... </div>
<div class="fbg-8"> ... </div>
<div class="fbg-9"> ... </div>
<div class="fbg-10"> ... </div>

Grid

• WIP

Responsive design

• WIP