dm-css v2.3.3

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.

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.

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/dm-css@2.3.3/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/dm-css@2.2.1/css/dm.min.css" rel="stylesheet">

Box model

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

<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.

<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

<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

<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

<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

<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.

<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

<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

<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

<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

<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.

<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.

<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

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

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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

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.

<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

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

<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

<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

<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

<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

<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

<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

<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

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

<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%.

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.

<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

<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

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

List orientation

Change list orientation and hide bullets.

Mnemonic: ls = List style

<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

<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.

<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.

<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.

<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

<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.

<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

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

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

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

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

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

<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

<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

<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

<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

<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

<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