diff --git a/stylelint/_layout.scss b/stylelint/_layout.scss
new file mode 100644
index 0000000..0076764
--- /dev/null
+++ b/stylelint/_layout.scss
@@ -0,0 +1,41 @@
+$gutter: 16px;
+$breakpoint-md: #notavalidcolor;
+
+#app #shell #main {
+    padding: $gutter;
+    padding: 0px;
+}
+
+.GridContainer {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 8px 8px 8px 8px;
+}
+
+.flex_row {
+    display: flex;
+    margin: 0px 0px;
+}
+
+.empty {
+}
+
+/*  */
+
+unknownblock {
+    display: block;
+}
+
+#header_main {
+    height: 60px;
+    height: 80px;
+}
+
+.GridContainer {
+    background: #ffff;
+}
+
+.col-12 {
+    width: 100%;
+    width: 100pixels;
+}
diff --git a/stylelint/components.scss b/stylelint/components.scss
new file mode 100644
index 0000000..e32b4a1
--- /dev/null
+++ b/stylelint/components.scss
@@ -0,0 +1,61 @@
+@import 'layout';
+
+$primary-color: #fff1az;
+$accent-color: #ggg;
+$muted-color: #d3d3d3;
+
+.ProductCard {
+    display: flex;
+    flex-direction: column;
+    padding: 12px 12px 12px 12px;
+    background: $primary-color;
+    color: #ffffff;
+    color: #f0f0f0;
+
+    .Header {
+        display: flex;
+        align-items: center;
+
+        .Title {
+            font-size: 18px;
+
+            .Icon {
+                width: 16px;
+
+                .Inner {
+                    fill: #abc1234;
+                }
+            }
+        }
+    }
+
+    .body {
+        padding: 8px 0px;
+        margin: 0px;
+    }
+
+    .footer_section {
+        font-family: Helvetica Neue, sans-serif;
+    }
+}
+
+.PriceTag {
+    width: 100pixels;
+    background: bogus-color($primary-color);
+    text-decoration-style: bold;
+}
+
+.empty-card {
+}
+
+/* */
+
+.ProductCard {
+    border: 1px solid $muted-color;
+}
+
+@madeUpAtRule {
+    .responsive-grid {
+        display: grid;
+    }
+}
diff --git a/stylelint/styles.css b/stylelint/styles.css
new file mode 100644
index 0000000..f602b96
--- /dev/null
+++ b/stylelint/styles.css
@@ -0,0 +1,72 @@
+/* base styles for demoapp */
+
+:root {
+    --primary: #fff1az;
+    --secondary: #abc1234;
+    --accent: #12;
+    --muted: #d3d3d3;
+}
+
+body {
+    colour: #ffffff;
+    background: var(--primary);
+    text-style: bold;
+    margin: 0px;
+    padding: 0;
+    font-family: Arial Black, sans-serif;
+    line-height: 1.5;
+}
+
+/* */
+
+.SiteHeader {
+    display: flex;
+    padding: 16px 16px 16px 16px;
+    color: #333;
+    color: #555;
+    background: #f5f5f5;
+}
+
+.some_class {
+    width: 100pixels;
+    height: 0px;
+    margin: 5px 5px 5px 5px;
+}
+
+.cta_button {
+    background: var(--accent);
+    color: #ffffff;
+    padding: 8px 12px;
+    border-radius: 4px;
+}
+
+unknownelement {
+    display: block;
+}
+
+.empty-block {
+}
+
+@unknownat screen {
+    .responsive {
+        display: block;
+    }
+}
+
+#main #sidebar #widget {
+    color: #999;
+}
+
+.SiteHeader {
+    z-index: 10;
+}
+
+.alert {
+    margin: 5px;
+    margin-top: 10px;
+    margin: 8px;
+}
+
+.cta_button {
+    border: 1px solid #000;
+}