Created application layout skeleton.

src/components/ColorPicker/ColorPicker.module.css

@@ -0,0 +1,36 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.pickerSquare {
+  flex: 1;
+}
+
+.pickerBar {
+  flex: 1;
+}
+
+/* Large - Landscape Tablets / Desktops */
+/* Medium - Portrait Tablets */
+/* Horizontal layout, vertically scrolling picker and palette content */
+@media (min-width: 992px),
+  (min-width: 568px) and (max-width: 991px) and (orientation: portrait) {
+}
+
+/* Medium - Landscape Phones */
+/* Horizontal layout, side menu, vertical tabbed picker */
+@media (min-width: 568px) and (max-width: 991px) and (orientation: landscape) {
+  .container {
+    flex-direction: row;
+  }
+}
+
+/* Small - Portrait Phones*/
+/* Vertical layout, side menu, horizontal tabbed picker */
+@media (max-width: 567px) {
+}

src/components/ColorPicker/ColorPicker.tsx

@@ -0,0 +1,12 @@
+import styles from "./ColorPicker.module.css";
+
+function ColorPicker() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.pickerSquare}>Square</div>
+      <div className={styles.pickerBar}>Bar</div>
+    </div>
+  );
+}
+
+export default ColorPicker;

src/components/ColorValues/ColorValues.module.css

@@ -0,0 +1,24 @@
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.valueItem {
+}
+
+/* Large - Landscape Tablets / Desktops */
+/* Medium - Portrait Tablets */
+/* Horizontal layout, vertically scrolling picker and palette content */
+@media (min-width: 992px),
+  (min-width: 568px) and (max-width: 991px) and (orientation: portrait) {
+}
+
+/* Medium - Landscape Phones */
+/* Horizontal layout, side menu, vertical tabbed picker */
+@media (min-width: 568px) and (max-width: 991px) and (orientation: landscape) {
+}
+
+/* Small - Portrait Phones*/
+/* Vertical layout, side menu, horizontal tabbed picker */
+@media (max-width: 567px) {
+}

src/components/ColorValues/ColorValues.tsx

@@ -0,0 +1,13 @@
+import styles from "./ColorValues.module.css";
+
+function ColorValues() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.valueItem}>RGB: 255, 0, 0</div>
+      <div className={styles.valueItem}>HEX: #FF0000</div>
+      <div className={styles.valueItem}>HSL: 0, 100%, 50%</div>
+    </div>
+  );
+}
+
+export default ColorValues;

src/components/Footer/Footer.module.css

@@ -0,0 +1,16 @@
+/* Large - Landscape Tablets / Desktops */
+/* Medium - Portrait Tablets */
+/* Horizontal layout, vertically scrolling picker and palette content */
+@media (min-width: 992px),
+  (min-width: 568px) and (max-width: 991px) and (orientation: portrait) {
+}
+
+/* Medium - Landscape Phones */
+/* Horizontal layout, side menu, vertical tabbed picker */
+@media (min-width: 568px) and (max-width: 991px) and (orientation: landscape) {
+}
+
+/* Small - Portrait Phones*/
+/* Vertical layout, side menu, horizontal tabbed picker */
+@media (max-width: 567px) {
+}

src/components/PaletteEditor/PaletteEditor.module.css

@@ -0,0 +1,16 @@
+/* Large - Landscape Tablets / Desktops */
+/* Medium - Portrait Tablets */
+/* Horizontal layout, vertically scrolling picker and palette content */
+@media (min-width: 992px),
+  (min-width: 568px) and (max-width: 991px) and (orientation: portrait) {
+}
+
+/* Medium - Landscape Phones */
+/* Horizontal layout, side menu, vertical tabbed picker */
+@media (min-width: 568px) and (max-width: 991px) and (orientation: landscape) {
+}
+
+/* Small - Portrait Phones*/
+/* Vertical layout, side menu, horizontal tabbed picker */
+@media (max-width: 567px) {
+}

src/components/PaletteLibrary/PaletteLibrary.module.css

@@ -0,0 +1,16 @@
+/* Large - Landscape Tablets / Desktops */
+/* Medium - Portrait Tablets */
+/* Horizontal layout, vertically scrolling picker and palette content */
+@media (min-width: 992px),
+  (min-width: 568px) and (max-width: 991px) and (orientation: portrait) {
+}
+
+/* Medium - Landscape Phones */
+/* Horizontal layout, side menu, vertical tabbed picker */
+@media (min-width: 568px) and (max-width: 991px) and (orientation: landscape) {
+}
+
+/* Small - Portrait Phones*/
+/* Vertical layout, side menu, horizontal tabbed picker */
+@media (max-width: 567px) {
+}