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