diff --git a/docs/images/inheritance-1.png b/docs/images/inheritance-1.png new file mode 100644 index 00000000..3a1a9d73 Binary files /dev/null and b/docs/images/inheritance-1.png differ diff --git a/docs/images/inheritance-2-1-1.png b/docs/images/inheritance-2-1-1.png new file mode 100644 index 00000000..442e7314 Binary files /dev/null and b/docs/images/inheritance-2-1-1.png differ diff --git a/docs/images/inheritance-2-1-2.png b/docs/images/inheritance-2-1-2.png new file mode 100644 index 00000000..42f05ff2 Binary files /dev/null and b/docs/images/inheritance-2-1-2.png differ diff --git a/docs/images/inheritance-2-2-1.png b/docs/images/inheritance-2-2-1.png new file mode 100644 index 00000000..f0dca122 Binary files /dev/null and b/docs/images/inheritance-2-2-1.png differ diff --git a/docs/images/inheritance-2-2-2.png b/docs/images/inheritance-2-2-2.png new file mode 100644 index 00000000..f63f7036 Binary files /dev/null and b/docs/images/inheritance-2-2-2.png differ diff --git a/docs/images/inheritance-2-2-3.png b/docs/images/inheritance-2-2-3.png new file mode 100644 index 00000000..7c89ecde Binary files /dev/null and b/docs/images/inheritance-2-2-3.png differ diff --git a/docs/images/inheritance-2-2-4.png b/docs/images/inheritance-2-2-4.png new file mode 100644 index 00000000..771b9310 Binary files /dev/null and b/docs/images/inheritance-2-2-4.png differ diff --git a/docs/images/inheritance-2-2-5.png b/docs/images/inheritance-2-2-5.png new file mode 100644 index 00000000..3d496817 Binary files /dev/null and b/docs/images/inheritance-2-2-5.png differ diff --git a/docs/images/inheritance-tree.png b/docs/images/inheritance-tree.png new file mode 100644 index 00000000..058df0f6 Binary files /dev/null and b/docs/images/inheritance-tree.png differ diff --git a/docs/inheritance b/docs/inheritance index 37a4557c..94507fc0 100644 --- a/docs/inheritance +++ b/docs/inheritance @@ -1,16 +1,33 @@ ## Inheritance -Inheritance is a very useful ability of `children` elements to get the same property in default as his parent does have (to 'inherit' it). +Inheritance is an ability of an element to transfer a pack of propereties to its `children` elements 'wrapped inside'. +Properties have to be set in specific order: ### Main properties' inheritance: * styles * parents * parent's styles * defaults +As for `prototypes`, this property has to be set after styles, but before parents. So the order will be this: ### Reference properties' inheritance: * styles * prototypes * parents * parent's styles * defaults + +------------------------ + +Let's take a closer look using a [Muon Monitor Visualization](demo/muon-monitor/README.md). +Running the demo, we will see this: +![](../docs/images/inheritance-1.png) + +![](../docs/images/inheritance-tree.png) +![](../docs/images/inheritance-2-1-1.png) +![](../docs/images/inheritance-2-1-2.png) +![](../docs/images/inheritance-2-2-1.png) +![](../docs/images/inheritance-2-2-2.png) +![](../docs/images/inheritance-2-2-3.png) +![](../docs/images/inheritance-2-2-4.png) +![](../docs/images/inheritance-2-2-5.png) \ No newline at end of file