FEAT: Extended functionallity

join_js_files.sh

@@ -1,6 +1,6 @@
 TARGET="jpc-like-websites.js"
 SRC="src/js"
-ORDERED_LIST="context.js componentAttribute.js modifier.js component.js baseComponents.js builder.js"
+ORDERED_LIST="context.js componentAttribute.js color.js modifier.js component.js baseComponents.js builder.js"
 
 echo "" > $TARGET
 

src/js/baseComponents.js

@@ -13,21 +13,24 @@ class FlexContainerComponent extends Component {
      * @param {Component|Array<Component>} innerComponent 
      * @returns this component object
      */
-    childContext(innerComponent) {
+    childComponents(innerComponent) {
         if (innerComponent instanceof Array) {
             innerComponent.forEach(icomp => {
-                icomp.modifier(
+                (icomp instanceof Component
-                    new Modifier()
+                    ? icomp
-                        .setStyleRule("flex", "none")
+                    : icomp.backToComponent()
                 )
-            })
+                    .chainModifier()
-        } else {
-            innerComponent.modifier(
-                new Modifier()
                     .setStyleRule("flex", "none")
-            )
+
+            })
+        } else if (!innerComponent instanceof Component) {
+            innerComponent
+                .backToComponent()
+                .chainModifier()
+                .setStyleRule("flex", "none")
         }
-        return super.childContext(innerComponent);
+        return super.childComponents(innerComponent);
     }
 }
 
@@ -40,6 +43,7 @@ class Column extends FlexContainerComponent {
             .addStyleClass("column-component")
             .modifier(
                 new Modifier()
+                    .fillMaxHeight()
                     .setStyleRule("flex-direction", "column")
             );
     }
@@ -47,14 +51,39 @@ class Column extends FlexContainerComponent {
 
 /**
  * A FlexContainerComponent, which organizes the children in a row like manner.
- */
+*/
 class Row extends FlexContainerComponent {
     constructor(attr = {}) {
         super(attr)
             .addStyleClass("row-component")
             .modifier(
                 new Modifier()
+                    .fillMaxWidth()
                     .setStyleRule("flex-direction", "row")
             )
     }
+
+    childComponents(innerComponent) {
+        if (innerComponent instanceof Array) {
+            innerComponent.forEach((icomp, i) => {
+                (icomp instanceof Component
+                    ? icomp
+                    : icomp.backToComponent()
+                ).modifier(
+                    /* sets the width for all elements, 
+                    to avoid overlapping or line break because of lacking width,
+                    a percent is subtracted for every child element  */
+                    new Modifier()
+                        .setStyleRule("float", (i === 0 ? "left" : "right"))
+                        .fillMaxWidth((Math.floor((10000 - 100 * innerComponent.length) / innerComponent.length) / 10000))
+                )
+            })
+        } else {
+            innerComponent.modifier(
+                new Modifier()
+                    .setStyleRule("flex", "none")
+            )
+        }
+        return super.childComponents(innerComponent)
+    }
 }

src/js/builder.js

@@ -1,4 +1,12 @@
 const builder = {
+    components: {
+        parent: {},
+        current: {},
+        previous: {},
+        next: {},
+        openedChain: {}
+    },
+
     genTag: function (tag, attr = {}) { return new Component(document.createElement(tag), attr); },
 
     anchor: function (attr = {}) { return builder.genTag("a", attr); },
@@ -17,10 +25,20 @@ const builder = {
     img: function (attr = {}) { return builder.genTag("img", attr); },
     textarea: function (attr = {}) { return builder.genTag("textarea", attr); },
 
+    table: function (attr = {}) { return builder.genTag("table", attr) },
+    tableRow: function (attr = {}) { return builder.genTag("tr", attr) },
+    tableCell: function (attr = {}) { return builder.genTag("td", attr) },
+    tableCaption: function (attr = {}) { return builder.genTag("caption", attr) },
+    tableHeadCell: function (attr = {}) { return builder.genTag("th", attr) },
+    tableBody: function (attr = {}) { return builder.genTag("tbody", attr) },
+    tableHead: function (attr = {}) { return builder.genTag("thead", attr) },
+    tableFooter: function (attr = {}) { return builder.genTag("tfoot", attr) },
+
+
     row: function (attr = {}) { return new Row(attr) },
     column: function (attr = {}) { return new Column(attr) },
-    page: function(innerComponents){
+    page: function (innerComponents) {
         Page.generate();
-        document.querySelector('#root').appendChild(innerComponents.generate()) 
+        document.querySelector('main').appendChild(innerComponents.generate())
     }
 }

src/js/color.js

@@ -0,0 +1,585 @@
+/**
+ * A simple Color class for rgb set color values.
+ */
+class Color {
+    #red;
+    #green;
+    #blue;
+    #hex;
+
+    constructor(red, green, blue) {
+        this.#red = red;
+        this.#green = green;
+        this.#blue = blue;
+    }
+
+    /**
+     * 
+     * @returns {string} an rgb object string
+     */
+    cssRGBString() {
+        return `rgb(${this.#red}, ${this.#green}, ${this.#blue})`;
+    }
+
+    hex(hexcode) {
+        this.#hex = hexcode;
+        return this;
+    }
+}
+
+const Colors = Object.freeze({
+    indian_red: new Color(176, 23, 31).hex('#B0171F'),
+    crimson: new Color(220, 20, 60).hex('#DC143C'),
+    lightpink: new Color(255, 182, 193).hex('#FFB6C1'),
+    lightpink_1: new Color(255, 174, 185).hex('#FFAEB9'),
+    lightpink_2: new Color(238, 162, 173).hex('#EEA2AD'),
+    lightpink_3: new Color(205, 140, 149).hex('#CD8C95'),
+    lightpink_4: new Color(139, 95, 101).hex('#8B5F65'),
+    pink: new Color(255, 192, 203).hex('#FFC0CB'),
+    pink_1: new Color(255, 181, 197).hex('#FFB5C5'),
+    pink_2: new Color(238, 169, 184).hex('#EEA9B8'),
+    pink_3: new Color(205, 145, 158).hex('#CD919E'),
+    pink_4: new Color(139, 99, 108).hex('#8B636C'),
+    palevioletred: new Color(219, 112, 147).hex('#DB7093'),
+    palevioletred_1: new Color(255, 130, 171).hex('#FF82AB'),
+    palevioletred_2: new Color(238, 121, 159).hex('#EE799F'),
+    palevioletred_3: new Color(205, 104, 137).hex('#CD6889'),
+    palevioletred_4: new Color(139, 71, 93).hex('#8B475D'),
+    lavenderblush_1: new Color(255, 240, 245).hex('#FFF0F5'), //(lavenderblush)
+    lavenderblush_2: new Color(238, 224, 229).hex('#EEE0E5'),
+    lavenderblush_3: new Color(205, 193, 197).hex('#CDC1C5'),
+    lavenderblush_4: new Color(139, 131, 134).hex('#8B8386'),
+    violetred_1: new Color(255, 62, 150).hex('#FF3E96'),
+    violetred_2: new Color(238, 58, 140).hex('#EE3A8C'),
+    violetred_3: new Color(205, 50, 120).hex('#CD3278'),
+    violetred_4: new Color(139, 34, 82).hex('#8B2252'),
+    hotpink: new Color(255, 105, 180).hex('#FF69B4'),
+    hotpink_1: new Color(255, 110, 180).hex('#FF6EB4'),
+    hotpink_2: new Color(238, 106, 167).hex('#EE6AA7'),
+    hotpink_3: new Color(205, 96, 144).hex('#CD6090'),
+    hotpink_4: new Color(139, 58, 98).hex('#8B3A62'),
+    raspberry: new Color(135, 38, 87).hex('#872657'),
+    deeppink_1: new Color(255, 20, 147).hex('#FF1493'), // (deeppink)
+    deeppink_2: new Color(238, 18, 137).hex('#EE1289'),
+    deeppink_3: new Color(205, 16, 118).hex('#CD1076'),
+    deeppink_4: new Color(139, 10, 80).hex('#8B0A50'),
+    maroon_1: new Color(255, 52, 179).hex('#FF34B3'),
+    maroon_2: new Color(238, 48, 167).hex('#EE30A7'),
+    maroon_3: new Color(205, 41, 144).hex('#CD2990'),
+    maroon_4: new Color(139, 28, 98).hex('#8B1C62'),
+    mediumvioletred: new Color(199, 21, 133).hex('#C71585'),
+    violetred: new Color(208, 32, 144).hex('#D02090'),
+    orchid: new Color(218, 112, 214).hex('#DA70D6'),
+    orchid_1: new Color(255, 131, 250).hex('#FF83FA'),
+    orchid_2: new Color(238, 122, 233).hex('#EE7AE9'),
+    orchid_3: new Color(205, 105, 201).hex('#CD69C9'),
+    orchid_4: new Color(139, 71, 137).hex('#8B4789'),
+    thistle: new Color(216, 191, 216).hex('#D8BFD8'),
+    thistle_1: new Color(255, 225, 255).hex('#FFE1FF'),
+    thistle_2: new Color(238, 210, 238).hex('#EED2EE'),
+    thistle_3: new Color(205, 181, 205).hex('#CDB5CD'),
+    thistle_4: new Color(139, 123, 139).hex('#8B7B8B'),
+    plum_1: new Color(255, 187, 255).hex('#FFBBFF'),
+    plum_2: new Color(238, 174, 238).hex('#EEAEEE'),
+    plum_3: new Color(205, 150, 205).hex('#CD96CD'),
+    plum_4: new Color(139, 102, 139).hex('#8B668B'),
+    plum: new Color(221, 160, 221).hex('#DDA0DD'),
+    violet: new Color(238, 130, 238).hex('#EE82EE'),
+    magenta: new Color(255, 0, 255).hex('#FF00FF'), // (fuchsia*)
+    magenta_2: new Color(238, 0, 238).hex('#EE00EE'),
+    magenta_3: new Color(205, 0, 205).hex('#CD00CD'),
+    magenta_4: new Color(139, 0, 139).hex('#8B008B'), //(darkmagenta)
+    purple: new Color(128, 0, 128).hex('#800080'),
+    mediumorchid: new Color(186, 85, 211).hex('#BA55D3'),
+    mediumorchid_1: new Color(224, 102, 255).hex('#E066FF'),
+    mediumorchid_2: new Color(209, 95, 238).hex('#D15FEE'),
+    mediumorchid_3: new Color(180, 82, 205).hex('#B452CD'),
+    mediumorchid_4: new Color(122, 55, 139).hex('#7A378B'),
+    darkviolet: new Color(148, 0, 211).hex('#9400D3'),
+    darkorchid: new Color(153, 50, 204).hex('#9932CC'),
+    darkorchid_1: new Color(191, 62, 255).hex('#BF3EFF'),
+    darkorchid_2: new Color(178, 58, 238).hex('#B23AEE'),
+    darkorchid_3: new Color(154, 50, 205).hex('#9A32CD'),
+    darkorchid_4: new Color(104, 34, 139).hex('#68228B'),
+    indigo: new Color(75, 0, 130).hex('#4B0082'),
+    blueviolet: new Color(138, 43, 226).hex('#8A2BE2'),
+    purple_1: new Color(155, 48, 255).hex('#9B30FF'),
+    purple_2: new Color(145, 44, 238).hex('#912CEE'),
+    purple_3: new Color(125, 38, 205).hex('#7D26CD'),
+    purple_4: new Color(85, 26, 139).hex('#551A8B'),
+    mediumpurple: new Color(147, 112, 219).hex('#9370DB'),
+    mediumpurple_1: new Color(171, 130, 255).hex('#AB82FF'),
+    mediumpurple_2: new Color(159, 121, 238).hex('#9F79EE'),
+    mediumpurple_3: new Color(137, 104, 205).hex('#8968CD'),
+    mediumpurple_4: new Color(93, 71, 139).hex('#5D478B'),
+    darkslateblue: new Color(72, 61, 139).hex('#483D8B'),
+    lightslateblue: new Color(132, 112, 255).hex('#8470FF'),
+    mediumslateblue: new Color(123, 104, 238).hex('#7B68EE'),
+    slateblue: new Color(106, 90, 205).hex('#6A5ACD'),
+    slateblue_1: new Color(131, 111, 255).hex('#836FFF'),
+    slateblue_2: new Color(122, 103, 238).hex('#7A67EE'),
+    slateblue_3: new Color(105, 89, 205).hex('#6959CD'),
+    slateblue_4: new Color(71, 60, 139).hex('#473C8B'),
+    ghostwhite: new Color(248, 248, 255).hex('#F8F8FF'),
+    lavender: new Color(230, 230, 250).hex('#E6E6FA'),
+    blue: new Color(0, 0, 255).hex('#0000FF'),
+    blue_2: new Color(0, 0, 238).hex('#0000EE'),
+    blue_3: new Color(0, 0, 205).hex('#0000CD'), //(mediumblue)
+    blue_4: new Color(0, 0, 139).hex('#00008B'), //(darkblue)
+    navy: new Color(0, 0, 128).hex('#000080'),
+    midnightblue: new Color(25, 25, 112).hex('#191970'),
+    cobalt: new Color(61, 89, 171).hex('#3D59AB'),
+    royalblue: new Color(65, 105, 225).hex('#4169E1'),
+    royalblue_1: new Color(72, 118, 255).hex('#4876FF'),
+    royalblue_2: new Color(67, 110, 238).hex('#436EEE'),
+    royalblue_3: new Color(58, 95, 205).hex('#3A5FCD'),
+    royalblue_4: new Color(39, 64, 139).hex('#27408B'),
+    cornflowerblue: new Color(100, 149, 237).hex('#6495ED'),
+    lightsteelblue: new Color(176, 196, 222).hex('#B0C4DE'),
+    lightsteelblue_1: new Color(202, 225, 255).hex('#CAE1FF'),
+    lightsteelblue_2: new Color(188, 210, 238).hex('#BCD2EE'),
+    lightsteelblue_3: new Color(162, 181, 205).hex('#A2B5CD'),
+    lightsteelblue_4: new Color(110, 123, 139).hex('#6E7B8B'),
+    lightslategray: new Color(119, 136, 153).hex('#778899'),
+    slategray: new Color(112, 128, 144).hex('#708090'),
+    slategray_1: new Color(198, 226, 255).hex('#C6E2FF'),
+    slategray_2: new Color(185, 211, 238).hex('#B9D3EE'),
+    slategray_3: new Color(159, 182, 205).hex('#9FB6CD'),
+    slategray_4: new Color(108, 123, 139).hex('#6C7B8B'),
+    dodgerblue_1: new Color(30, 144, 255).hex('#1E90FF'), //(dodgerblue)
+    dodgerblue_2: new Color(28, 134, 238).hex('#1C86EE'),
+    dodgerblue_3: new Color(24, 116, 205).hex('#1874CD'),
+    dodgerblue_4: new Color(16, 78, 139).hex('#104E8B'),
+    aliceblue: new Color(240, 248, 255).hex('#F0F8FF'),
+    steelblue: new Color(70, 130, 180).hex('#4682B4'),
+    steelblue_1: new Color(99, 184, 255).hex('#63B8FF'),
+    steelblue_2: new Color(92, 172, 238).hex('#5CACEE'),
+    steelblue_3: new Color(79, 148, 205).hex('#4F94CD'),
+    steelblue_4: new Color(54, 100, 139).hex('#36648B'),
+    lightskyblue: new Color(135, 206, 250).hex('#87CEFA'),
+    lightskyblue_1: new Color(176, 226, 255).hex('#B0E2FF'),
+    lightskyblue_2: new Color(164, 211, 238).hex('#A4D3EE'),
+    lightskyblue_3: new Color(141, 182, 205).hex('#8DB6CD'),
+    lightskyblue_4: new Color(96, 123, 139).hex('#607B8B'),
+    skyblue_1: new Color(135, 206, 255).hex('#87CEFF'),
+    skyblue_2: new Color(126, 192, 238).hex('#7EC0EE'),
+    skyblue_3: new Color(108, 166, 205).hex('#6CA6CD'),
+    skyblue_4: new Color(74, 112, 139).hex('#4A708B'),
+    skyblue: new Color(135, 206, 235).hex('#87CEEB'),
+    deepskyblue_1: new Color(0, 191, 255).hex('#00BFFF'), //(deepskyblue)
+    deepskyblue_2: new Color(0, 178, 238).hex('#00B2EE'),
+    deepskyblue_3: new Color(0, 154, 205).hex('#009ACD'),
+    deepskyblue_4: new Color(0, 104, 139).hex('#00688B'),
+    peacock: new Color(51, 161, 201).hex('#33A1C9'),
+    lightblue: new Color(173, 216, 230).hex('#ADD8E6'),
+    lightblue_1: new Color(191, 239, 255).hex('#BFEFFF'),
+    lightblue_2: new Color(178, 223, 238).hex('#B2DFEE'),
+    lightblue_3: new Color(154, 192, 205).hex('#9AC0CD'),
+    lightblue_4: new Color(104, 131, 139).hex('#68838B'),
+    powderblue: new Color(176, 224, 230).hex('#B0E0E6'),
+    cadetblue_1: new Color(152, 245, 255).hex('#98F5FF'),
+    cadetblue_2: new Color(142, 229, 238).hex('#8EE5EE'),
+    cadetblue_3: new Color(122, 197, 205).hex('#7AC5CD'),
+    cadetblue_4: new Color(83, 134, 139).hex('#53868B'),
+    turquoise_1: new Color(0, 245, 255).hex('#00F5FF'),
+    turquoise_2: new Color(0, 229, 238).hex('#00E5EE'),
+    turquoise_3: new Color(0, 197, 205).hex('#00C5CD'),
+    turquoise_4: new Color(0, 134, 139).hex('#00868B'),
+    cadetblue: new Color(95, 158, 160).hex('#5F9EA0'),
+    darkturquoise: new Color(0, 206, 209).hex('#00CED1'),
+    azure_1: new Color(240, 255, 255).hex('#F0FFFF'), //(azure)
+    azure_2: new Color(224, 238, 238).hex('#E0EEEE'),
+    azure_3: new Color(193, 205, 205).hex('#C1CDCD'),
+    azure_4: new Color(131, 139, 139).hex('#838B8B'),
+    lightcyan_1: new Color(224, 255, 255).hex('#E0FFFF'), //(lightcyan)
+    lightcyan_2: new Color(209, 238, 238).hex('#D1EEEE'),
+    lightcyan_3: new Color(180, 205, 205).hex('#B4CDCD'),
+    lightcyan_4: new Color(122, 139, 139).hex('#7A8B8B'),
+    paleturquoise_1: new Color(187, 255, 255).hex('#BBFFFF'),
+    paleturquoise_2: new Color(174, 238, 238).hex('#AEEEEE'), //(paleturquoise)
+    paleturquoise_3: new Color(150, 205, 205).hex('#96CDCD'),
+    paleturquoise_4: new Color(102, 139, 139).hex('#668B8B'),
+    darkslategray: new Color(47, 79, 79).hex('#2F4F4F'),
+    darkslategray_1: new Color(151, 255, 255).hex('#97FFFF'),
+    darkslategray_2: new Color(141, 238, 238).hex('#8DEEEE'),
+    darkslategray_3: new Color(121, 205, 205).hex('#79CDCD'),
+    darkslategray_4: new Color(82, 139, 139).hex('#528B8B'),
+    cyan: new Color(0, 255, 255).hex('#00FFFF'), // aqua
+    cyan_2: new Color(0, 238, 238).hex('#00EEEE'),
+    cyan_3: new Color(0, 205, 205).hex('#00CDCD'),
+    cyan_4: new Color(0, 139, 139).hex('#008B8B'), //(darkcyan)
+    teal: new Color(0, 128, 128).hex('#008080'),
+    mediumturquoise: new Color(72, 209, 204).hex('#48D1CC'),
+    lightseagreen: new Color(32, 178, 170).hex('#20B2AA'),
+    manganeseblue: new Color(3, 168, 158).hex('#03A89E'),
+    turquoise: new Color(64, 224, 208).hex('#40E0D0'),
+    coldgrey: new Color(128, 138, 135).hex('#808A87'),
+    turquoiseblue: new Color(0, 199, 140).hex('#00C78C'),
+    aquamarine_1: new Color(127, 255, 212).hex('#7FFFD4'), //(aquamarine)
+    aquamarine_2: new Color(118, 238, 198).hex('#76EEC6'),
+    aquamarine_3: new Color(102, 205, 170).hex('#66CDAA'), //(mediumaquamarine)
+    aquamarine_4: new Color(69, 139, 116).hex('#458B74'),
+    mediumspringgreen: new Color(0, 250, 154).hex('#00FA9A'),
+    mintcream: new Color(245, 255, 250).hex('#F5FFFA'),
+    springgreen: new Color(0, 255, 127).hex('#00FF7F'),
+    springgreen_1: new Color(0, 238, 118).hex('#00EE76'),
+    springgreen_2: new Color(0, 205, 102).hex('#00CD66'),
+    springgreen_3: new Color(0, 139, 69).hex('#008B45'),
+    mediumseagreen: new Color(60, 179, 113).hex('#3CB371'),
+    seagreen_1: new Color(84, 255, 159).hex('#54FF9F'),
+    seagreen_2: new Color(78, 238, 148).hex('#4EEE94'),
+    seagreen_3: new Color(67, 205, 128).hex('#43CD80'),
+    seagreen_4: new Color(46, 139, 87).hex('#2E8B57'), //(seagreen)
+    emeraldgreen: new Color(0, 201, 87).hex('#00C957'),
+    mint: new Color(189, 252, 201).hex('#BDFCC9'),
+    cobaltgreen: new Color(61, 145, 64).hex('#3D9140'),
+    honeydew_1: new Color(240, 255, 240).hex('#F0FFF0'), //(honeydew)
+    honeydew_2: new Color(224, 238, 224).hex('#E0EEE0'),
+    honeydew_3: new Color(193, 205, 193).hex('#C1CDC1'),
+    honeydew_4: new Color(131, 139, 131).hex('#838B83'),
+    darkseagreen: new Color(143, 188, 143).hex('#8FBC8F'),
+    darkseagreen_1: new Color(193, 255, 193).hex('#C1FFC1'),
+    darkseagreen_2: new Color(180, 238, 180).hex('#B4EEB4'),
+    darkseagreen_3: new Color(155, 205, 155).hex('#9BCD9B'),
+    darkseagreen_4: new Color(105, 139, 105).hex('#698B69'),
+    palegreen: new Color(152, 251, 152).hex('#98FB98'),
+    palegreen_1: new Color(154, 255, 154).hex('#9AFF9A'),
+    palegreen_2: new Color(144, 238, 144).hex('#90EE90'), //(lightgreen)
+    palegreen_3: new Color(124, 205, 124).hex('#7CCD7C'),
+    palegreen_4: new Color(84, 139, 84).hex('#548B54'),
+    limegreen: new Color(50, 205, 50).hex('#32CD32'),
+    forestgreen: new Color(34, 139, 34).hex('#228B22'),
+    green_1: new Color(0, 255, 0).hex('#00FF00'), //(lime*)
+    green_2: new Color(0, 238, 0).hex('#00EE00'),
+    green_3: new Color(0, 205, 0).hex('#00CD00'),
+    green_4: new Color(0, 139, 0).hex('#008B00'),
+    green: new Color(0, 128, 0).hex('#008000'),
+    darkgreen: new Color(0, 100, 0).hex('#006400'),
+    sapgreen: new Color(48, 128, 20).hex('#308014'),
+    lawngreen: new Color(124, 252, 0).hex('#7CFC00'),
+    chartreuse_1: new Color(127, 255, 0).hex('#7FFF00'), //(chartreuse)
+    chartreuse_2: new Color(118, 238, 0).hex('#76EE00'),
+    chartreuse_3: new Color(102, 205, 0).hex('#66CD00'),
+    chartreuse_4: new Color(69, 139, 0).hex('#458B00'),
+    greenyellow: new Color(173, 255, 47).hex('#ADFF2F'),
+    darkolivegreen_1: new Color(202, 255, 112).hex('#CAFF70'),
+    darkolivegreen_2: new Color(188, 238, 104).hex('#BCEE68'),
+    darkolivegreen_3: new Color(162, 205, 90).hex('#A2CD5A'),
+    darkolivegreen_4: new Color(110, 139, 61).hex('#6E8B3D'),
+    darkolivegreen: new Color(85, 107, 47).hex('#556B2F'),
+    olivedrab: new Color(107, 142, 35).hex('#6B8E23'),
+    olivedrab_1: new Color(192, 255, 62).hex('#C0FF3E'),
+    olivedrab_2: new Color(179, 238, 58).hex('#B3EE3A'),
+    olivedrab_3: new Color(154, 205, 50).hex('#9ACD32'), //(yellowgreen)
+    olivedrab_4: new Color(105, 139, 34).hex('#698B22'),
+    ivory_1: new Color(255, 255, 240).hex('#FFFFF0'), //(ivory)
+    ivory_2: new Color(238, 238, 224).hex('#EEEEE0'),
+    ivory_3: new Color(205, 205, 193).hex('#CDCDC1'),
+    ivory_4: new Color(139, 139, 131).hex('#8B8B83'),
+    beige: new Color(245, 245, 220).hex('#F5F5DC'),
+    lightyellow_1: new Color(255, 255, 224).hex('#FFFFE0'), //(lightyellow)
+    lightyellow_2: new Color(238, 238, 209).hex('#EEEED1'),
+    lightyellow_3: new Color(205, 205, 180).hex('#CDCDB4'),
+    lightyellow_4: new Color(139, 139, 122).hex('#8B8B7A'),
+    lightgoldenrodyellow: new Color(250, 250, 210).hex('#FAFAD2'),
+    yellow_1: new Color(255, 255, 0).hex('#FFFF00'), //(yellow*)
+    yellow_2: new Color(238, 238, 0).hex('#EEEE00'),
+    yellow_3: new Color(205, 205, 0).hex('#CDCD00'),
+    yellow_4: new Color(139, 139, 0).hex('#8B8B00'),
+    warmgrey: new Color(128, 128, 105).hex('#808069'),
+    olive: new Color(128, 128, 0).hex('#808000'),
+    darkkhaki: new Color(189, 183, 107).hex('#BDB76B'),
+    khaki_1: new Color(255, 246, 143).hex('#FFF68F'),
+    khaki_2: new Color(238, 230, 133).hex('#EEE685'),
+    khaki_3: new Color(205, 198, 115).hex('#CDC673'),
+    khaki_4: new Color(139, 134, 78).hex('#8B864E'),
+    khaki: new Color(240, 230, 140).hex('#F0E68C'),
+    palegoldenrod: new Color(238, 232, 170).hex('#EEE8AA'),
+    lemonchiffon_1: new Color(255, 250, 205).hex('#FFFACD'), //(lemonchiffon)
+    lemonchiffon_2: new Color(238, 233, 191).hex('#EEE9BF'),
+    lemonchiffon_3: new Color(205, 201, 165).hex('#CDC9A5'),
+    lemonchiffon_4: new Color(139, 137, 112).hex('#8B8970'),
+    lightgoldenrod_1: new Color(255, 236, 139).hex('#FFEC8B'),
+    lightgoldenrod_2: new Color(238, 220, 130).hex('#EEDC82'),
+    lightgoldenrod_3: new Color(205, 190, 112).hex('#CDBE70'),
+    lightgoldenrod_4: new Color(139, 129, 76).hex('#8B814C'),
+    banana: new Color(227, 207, 87).hex('#E3CF57'),
+    gold_1: new Color(255, 215, 0).hex('#FFD700'), //(gold)
+    gold_2: new Color(238, 201, 0).hex('#EEC900'),
+    gold_3: new Color(205, 173, 0).hex('#CDAD00'),
+    gold_4: new Color(139, 117, 0).hex('#8B7500'),
+    cornsilk_1: new Color(255, 248, 220).hex('#FFF8DC'), //(cornsilk)
+    cornsilk_2: new Color(238, 232, 205).hex('#EEE8CD'),
+    cornsilk_3: new Color(205, 200, 177).hex('#CDC8B1'),
+    cornsilk_4: new Color(139, 136, 120).hex('#8B8878'),
+    goldenrod: new Color(218, 165, 32).hex('#DAA520'),
+    goldenrod_1: new Color(255, 193, 37).hex('#FFC125'),
+    goldenrod_2: new Color(238, 180, 34).hex('#EEB422'),
+    goldenrod_3: new Color(205, 155, 29).hex('#CD9B1D'),
+    goldenrod_4: new Color(139, 105, 20).hex('#8B6914'),
+    darkgoldenrod: new Color(184, 134, 11).hex('#B8860B'),
+    darkgoldenrod_1: new Color(255, 185, 15).hex('#FFB90F'),
+    darkgoldenrod_2: new Color(238, 173, 14).hex('#EEAD0E'),
+    darkgoldenrod_3: new Color(205, 149, 12).hex('#CD950C'),
+    darkgoldenrod_4: new Color(139, 101, 8).hex('#8B6508'),
+    orange_1: new Color(255, 165, 0).hex('#FFA500'), //(orange)
+    orange_2: new Color(238, 154, 0).hex('#EE9A00'),
+    orange_3: new Color(205, 133, 0).hex('#CD8500'),
+    orange_4: new Color(139, 90, 0).hex('#8B5A00'),
+    floralwhite: new Color(255, 250, 240).hex('#FFFAF0'),
+    oldlace: new Color(253, 245, 230).hex('#FDF5E6'),
+    wheat: new Color(245, 222, 179).hex('#F5DEB3'),
+    wheat_1: new Color(255, 231, 186).hex('#FFE7BA'),
+    wheat_2: new Color(238, 216, 174).hex('#EED8AE'),
+    wheat_3: new Color(205, 186, 150).hex('#CDBA96'),
+    wheat_4: new Color(139, 126, 102).hex('#8B7E66'),
+    moccasin: new Color(255, 228, 181).hex('#FFE4B5'),
+    papayawhip: new Color(255, 239, 213).hex('#FFEFD5'),
+    blanchedalmond: new Color(255, 235, 205).hex('#FFEBCD'),
+    navajowhite_1: new Color(255, 222, 173).hex('#FFDEAD'), //(navajowhite)
+    navajowhite_2: new Color(238, 207, 161).hex('#EECFA1'),
+    navajowhite_3: new Color(205, 179, 139).hex('#CDB38B'),
+    navajowhite_4: new Color(139, 121, 94).hex('#8B795E'),
+    eggshell: new Color(252, 230, 201).hex('#FCE6C9'),
+    tan: new Color(210, 180, 140).hex('#D2B48C'),
+    brick: new Color(156, 102, 31).hex('#9C661F'),
+    cadmiumyellow: new Color(255, 153, 18).hex('#FF9912'),
+    antiquewhite: new Color(250, 235, 215).hex('#FAEBD7'),
+    antiquewhite_1: new Color(255, 239, 219).hex('#FFEFDB'),
+    antiquewhite_2: new Color(238, 223, 204).hex('#EEDFCC'),
+    antiquewhite_3: new Color(205, 192, 176).hex('#CDC0B0'),
+    antiquewhite_4: new Color(139, 131, 120).hex('#8B8378'),
+    burlywood: new Color(222, 184, 135).hex('#DEB887'),
+    burlywood_1: new Color(255, 211, 155).hex('#FFD39B'),
+    burlywood_2: new Color(238, 197, 145).hex('#EEC591'),
+    burlywood_3: new Color(205, 170, 125).hex('#CDAA7D'),
+    burlywood_4: new Color(139, 115, 85).hex('#8B7355'),
+    bisque_1: new Color(255, 228, 196).hex('#FFE4C4'), //(bisque)
+    bisque_2: new Color(238, 213, 183).hex('#EED5B7'),
+    bisque_3: new Color(205, 183, 158).hex('#CDB79E'),
+    bisque_4: new Color(139, 125, 107).hex('#8B7D6B'),
+    melon: new Color(227, 168, 105).hex('#E3A869'),
+    carrot: new Color(237, 145, 33).hex('#ED9121'),
+    darkorange: new Color(255, 140, 0).hex('#FF8C00'),
+    darkorange_1: new Color(255, 127, 0).hex('#FF7F00'),
+    darkorange_2: new Color(238, 118, 0).hex('#EE7600'),
+    darkorange_3: new Color(205, 102, 0).hex('#CD6600'),
+    darkorange_4: new Color(139, 69, 0).hex('#8B4500'),
+    orange: new Color(255, 128, 0).hex('#FF8000'),
+    tan_1: new Color(255, 165, 79).hex('#FFA54F'),
+    tan_2: new Color(238, 154, 73).hex('#EE9A49'),
+    tan_3: new Color(205, 133, 63).hex('#CD853F'), //(peru)
+    tan_4: new Color(139, 90, 43).hex('#8B5A2B'),
+    linen: new Color(250, 240, 230).hex('#FAF0E6'),
+    peachpuff_1: new Color(255, 218, 185).hex('#FFDAB9'), //(peachpuff)
+    peachpuff_2: new Color(238, 203, 173).hex('#EECBAD'),
+    peachpuff_3: new Color(205, 175, 149).hex('#CDAF95'),
+    peachpuff_4: new Color(139, 119, 101).hex('#8B7765'),
+    seashell_1: new Color(255, 245, 238).hex('#FFF5EE'), //(seashell)
+    seashell_2: new Color(238, 229, 222).hex('#EEE5DE'),
+    seashell_3: new Color(205, 197, 191).hex('#CDC5BF'),
+    seashell_4: new Color(139, 134, 130).hex('#8B8682'),
+    sandybrown: new Color(244, 164, 96).hex('#F4A460'),
+    rawsienna: new Color(199, 97, 20).hex('#C76114'),
+    chocolate: new Color(210, 105, 30).hex('#D2691E'),
+    chocolate_1: new Color(255, 127, 36).hex('#FF7F24'),
+    chocolate_2: new Color(238, 118, 33).hex('#EE7621'),
+    chocolate_3: new Color(205, 102, 29).hex('#CD661D'),
+    chocolate_4: new Color(139, 69, 19).hex('#8B4513'), //(saddlebrown)
+    ivoryblack: new Color(41, 36, 33).hex('#292421'),
+    flesh: new Color(255, 125, 64).hex('#FF7D40'),
+    cadmiumorange: new Color(255, 97, 3).hex('#FF6103'),
+    burntsienna: new Color(138, 54, 15).hex('#8A360F'),
+    sienna: new Color(160, 82, 45).hex('#A0522D'),
+    sienna_1: new Color(255, 130, 71).hex('#FF8247'),
+    sienna_2: new Color(238, 121, 66).hex('#EE7942'),
+    sienna_3: new Color(205, 104, 57).hex('#CD6839'),
+    sienna_4: new Color(139, 71, 38).hex('#8B4726'),
+    lightsalmon_1: new Color(255, 160, 122).hex('#FFA07A'), //(lightsalmon)
+    lightsalmon_2: new Color(238, 149, 114).hex('#EE9572'),
+    lightsalmon_3: new Color(205, 129, 98).hex('#CD8162'),
+    lightsalmon_4: new Color(139, 87, 66).hex('#8B5742'),
+    coral: new Color(255, 127, 80).hex('#FF7F50'),
+    orangered_1: new Color(255, 69, 0).hex('#FF4500'), //(orangered)
+    orangered_2: new Color(238, 64, 0).hex('#EE4000'),
+    orangered_3: new Color(205, 55, 0).hex('#CD3700'),
+    orangered_4: new Color(139, 37, 0).hex('#8B2500'),
+    sepia: new Color(94, 38, 18).hex('#5E2612'),
+    darksalmon: new Color(233, 150, 122).hex('#E9967A'),
+    salmon_1: new Color(255, 140, 105).hex('#FF8C69'),
+    salmon_2: new Color(238, 130, 98).hex('#EE8262'),
+    salmon_3: new Color(205, 112, 84).hex('#CD7054'),
+    salmon_4: new Color(139, 76, 57).hex('#8B4C39'),
+    coral_1: new Color(255, 114, 86).hex('#FF7256'),
+    coral_2: new Color(238, 106, 80).hex('#EE6A50'),
+    coral_3: new Color(205, 91, 69).hex('#CD5B45'),
+    coral_4: new Color(139, 62, 47).hex('#8B3E2F'),
+    burntumber: new Color(138, 51, 36).hex('#8A3324'),
+    tomato_1: new Color(255, 99, 71).hex('#FF6347'), //(tomato)
+    tomato_2: new Color(238, 92, 66).hex('#EE5C42'),
+    tomato_3: new Color(205, 79, 57).hex('#CD4F39'),
+    tomato_4: new Color(139, 54, 38).hex('#8B3626'),
+    salmon: new Color(250, 128, 114).hex('#FA8072'),
+    mistyrose_1: new Color(255, 228, 225).hex('#FFE4E1'), //(mistyrose)
+    mistyrose_2: new Color(238, 213, 210).hex('#EED5D2'),
+    mistyrose_3: new Color(205, 183, 181).hex('#CDB7B5'),
+    mistyrose_4: new Color(139, 125, 123).hex('#8B7D7B'),
+    snow_1: new Color(255, 250, 250).hex('#FFFAFA'), //(snow)
+    snow_2: new Color(238, 233, 233).hex('#EEE9E9'),
+    snow_3: new Color(205, 201, 201).hex('#CDC9C9'),
+    snow_4: new Color(139, 137, 137).hex('#8B8989'),
+    rosybrown: new Color(188, 143, 143).hex('#BC8F8F'),
+    rosybrown_1: new Color(255, 193, 193).hex('#FFC1C1'),
+    rosybrown_2: new Color(238, 180, 180).hex('#EEB4B4'),
+    rosybrown_3: new Color(205, 155, 155).hex('#CD9B9B'),
+    rosybrown_4: new Color(139, 105, 105).hex('#8B6969'),
+    lightcoral: new Color(240, 128, 128).hex('#F08080'),
+    indianred: new Color(205, 92, 92).hex('#CD5C5C'),
+    indianred_1: new Color(255, 106, 106).hex('#FF6A6A'),
+    indianred_2: new Color(238, 99, 99).hex('#EE6363'),
+    indianred_4: new Color(139, 58, 58).hex('#8B3A3A'),
+    indianred_3: new Color(205, 85, 85).hex('#CD5555'),
+    brown: new Color(165, 42, 42).hex('#A52A2A'),
+    brown_1: new Color(255, 64, 64).hex('#FF4040'),
+    brown_2: new Color(238, 59, 59).hex('#EE3B3B'),
+    brown_3: new Color(205, 51, 51).hex('#CD3333'),
+    brown_4: new Color(139, 35, 35).hex('#8B2323'),
+    firebrick: new Color(178, 34, 34).hex('#B22222'),
+    firebrick_1: new Color(255, 48, 48).hex('#FF3030'),
+    firebrick_2: new Color(238, 44, 44).hex('#EE2C2C'),
+    firebrick_3: new Color(205, 38, 38).hex('#CD2626'),
+    firebrick_4: new Color(139, 26, 26).hex('#8B1A1A'),
+    red_1: new Color(255, 0, 0).hex('#FF0000'), //(red*)
+    red_2: new Color(238, 0, 0).hex('#EE0000'),
+    red_3: new Color(205, 0, 0).hex('#CD0000'),
+    red_4: new Color(139, 0, 0).hex('#8B0000'), //(darkred)
+    maroon: new Color(128, 0, 0).hex('#800000'),
+    sgi_beet: new Color(142, 56, 142).hex('#8E388E'),
+    sgi_slateblue: new Color(113, 113, 198).hex('#7171C6'),
+    sgi_lightblue: new Color(125, 158, 192).hex('#7D9EC0'),
+    sgi_teal: new Color(56, 142, 142).hex('#388E8E'),
+    sgi_chartreuse: new Color(113, 198, 113).hex('#71C671'),
+    sgi_olivedrab: new Color(142, 142, 56).hex('#8E8E38'),
+    sgi_brightgray: new Color(197, 193, 170).hex('#C5C1AA'),
+    sgi_salmon: new Color(198, 113, 113).hex('#C67171'),
+    sgi_darkgray: new Color(85, 85, 85).hex('#555555'),
+    sgi_gray_12: new Color(30, 30, 30).hex('#1E1E1E'),
+    sgi_gray_16: new Color(40, 40, 40).hex('#282828'),
+    sgi_gray_32: new Color(81, 81, 81).hex('#515151'),
+    sgi_gray_36: new Color(91, 91, 91).hex('#5B5B5B'),
+    sgi_gray_52: new Color(132, 132, 132).hex('#848484'),
+    sgi_gray_56: new Color(142, 142, 142).hex('#8E8E8E'),
+    sgi_lightgray: new Color(170, 170, 170).hex('#AAAAAA'),
+    sgi_gray_72: new Color(183, 183, 183).hex('#B7B7B7'),
+    sgi_gray_76: new Color(193, 193, 193).hex('#C1C1C1'),
+    sgi_gray_92: new Color(234, 234, 234).hex('#EAEAEA'),
+    sgi_gray_96: new Color(244, 244, 244).hex('#F4F4F4'),
+    white: new Color(255, 255, 255).hex('#FFFFFF'),
+    white_smoke: new Color(245, 245, 245).hex('#F5F5F5'), // (gray 96)
+    gainsboro: new Color(220, 220, 220).hex('#DCDCDC'),
+    lightgrey: new Color(211, 211, 211).hex('#D3D3D3'),
+    silver: new Color(192, 192, 192).hex('#C0C0C0'),
+    darkgray: new Color(169, 169, 169).hex('#A9A9A9'),
+    gray: new Color(128, 128, 128).hex('#808080'),
+    dimgray: new Color(105, 105, 105).hex('#696969'), // (gray 42)
+    black: new Color(0, 0, 0).hex('#000000'),
+    gray_99: new Color(252, 252, 252).hex('#FCFCFC'),
+    gray_98: new Color(250, 250, 250).hex('#FAFAFA'),
+    gray_97: new Color(247, 247, 247).hex('#F7F7F7'),
+    white_smoke: new Color(245, 245, 245).hex('#F5F5F5'), // (gray 96)
+    gray_95: new Color(242, 242, 242).hex('#F2F2F2'),
+    gray_94: new Color(240, 240, 240).hex('#F0F0F0'),
+    gray_93: new Color(237, 237, 237).hex('#EDEDED'),
+    gray_92: new Color(235, 235, 235).hex('#EBEBEB'),
+    gray_91: new Color(232, 232, 232).hex('#E8E8E8'),
+    gray_90: new Color(229, 229, 229).hex('#E5E5E5'),
+    gray_89: new Color(227, 227, 227).hex('#E3E3E3'),
+    gray_88: new Color(224, 224, 224).hex('#E0E0E0'),
+    gray_87: new Color(222, 222, 222).hex('#DEDEDE'),
+    gray_86: new Color(219, 219, 219).hex('#DBDBDB'),
+    gray_85: new Color(217, 217, 217).hex('#D9D9D9'),
+    gray_84: new Color(214, 214, 214).hex('#D6D6D6'),
+    gray_83: new Color(212, 212, 212).hex('#D4D4D4'),
+    gray_82: new Color(209, 209, 209).hex('#D1D1D1'),
+    gray_81: new Color(207, 207, 207).hex('#CFCFCF'),
+    gray_80: new Color(204, 204, 204).hex('#CCCCCC'),
+    gray_79: new Color(201, 201, 201).hex('#C9C9C9'),
+    gray_78: new Color(199, 199, 199).hex('#C7C7C7'),
+    gray_77: new Color(196, 196, 196).hex('#C4C4C4'),
+    gray_76: new Color(194, 194, 194).hex('#C2C2C2'),
+    gray_75: new Color(191, 191, 191).hex('#BFBFBF'),
+    gray_74: new Color(189, 189, 189).hex('#BDBDBD'),
+    gray_73: new Color(186, 186, 186).hex('#BABABA'),
+    gray_72: new Color(184, 184, 184).hex('#B8B8B8'),
+    gray_71: new Color(181, 181, 181).hex('#B5B5B5'),
+    gray_70: new Color(179, 179, 179).hex('#B3B3B3'),
+    gray_69: new Color(176, 176, 176).hex('#B0B0B0'),
+    gray_68: new Color(173, 173, 173).hex('#ADADAD'),
+    gray_67: new Color(171, 171, 171).hex('#ABABAB'),
+    gray_66: new Color(168, 168, 168).hex('#A8A8A8'),
+    gray_65: new Color(166, 166, 166).hex('#A6A6A6'),
+    gray_64: new Color(163, 163, 163).hex('#A3A3A3'),
+    gray_63: new Color(161, 161, 161).hex('#A1A1A1'),
+    gray_62: new Color(158, 158, 158).hex('#9E9E9E'),
+    gray_61: new Color(156, 156, 156).hex('#9C9C9C'),
+    gray_60: new Color(153, 153, 153).hex('#999999'),
+    gray_59: new Color(150, 150, 150).hex('#969696'),
+    gray_58: new Color(148, 148, 148).hex('#949494'),
+    gray_57: new Color(145, 145, 145).hex('#919191'),
+    gray_56: new Color(143, 143, 143).hex('#8F8F8F'),
+    gray_55: new Color(140, 140, 140).hex('#8C8C8C'),
+    gray_54: new Color(138, 138, 138).hex('#8A8A8A'),
+    gray_53: new Color(135, 135, 135).hex('#878787'),
+    gray_52: new Color(133, 133, 133).hex('#858585'),
+    gray_51: new Color(130, 130, 130).hex('#828282'),
+    gray_50: new Color(127, 127, 127).hex('#7F7F7F'),
+    gray_49: new Color(125, 125, 125).hex('#7D7D7D'),
+    gray_48: new Color(122, 122, 122).hex('#7A7A7A'),
+    gray_47: new Color(120, 120, 120).hex('#787878'),
+    gray_46: new Color(117, 117, 117).hex('#757575'),
+    gray_45: new Color(115, 115, 115).hex('#737373'),
+    gray_44: new Color(112, 112, 112).hex('#707070'),
+    gray_43: new Color(110, 110, 110).hex('#6E6E6E'),
+    gray_42: new Color(107, 107, 107).hex('#6B6B6B'),
+    dimgray: new Color(105, 105, 105).hex('#696969'), // (gray 42)
+    gray_40: new Color(102, 102, 102).hex('#666666'),
+    gray_39: new Color(99, 99, 99).hex('#636363'),
+    gray_38: new Color(97, 97, 97).hex('#616161'),
+    gray_37: new Color(94, 94, 94).hex('#5E5E5E'),
+    gray_36: new Color(92, 92, 92).hex('#5C5C5C'),
+    gray_35: new Color(89, 89, 89).hex('#595959'),
+    gray_34: new Color(87, 87, 87).hex('#575757'),
+    gray_33: new Color(84, 84, 84).hex('#545454'),
+    gray_32: new Color(82, 82, 82).hex('#525252'),
+    gray_31: new Color(79, 79, 79).hex('#4F4F4F'),
+    gray_30: new Color(77, 77, 77).hex('#4D4D4D'),
+    gray_29: new Color(74, 74, 74).hex('#4A4A4A'),
+    gray_28: new Color(71, 71, 71).hex('#474747'),
+    gray_27: new Color(69, 69, 69).hex('#454545'),
+    gray_26: new Color(66, 66, 66).hex('#424242'),
+    gray_25: new Color(64, 64, 64).hex('#404040'),
+    gray_24: new Color(61, 61, 61).hex('#3D3D3D'),
+    gray_23: new Color(59, 59, 59).hex('#3B3B3B'),
+    gray_22: new Color(56, 56, 56).hex('#383838'),
+    gray_21: new Color(54, 54, 54).hex('#363636'),
+    gray_20: new Color(51, 51, 51).hex('#333333'),
+    gray_19: new Color(48, 48, 48).hex('#303030'),
+    gray_18: new Color(46, 46, 46).hex('#2E2E2E'),
+    gray_17: new Color(43, 43, 43).hex('#2B2B2B'),
+    gray_16: new Color(41, 41, 41).hex('#292929'),
+    gray_15: new Color(38, 38, 38).hex('#262626'),
+    gray_14: new Color(36, 36, 36).hex('#242424'),
+    gray_13: new Color(33, 33, 33).hex('#212121'),
+    gray_12: new Color(31, 31, 31).hex('#1F1F1F'),
+    gray_11: new Color(28, 28, 28).hex('#1C1C1C'),
+    gray_10: new Color(26, 26, 26).hex('#1A1A1A'),
+    gray_9: new Color(23, 23, 23).hex('#171717'),
+    gray_8: new Color(20, 20, 20).hex('#141414'),
+    gray_7: new Color(18, 18, 18).hex('#121212'),
+    gray_6: new Color(15, 15, 15).hex('#0F0F0F'),
+    gray_5: new Color(13, 13, 13).hex('#0D0D0D'),
+    gray_4: new Color(10, 10, 10).hex('#0A0A0A'),
+    gray_3: new Color(8, 8, 8).hex('#080808'),
+    gray_2: new Color(5, 5, 5).hex('#050505'),
+    gray_1: new Color(3, 3, 3).hex('#030303')
+});

src/js/component.js

@@ -9,11 +9,11 @@ class Component {
 
     constructor(element, attr = {}) {
         this._modifier = new Modifier().margin(new Siding().all(0));
+        var akeys = Object.keys(attr);
+        for (let i = 0; i < akeys.length; i++) {
+            element.setAttribute(akeys[i], attr[akeys[i]]);
+        }
         this._element = element;
-        Object.keys(attr)
-            .forEach(key => {
-                this._element.setAttribute(key, attr[key]);
-            })
     }
 
     /**
@@ -111,18 +111,31 @@ class Component {
         return this._element;
     }
 
+
+    /**
+     * 
+     * @param {Component} component 
+     * @returns this component object
+     */
+    child(component) {
+        this._element.append(
+            (component instanceof Component
+                ?component
+                :component.backToComponent()
+            )
+            .generate()
+        );
+        return this;
+    }
+
     /**
      * 
-     * @param {Component|Array<Component>} innerComponent 
+     * @param {Array<Component>} innerComponent 
      * @returns this component object
      */
-    childContext(innerComponent) {
+    childComponents(innerComponent) {
-        if (innerComponent instanceof Array) {
+        for (let i = 0; i < innerComponent.length; i++) {
-            for (let i = 0; i < innerComponent.length; i++) {
+            this.child(innerComponent[i]);
-                this._element.append(innerComponent[i].generate());
-            }
-        } else {
-            this._element.append(innerComponent.generate());
         }
         return this;
     }
@@ -134,7 +147,15 @@ class Component {
      * @returns this component object
      */
     setEvent(commonEvent, functionName) {
-        return this.setAttribute(commonEvent, `${functionName}(this)`)
+        return this.setAttribute(commonEvent, `${functionName}(this)`);
+    }
+
+    /**
+     * 
+     * @returns {ChainableModifier} 
+     */
+    chainModifier() {
+        return new ChainableModifier(this);
     }
 
 }

src/js/componentAttribute.js

@@ -5,28 +5,6 @@ const CommonEvents = Object.freeze({
     ONCLICK: "onClick",
 })
 
-/**
- * A simple Color class for rgb set color values.
- */
-class Color {
-    #red;
-    #green;
-    #blue;
-
-    constructor(red, green, blue) {
-        this.#red = red
-        this.#green = green
-        this.#blue = blue
-    }
-
-    /**
-     * 
-     * @returns {string} an rgb object string
-     */
-    cssRGBString() {
-        return `rgb(${this.#red}, ${this.#green}, ${this.#blue})`;
-    }
-}
 
 /**
  * Simple Dimensions container for the height and width in pixels.
@@ -162,3 +140,73 @@ const Arrangement = Object.freeze({
     SPACE_EVENLY: 4,
     SPACE_AROUND: 5,
 })
+
+
+class ChainableDimensions extends Dimensions {
+    #modifier;
+    constructor(modifier) {
+        super();
+        this.#modifier = modifier;
+    }
+
+    backToModifier() {
+        return this.#modifier;
+    }
+
+    backToComponent() {
+        return this.#modifier.backToComponent();
+    }
+
+    componentChild(innerComponent) {
+        return this.#modifier.backToComponent()
+            .child(innerComponent);
+    }
+
+    componentChildComponents(innerComponent) {
+        return this.#modifier.backToComponent()
+            .childComponents(innerComponent);
+    }
+}
+
+class ChainableSiding extends Siding {
+    #modifier;
+    constructor(modifier) {
+        super();
+        this.#modifier = modifier;
+    }
+
+    backToModifier() {
+        return this.#modifier;
+    }
+
+    backToComponent() {
+        return this.#modifier.backToComponent();
+    }
+
+
+
+    componentChild(innerComponent) {
+        return this.#modifier
+            .backToComponent()
+            .child(innerComponent);
+    }
+
+    componentChildComponents(innerComponent) {
+        return this.#modifier
+            .backToComponent()
+            .childComponents(innerComponent);
+    }
+}
+
+const LineStyles = Object.freeze({
+    dotted: 0,
+    dashed: 1,
+    solid: 2,
+    double: 3,
+    groove: 4,
+    ridge: 5,
+    inset: 6,
+    outset: 7,
+    none: 8,
+    hidden: 9
+})

src/js/modifier.js

@@ -7,6 +7,7 @@ class Modifier {
     constructor() {
         this.modifications = new Object();
     }
+
     /**
      * Sets the modifications for widht and height to 100%. 
      * @returns this modifier object
@@ -19,19 +20,21 @@ class Modifier {
 
     /**
      * Sets the modification for width to 100%.
+     * @param {number} fraction 
      * @returns this modifier object
-     */
+    */
-    fillMaxWidth() {
+    fillMaxWidth(fraction) {
-        this.modifications["width"] = "100%";
+        this.modifications["width"] = (100 * fraction) + "%";
         return this;
     }
 
     /**
      * Sets the modification for height to 100%.
+     * @param {number} fraction 
      * @returns this modifier object
      */
-    fillMaxHeight() {
+    fillMaxHeight(fraction) {
-        this.modifications["height"] = "100%";
+        this.modifications["height"] = (100 * fraction) + "%";
         return this;
     }
 
@@ -125,4 +128,52 @@ class Modifier {
         return this;
     }
 
+    /**
+     * Sets a border line (with given linestyle) to all sides. 
+     * If lineStyle is an array, the containing LineStyles, 
+     * are applied in the order: [top, right, bottom, left].
+     * @param {LineStyles|Array<LineStyles>} lineStyle the style of the border line
+     * @returns this modifier object
+     */
+    border(lineStyle, width = 1, color = Colors.black) {
+        var lstyle = (lineStyle instanceof Array
+            ? lineStyle.join(" ")
+            : lineStyle);
+        this.modifications["border"] = `${width}px ${lstyle} ${color.cssRGBString}`;
+        return this;
+    }
+
+}
+
+class ChainableModifier extends Modifier {
+    _component;
+
+    constructor(component) {
+        super();
+        this._component = component;
+    }
+
+    backToComponent() {
+        return this._component.modifier(this);
+    }
+
+    chainSize() {
+        return new ChainableDimensions(this);
+    }
+
+    chainPaddingSiding() {
+        return new ChainableSiding(this);
+    }
+
+    componentChild(innerComponent) {
+        return this._component
+            .modifier(this)
+            .child(innerComponent);
+    }
+
+    componentChildComponents(innerComponent) {
+        return this._component
+            .modifier(this)
+            .childComponents(innerComponent);
+    }
 }