- Dyno Might CSS
- Fundamentals
- Getting started
- Box model
- Display
- Sizing
- Spacing
- Padding
- Margin
- Positioning
- Font
- Text
- CSS Borders
- Lists
- Utility
- Floats
- CSS Columns
- Flexbox
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.
Some of the features of Dyno Might CSS Toolkit you will enjoy.
- Small size (25 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 (394+).
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.
- Center text (text transform).
- Text transform uppercase.
- Draw a border 1px wide.
- Set border line style to dashed (default is solid).
- 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.
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.
- The padding values are reset to "0" (zero).
- The margin top is given a value of 0.25rem (4px).
- All other 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.
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.
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.
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 |
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>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.2.1/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.
- Install as a NPM module.
- Use the CDN.
From a Node.js based project root, type:
npm install --save dm-cssTo 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">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.
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.
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>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>Mnemonic: tcap = table caption
| Notation | CSS Table caption |
|---|---|
| tcapt | Caption top |
| tcapb | Caption bottom |
<div class="tcapt"> ... </div>
<div class="tcapb"> ... </div>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>Set the size of the element "viewport".
Scale values for width and height range from 10% to 100% and incremented by 10.
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>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>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 |
| hnomax | Height has no max value |
| wnomax | Width has no max value |
<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.
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 7.
- Scale values follow the Golden Ratio.
Mnemonic: p = padding
| Notation | Values | Box side |
|---|---|---|
| p | 0-7 | Pad all sides |
| pt | 0-7 | Pad top |
| pb | 0-7 | Pad bottom |
| pl | 0-7 | Pad left |
| pr | 0-7 | Pad right |
| py | 0-7 | Pad top and bottom |
| px | 0-7 | Pad left and right |
Add padding to all sides, values range from 0 to 7 and follow the Golden Ratio.
<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>
Mnemonic: p = padding
<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>
Mnemonic: p = padding
<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>
Mnemonic: p = padding
<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>
Mnemonic: p = padding
<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>
Mnemonic: p = padding
<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>
Mnemonic: p = padding
<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>Set the margin area surrounding an element.
Mnemonic: m = margin
| Notation | Values | Box side |
|---|---|---|
| m | 0-7 | Margin all sides |
| mt | 0-7 | Margin top |
| mb | 0-7 | Margin bottom |
| ml | 0-7 | Margin left |
| mr | 0-7 | Margin right |
| my | 0-7 | Margins top and bottom |
| mx | 0-7 | Margins left and right |
Add margin to all sides, size values range from 0 to 7 and follow the Golden Ratio.
<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>
Mnemonic: m = margin
<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>
Mnemonic: m = margin
<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>
Mnemonic: m = margin
<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>
Mnemonic: m = margin
<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>
Mnemonic: m = margin
<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>
Mnemonic: m = margin
<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>By setting margin to auto, size is determined from available space.
Mnemonic: m = margin
| Notation | Box side |
|---|---|
| mxa | Auto margins left and right |
| mla | Auto margins left |
| mra | Auto margins right |
<div class="mxa">Auto</div>
<div class="mla">Auto left</div>
<div class="mra">Auto right</div>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.
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 |
<span class="absolute"> ... </span>
<span class="fixed"> ... </span>
<span class="relative"> ... </span>
<span class="static"> ... </span>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>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-7 | Positive Z order |
| z- | 1-7 | 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>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>Font heights follows the "Perfect Third" scale, ranging from 1 to 7.
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 |
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>When a font height is scaled down, the values become a fraction of the root font height.
The negative scale reduces font height successively by a factor of 10%.
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>There are also 7 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.
<div class="h1">Font height 1</div>
<div class="h2">Font height 2</div>
<div class="h3">Font height 3</div>
<div class="h4">Font height 4</div>
<div class="h5">Font height 5</div>
<div class="h6">Font height 6</div>
<div class="h7">Font height 7</div>
<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.
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>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>Here are a few handy CSS styles for working with text.
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.
Specify the vertical alignment of an inline or table-cell box.
Mnemonic: tt = Text transform
| 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>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.
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>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>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>Set the line height.
Mnemonic: tt = Text transform
| Notation | Values | Line height |
|---|---|---|
| ttlh | 0-7 | Increase line height |
| ttlh- | 1-7 | 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>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>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>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)
The postfix value for a border denotes the thickness of the border line.
- The supported values range from 0 to 7.
A value of "0" (zero) indicates no border. You would use it to remove borders from an element that may already have borders.
Mnemonic: b = border
| Notation | Values | Border sides |
|---|---|---|
| b | 0-7 | Border on all sides |
| bt | 0-7 | Border on top |
| bb | 0-7 | Border on bottom |
| bl | 0-7 | Border on left |
| br | 0-7 | Border on right |
| by | 0-7 | Border on top and bottom |
| bx | 0-7 | Border on left and right |
Border thickness value range from 0 to 7.
<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>Mnemonic: b = border
<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>Mnemonic: b = border
<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>Mnemonic: b = border
<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>Mnemonic: b = border
<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>Mnemonic: b = border
<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>Mnemonic: b = border
<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>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 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-7 | 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>Radius size is always consistent as shown below for larger dimensions.
You can set the border value for each individual corner using the following Style-Notation.
Mnemonic: r = radius
| Notation | Values | Border box corner |
|---|---|---|
| rtl | 0-7 | Top left |
| rtr | 0-7 | Top right |
| rbl | 0-7 | Bottom left |
| rbr | 0-7 | 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>The face radius covers each side of the Box Model to have round corners.
Mnemonic: r = radius
| Notation | Values | Border box face |
|---|---|---|
| rt | 0-7 | Top face |
| rb | 0-7 | Bottom face |
| rl | 0-7 | Left face |
| rr | 0-7 | 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>Set border line style to dashed.
| Notation | Border box side |
|---|---|
| dash | All sides |
| dasht | Dash on top |
| dashb | Dash on bottom |
| dashl | Dash on left |
| dashr | Dash on right |
| dashy | Dash on top and bottom |
| dashx | Dash on left and right |
<div class="b2 dash"> ... </div>
<div class="b2 dasht"> ... </div>
<div class="b2 dashb"> ... </div>
<div class="b2 dashl"> ... </div>
<div class="b2 dashr"> ... </div>
<div class="b2 dashx"> ... </div>
<div class="b2 dashy"> ... </div>Border dot
Border line style dotted.
| Notation | Border box side |
|---|---|
| dot | All sides |
| dott | Dot on top |
| dotb | Dot on bottom |
| dotl | Dot on left |
| dotr | Dot on right |
| doty | Dot on top and bottom |
| datx | Dot on left and right |
<div class="b2 dot"> ... </div>
<div class="b2 dott"> ... </div>
<div class="b2 dotb"> ... </div>
<div class="b2 dotl"> ... </div>
<div class="b2 dotr"> ... </div>
<div class="b2 dotx"> ... </div>
<div class="b2 doty"> ... </div>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>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>Styles to apply to both order and un-ordered list and list items.
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>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>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>Reset list style, undo applied list style.
Mnemonic: ls = List style
| Notation | Description |
|---|---|
| lsreset | Clear list to its default |
<div class="lsreset"> ... </div>Here are some useful Style-Notation.
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>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>Control the opacity of an element and its descendants. A value of "0" (zero), is not visible, and a value of 7 is completely visible.
| Notation | Value | Opacity |
|---|---|---|
| opacity | 0-7 | 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>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".
Apply clearfix settings.
|Notation|Description| |-|-|-| |cf| Clearfix|
<div class="cf"> ... </div>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".
The Style-Notation for Flexbox makes it easy to do layout.
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>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>
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 Flex items along the Main axis.
Mnemonic: fb = Flexbox
| Notation | Justification along Main axis |
|---|---|
| fbjs | Justify start |
| fbje | Justify end |
| fbjc | Justify center |
| fbja | Justify space around |
| fbjb | Justify space between |
The justify Style-Notation must be added to a Flex container.
<div class="dflex fbjs"> ... </div>
<div class="dflex fbje"> ... </div>
<div class="dflex fbjc"> ... </div>
<div class="dflex fbja"> ... </div>
<div class="dflex fbjb"> ... </div>Vertically justify Flex items along their Cross axis.
Mnemonic: fb = Flexbox
| Notation | Justification Cross axis |
|---|---|
| fbis | Justify items start |
| fbie | Justify items end |
| fbic | Justify items center |
| fbib | Justify items baseline |
| fbix | Justify items stretch (eXpand) |
<div class="fbis"> ... </div>
<div class="fbie"> ... </div>
<div class="fbic"> ... </div>
<div class="fbib"> ... </div>
<div class="fbix"> ... </div>Justify all Flex items inside a Flex container.
Mnemonic: fb = Flexbox
| Notation | Content alignment |
|---|---|
| fbcs | Align content start |
| fbce | Align content end |
| fbcc | Align content center |
| fbca | Align content space around |
| fbcb | Align content space between |
| fbcx | Align content stretch (eXpand) |
<div class="fbcs"> ... </div>
<div class="fbce"> ... </div>
<div class="fbcc"> ... </div>
<div class="fbca"> ... </div>
<div class="fbcb"> ... </div>
<div class="fbcx"> ... </div>Justify single Flex item along the Cross axis.
Mnemonic: fb = Flexbox
| Notation | Item self alignment |
|---|---|
| fbss | Align self start |
| fbse | Align self end |
| fbsc | Align self center |
| fbsb | Align self baseline |
| fbsx | Align self stretch (eXpand) |
| fbsa | Align self auto |
<div class="fbss"> ... </div>
<div class="fbse"> ... </div>
<div class="fbsc"> ... </div>
<div class="fbsb"> ... </div>
<div class="fbsx"> ... </div>
<div class="fbsa"> ... </div>Flex items position ordering.
Mnemonic: fb = Flexbox
| Notation | Values | Flex item order |
|---|---|---|
| fbo | 0-7 | Flex item positive order |
| fbo- | 1-7 | 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>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>Grow a Flexbox item.
Mnemonic: fb = Flexbox
| Notation | Values | Description |
|---|---|---|
| fb | 0-7 | Flex item grow |
<div class="fb0"> ... </div>
<div class="fb1"> ... </div>
<div class="fb2"> ... </div>
<div class="fb3"> ... </div>
<div class="fb4"> ... </div>
<div class="fb5"> ... </div>
<div class="fb6"> ... </div>
<div class="fb7"> ... </div>Example: Sizing Flex items.
<div class="fb0">A</div>
<div class="fb1">B</div>
<div class="fb2">C</div>Shrink a Flexbox item.
Mnemonic: fb = Flexbox
| Notation | Values | Description |
|---|---|---|
| fb- | 1-7 | Flex item shrink |
<div class="fb-1"> ... </div>
<div class="fb-2"> ... </div>
<div class="fb-3"> ... </div>
<div class="fb-4"> ... </div>
<div class="fb-5"> ... </div>
<div class="fb-6"> ... </div>
<div class="fb-7"> ... </div>- WIP
- WIP
![greenkeeper[bot]](https://avatars.githubusercontent.com/u/23040076?size=120)