diff --git a/ui_framework/doc_site/build/index.html b/ui_framework/doc_site/build/index.html
index 3717c95289f77c..aed4fcf3ba4e3a 100644
--- a/ui_framework/doc_site/build/index.html
+++ b/ui_framework/doc_site/build/index.html
@@ -6,7 +6,7 @@
-
+
diff --git a/ui_framework/doc_site/src/components/guide/_guide.scss b/ui_framework/doc_site/src/components/guide/_guide.scss
new file mode 100644
index 00000000000000..4896edda8b9e3a
--- /dev/null
+++ b/ui_framework/doc_site/src/components/guide/_guide.scss
@@ -0,0 +1,99 @@
+.guideBody {
+ height: 100%;
+ background-color: #000000;
+ margin: 0;
+ min-width: $guideMinWidth;
+}
+
+/**
+ * 1. Expand container to fit the page if the content is shorter than the page, or expand with the
+ * content if it's taller than the page.
+ */
+.guide {
+ display: flex;
+ min-height: 100%; /* 1 */
+}
+
+.guideContent {
+ display: flex;
+ flex-direction: column;
+ flex: 1 1 auto;
+ padding-top: $guideNavHeight;
+ background-color: $guideBaseBackgroundColor;
+ transition:
+ padding-right $guideCodeViewerTransition,
+ opacity $guideCodeViewerTransition;
+
+ &.is-code-viewer-open {
+ padding-right: $guideCodeViewerWidth;
+
+ @include whenNarrowerThan($guideNormalBreakpoint) {
+ padding-right: $guideCodeViewerSmallWidth;
+ }
+ }
+
+ .is-guide-nav-open + & {
+ opacity: 0.7;
+ }
+}
+
+@media only screen and (max-width: 1300px) {
+ .guideHomePage {
+ justify-content: flex-start !important;
+
+ .guideContentPage__content {
+ margin-left: 250px;
+ }
+ }
+}
+
+.guideContentPage {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ flex: 1 0 auto;
+ background-color: #ffffff;
+}
+
+ .guideContentPage__hint {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ max-width: 260px;
+ max-height: 500px;
+ padding: 30px;
+ margin: 20px;
+ border-radius: 4px;
+ background-color: #e8e8e8;
+ line-height: $guideLineHeight;
+ }
+
+ .guideContentPage__content {
+ width: 100%;
+ max-width: 800px;
+ padding: 30px 60px;
+ }
+
+.guideHintArrow {
+ position: absolute;
+ top: -15px;
+ left: 12px;
+ background-image: url("images/hint-arrow.svg");
+ width: 26px;
+ height: 40px;
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+
+.guideWarning {
+ border-left: 5px solid #e8488b;
+ margin-top: 19px;
+ padding: 0 14px;
+ line-height: 21px;
+ color: #e8488b;
+}
+
+.guideBreak {
+ border: none;
+}
diff --git a/ui_framework/doc_site/src/components/guide_components.scss b/ui_framework/doc_site/src/components/guide_components.scss
index 816241a05f5fab..848ed12549e47d 100644
--- a/ui_framework/doc_site/src/components/guide_components.scss
+++ b/ui_framework/doc_site/src/components/guide_components.scss
@@ -1,5 +1,54 @@
$guideVerticalRhythm: 20px;
+$guideLineHeight: 24px;
+$guideNavHeight: 60px;
+$guideSideNavWidth: 400px;
+$guideSideNavSmallWidth: 220px;
+$guideCodeViewerWidth: 660px;
+$guideCodeViewerSmallWidth: 520px;
+$guideCodeViewerTransition: 0.2s ease;
+// Colors
+$guideBaseBackgroundColor: #f7f7f7;
+$guidePanelBackgroundColor: #ffffff;
+$guideTextColor: #444;
+$guideLinkColor: #00a9e5;
+$guideLinkHoverColor: #00a9e5;
+
+// Breakpoints
+$guideMinWidth: 840px;
+$guideNormalBreakpoint: 1900px;
+
+@mixin whenNarrowerThan($browserWidth) {
+ @media only screen and (max-width: #{$browserWidth}) {
+ @content;
+ }
+}
+
+@mixin whenWiderThan($browserWidth) {
+ @media only screen and (min-width: #{$browserWidth}) {
+ @content;
+ }
+}
+
+@mixin scrollbar($color: rgba(#454D58, 0.4)) {
+ &::-webkit-scrollbar {
+ width: 16px;
+ height: 16px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: $color;
+ border: 6px solid transparent;
+ background-clip: content-box;
+ }
+
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
+}
+
+
+@import "guide/guide";
@import "guide_code/guide_code";
@import "guide_code_viewer/guide_code_viewer";
@import "guide_demo/guide_demo";
diff --git a/ui_framework/doc_site/src/main.scss b/ui_framework/doc_site/src/main.scss
index c16ec56e78238f..f1707487acfbf0 100644
--- a/ui_framework/doc_site/src/main.scss
+++ b/ui_framework/doc_site/src/main.scss
@@ -1,116 +1,2 @@
@import "../../dist/ui_framework.css";
-@import "./variables";
@import "./components/guide_components";
-
-* {
- box-sizing: border-box;
-}
-
-html,
-body {
- height: 100%;
-}
-
-/**
- * 1. Insane line-height makes it easier to notice when components are relying
- * on styles inherited from body.
- */
-body {
- background-color: #000000;
- line-height: 40px; /* 1 */
- margin: 0;
- min-width: $guideMinWidth;
-}
-
-/**
- * 1. Expand container to fit the page if the content is shorter than the page, or expand with the
- * content if it's taller than the page.
- */
-.guide {
- display: flex;
- min-height: 100%; /* 1 */
-}
-
-.guideContent {
- display: flex;
- flex-direction: column;
- flex: 1 1 auto;
- padding-top: $guideNavHeight;
- background-color: $guideBaseBackgroundColor;
- transition:
- padding-right $guideCodeViewerTransition,
- opacity $guideCodeViewerTransition;
-
- &.is-code-viewer-open {
- padding-right: $guideCodeViewerWidth;
-
- @include whenNarrowerThan($guideNormalBreakpoint) {
- padding-right: $guideCodeViewerSmallWidth;
- }
- }
-
- .is-guide-nav-open + & {
- opacity: 0.7;
- }
-}
-
-@media only screen and (max-width: 1300px) {
- .guideHomePage {
- justify-content: flex-start !important;
-
- .guideContentPage__content {
- margin-left: 250px;
- }
- }
-}
-
-.guideContentPage {
- position: relative;
- display: flex;
- justify-content: center;
- flex: 1 0 auto;
- background-color: #ffffff;
-}
-
- .guideContentPage__hint {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- max-width: 260px;
- max-height: 500px;
- padding: 30px;
- margin: 20px;
- border-radius: 4px;
- background-color: #e8e8e8;
- line-height: $guideLineHeight;
- }
-
- .guideContentPage__content {
- width: 100%;
- max-width: 800px;
- padding: 30px 60px;
- }
-
-.guideHintArrow {
- position: absolute;
- top: -15px;
- left: 12px;
- background-image: url("images/hint-arrow.svg");
- width: 26px;
- height: 40px;
- background-repeat: no-repeat;
- background-size: contain;
-}
-
-.guideWarning {
- border-left: 5px solid #e8488b;
- margin-top: 19px;
- padding: 0 14px;
- line-height: 21px;
- color: #e8488b;
-}
-
-.guideBreak {
- border: none;
-}
diff --git a/ui_framework/doc_site/src/variables.scss b/ui_framework/doc_site/src/variables.scss
deleted file mode 100644
index cbeac0fcfadcad..00000000000000
--- a/ui_framework/doc_site/src/variables.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-$guideLineHeight: 24px;
-$guideNavHeight: 60px;
-$guideSideNavWidth: 400px;
-$guideSideNavSmallWidth: 220px;
-$guideCodeViewerWidth: 660px;
-$guideCodeViewerSmallWidth: 520px;
-$guideCodeViewerTransition: 0.2s ease;
-
-// Colors
-$guideBaseBackgroundColor: #f7f7f7;
-$guidePanelBackgroundColor: #ffffff;
-$guideTextColor: #444;
-$guideLinkColor: #00a9e5;
-$guideLinkHoverColor: #00a9e5;
-
-// Breakpoints
-$guideMinWidth: 840px;
-$guideNormalBreakpoint: 1900px;
-
-@mixin whenNarrowerThan($browserWidth) {
- @media only screen and (max-width: #{$browserWidth}) {
- @content;
- }
-}
-
-@mixin whenWiderThan($browserWidth) {
- @media only screen and (min-width: #{$browserWidth}) {
- @content;
- }
-}
-
-@mixin scrollbar($color: rgba(#454D58, 0.4)) {
- &::-webkit-scrollbar {
- width: 16px;
- height: 16px;
- }
-
- &::-webkit-scrollbar-thumb {
- background-color: $color;
- border: 6px solid transparent;
- background-clip: content-box;
- }
-
- &::-webkit-scrollbar-track {
- background-color: transparent;
- }
-}