diff --git a/core/themes/bartik/bartik.info.yml b/core/themes/bartik/bartik.info.yml
index 22e62b4..f713aa3 100644
--- a/core/themes/bartik/bartik.info.yml
+++ b/core/themes/bartik/bartik.info.yml
@@ -8,7 +8,7 @@ core: 8.x
 libraries:
   - bartik/base
 ckeditor_stylesheets:
-  - css/ckeditor-iframe.css
+  - css/components/ckeditor-iframe.css
 regions:
   header: Header
   primary_menu: 'Primary menu'
diff --git a/core/themes/bartik/bartik.libraries.yml b/core/themes/bartik/bartik.libraries.yml
index 6866d6b..b6f400e 100644
--- a/core/themes/bartik/bartik.libraries.yml
+++ b/core/themes/bartik/bartik.libraries.yml
@@ -2,16 +2,54 @@ base:
   version: VERSION
   css:
     theme:
-      css/layout.css: {}
-      css/style.css: {}
-      css/colors.css: {}
+      # Base
+      css/base/elements.css: {} 
+      css/base/fonts.css: {}
+      # Layout
+      css/layout/layout.css: {}
+      # Components
+      css/components/admin.css: {}
+      css/components/block.css: {}
+      css/components/book.css: {}
+      css/components/breadcrumb.css: {}
+      css/components/buttons.css: {}
+      css/components/captions.css: {}
+      css/components/colors.css: {}
+      css/components/comments.css: {}
+      css/components/content.css: {}
+      css/components/dropbutton.css: {}
+      css/components/featured.css: {}
+      css/components/footer.css: {}
+      css/components/form.css: {}
+      css/components/header.css: {}
+      css/components/help.css: {}
+      css/components/highlighted.css: {}
+      css/components/list.css: {}
+      css/components/main.css: {}
+      css/components/messages.css: {}
+      css/components/password-field.css: {}
+      css/components/primary-menu.css: {}
+      css/components/search.css: {}
+      css/components/secondary-menu.css: {}
+      css/components/shortcut.css: {}
+      css/components/sidebar.css: {}
+      css/components/tabs.css: {}
+      css/components/table.css: {}
+      css/components/triptych.css: {}
+      css/components/user.css: {}
+      css/components/views.css: {}
+      # Layout
+      css/layout/layout.css: {}
+      # Media Queries
+      css/media.css: {}
+      # Print stylesheet
       css/print.css: { media: print }
 
 maintenance_page:
   version: VERSION
   css:
     theme:
-      css/maintenance-page.css: {}
+      css/theme/maintenance-page.css: {}
   dependencies:
     - system/maintenance
     - bartik/base
diff --git a/core/themes/bartik/color/color.inc b/core/themes/bartik/color/color.inc
index 251c0fc..d09fb5f 100644
--- a/core/themes/bartik/color/color.inc
+++ b/core/themes/bartik/color/color.inc
@@ -99,7 +99,7 @@
 
   // CSS files (excluding @import) to rewrite with new color scheme.
   'css' => array(
-    'css/colors.css',
+    'css/components/colors.css',
   ),
 
   // Files to copy.
diff --git a/core/themes/bartik/css/base/elements.css b/core/themes/bartik/css/base/elements.css
new file mode 100644
index 0000000..0150475
--- /dev/null
+++ b/core/themes/bartik/css/base/elements.css
@@ -0,0 +1,157 @@
+/* ---------- Overall Specifications ---------- */
+
+body {
+  line-height: 1.5;
+  font-size: 87.5%;
+  word-wrap: break-word;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+a {
+  text-decoration: none;
+  border-bottom: 1px dotted;
+}
+a:hover,
+a:active,
+a:focus,
+.link:hover,
+.link:active,
+.link:focus {
+  text-decoration: none;
+  border-bottom-style: solid;
+}
+.field-type-image a,
+h1 a,
+h2 a,
+[role*=banner] a,
+.feed-icon,
+.contextual-links a,
+.toolbar a {
+  border-bottom: none !important;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 1.0em 0 0.5em;
+  font-weight: inherit;
+}
+h1 {
+  font-size: 1.357em;
+  color: #000;
+}
+h2 {
+  font-size: 1.143em;
+}
+h3 {
+  font-size: 1.092em;
+}
+h4 {
+  font-size: 1.05em;
+}
+h5 {
+  font-size: 0.889em;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+h6 {
+  font-size: 0.67em;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+p {
+  margin: 0 0 1.2em;
+}
+del {
+  text-decoration: line-through;
+}
+
+code {
+  background-color: #f2f2f2;
+  background-color: rgba(40, 40, 0, 0.06);
+}
+pre code,
+pre kbd,
+pre samp,
+pre var,
+kbd kbd,
+kbd samp,
+code var {
+  font-size: 100%;
+  background-color: transparent;
+}
+pre code,
+pre samp,
+pre var {
+  padding: 0;
+}
+.description code {
+  font-size: 1em;
+}
+kbd {
+  background-color: #f2f2f2;
+  border: 1px outset #575757;
+  margin: 0 3px;
+  color: #666;
+  display: inline-block;
+  padding: 0 6px;
+  border-radius: 5px;
+}
+pre {
+  background-color: #f2f2f2;
+  background-color: rgba(40, 40, 0, 0.06);
+  margin: 10px 0;
+  overflow: hidden;
+  padding: 15px;
+  white-space: pre-wrap;
+}
+
+/* ------------------ Reset Styles ------------------ */
+
+blockquote {
+  background: #f7f7f7;
+  border-left: 1px solid #bbb;
+  font-style: italic;
+  margin: 1.5em 10px;
+  padding: 0.5em 10px;
+}
+[dir="rtl"] blockquote {
+  border-left: none;
+  border-right: 4px solid #afafaf;
+}
+blockquote:before {
+  color: #bbb;
+  content: "\201C";
+  font-size: 3em;
+  line-height: 0.1em;
+  margin-right: 0.2em;
+  vertical-align: -.4em;
+}
+[dir="rtl"] blockquote:before {
+  content: "\201D";
+}
+blockquote:after {
+  color: #bbb;
+  content: "\201D";
+  font-size: 3em;
+  line-height: 0.1em;
+  vertical-align: -.45em;
+}
+[dir="rtl"] blockquote:after {
+  content: "\201C";
+}
+blockquote > p:first-child {
+  display: inline;
+}
+a.feed-icon {
+  display: inline-block;
+  padding: 15px 0 0 0;
+}
+img {
+  max-width: 100%;
+  height: auto;
+  border: 0;
+}
diff --git a/core/themes/bartik/css/base/fonts.css b/core/themes/bartik/css/base/fonts.css
new file mode 100644
index 0000000..1c60524
--- /dev/null
+++ b/core/themes/bartik/css/base/fonts.css
@@ -0,0 +1,50 @@
+/* ------------------ Fonts ------------------ */
+
+body,
+#site-slogan,
+.site-slogan,
+#page .ui-widget,
+.comment-form label,
+.node-form label,
+.node-form .description {
+  font-family: Georgia, "Times New Roman", Times, serif;
+}
+#header,
+#footer-wrapper,
+.skip-link,
+ul.contextual-links,
+ul.links,
+ul.primary,
+.pager__items,
+div.field-type-taxonomy-term-reference,
+div.messages,
+.node__meta,
+p.comment-time,
+table,
+.breadcrumb,
+.link {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+input,
+textarea,
+select,
+.form-button,
+a.button,
+button {
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
+}
+
+/**
+ * The generic monospace font family is listed before Courier new to avoid a
+ * a bug in font-size rendering:
+ * http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing
+ */
+code,
+pre,
+kbd,
+samp,
+var {
+  padding: 0 0.4em;
+  font-size: 0.857em;
+  font-family: Menlo, Consolas, "Andale Mono", "Lucida Console", "Nimbus Mono L", "DejaVu Sans Mono", monospace, "Courier New";
+}
\ No newline at end of file
diff --git a/core/themes/bartik/css/components/admin.css b/core/themes/bartik/css/components/admin.css
new file mode 100644
index 0000000..9042767
--- /dev/null
+++ b/core/themes/bartik/css/components/admin.css
@@ -0,0 +1,54 @@
+/* ---------- Admin-specific Theming ---------- */
+.path-admin #content img {
+  margin-right: 15px; /* LTR */
+}
+.path-admin #content .simpletest-image img {
+  margin: 0;
+}
+.path-admin #admin-dblog img {
+  margin: 0 5px;
+}
+
+/* Block demo mode */
+.demo-block {
+  background: #ffff66;
+  border: 1px dotted #9f9e00;
+  color: #000;
+  font: 90% "Lucida Grande", "Lucida Sans Unicode", sans-serif;
+  margin: 5px;
+  padding: 5px;
+  text-align: center;
+  text-shadow: none;
+}
+#featured .demo-block {
+  font-size: 0.55em;
+}
+#header .demo-block {
+  width: 500px;
+}
+
+/* Configuration. */
+div.admin .right,
+div.admin .left {
+  width: 49%;
+  margin: 0;
+}
+div.admin-panel {
+  background: #fbfbfb;
+  border: 1px solid #ccc;
+  margin: 10px 0;
+  padding: 0 5px 5px;
+}
+div.admin-panel h3 {
+  margin: 16px 7px;
+}
+div.admin-panel dt {
+  border-top: 1px solid #ccc;
+  padding: 7px 0 0;
+}
+div.admin-panel dd {
+  margin: 0 0 10px;
+}
+div.admin-panel .description {
+  margin: 0 0 14px 7px;
+}
diff --git a/core/themes/bartik/css/components/block.css b/core/themes/bartik/css/components/block.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/book.css b/core/themes/bartik/css/components/book.css
new file mode 100644
index 0000000..c6f6573
--- /dev/null
+++ b/core/themes/bartik/css/components/book.css
@@ -0,0 +1,9 @@
+/* ---------- book ----------- */
+.book-navigation .menu {
+  border-top: 1px solid #d6d6d6;
+}
+.book-navigation .book-pager {
+  border-bottom: 1px solid #d6d6d6;
+  border-top: 1px solid #d6d6d6;
+  margin: 0;
+}
\ No newline at end of file
diff --git a/core/themes/bartik/css/components/breadcrumb.css b/core/themes/bartik/css/components/breadcrumb.css
new file mode 100644
index 0000000..a7bc83c
--- /dev/null
+++ b/core/themes/bartik/css/components/breadcrumb.css
@@ -0,0 +1,5 @@
+/* -------------- Breadcrumbs   -------------- */
+
+.breadcrumb {
+  font-size: 0.929em;
+}
\ No newline at end of file
diff --git a/core/themes/bartik/css/components/buttons.css b/core/themes/bartik/css/components/buttons.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/captions.css b/core/themes/bartik/css/components/captions.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/ckeditor-iframe.css b/core/themes/bartik/css/components/ckeditor-iframe.css
similarity index 100%
rename from core/themes/bartik/css/ckeditor-iframe.css
rename to core/themes/bartik/css/components/ckeditor-iframe.css
diff --git a/core/themes/bartik/css/colors.css b/core/themes/bartik/css/components/colors.css
similarity index 100%
rename from core/themes/bartik/css/colors.css
rename to core/themes/bartik/css/components/colors.css
diff --git a/core/themes/bartik/css/components/comments.css b/core/themes/bartik/css/components/comments.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/content.css b/core/themes/bartik/css/components/content.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/dropbutton.css b/core/themes/bartik/css/components/dropbutton.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/featured.css b/core/themes/bartik/css/components/featured.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/footer.css b/core/themes/bartik/css/components/footer.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/form.css b/core/themes/bartik/css/components/form.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/header.css b/core/themes/bartik/css/components/header.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/help.css b/core/themes/bartik/css/components/help.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/highlighted.css b/core/themes/bartik/css/components/highlighted.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/list.css b/core/themes/bartik/css/components/list.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/main.css b/core/themes/bartik/css/components/main.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/messages.css b/core/themes/bartik/css/components/messages.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/password-field.css b/core/themes/bartik/css/components/password-field.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/primary-menu.css b/core/themes/bartik/css/components/primary-menu.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/search.css b/core/themes/bartik/css/components/search.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/secondary-menu.css b/core/themes/bartik/css/components/secondary-menu.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/shortcut.css b/core/themes/bartik/css/components/shortcut.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/sidebar.css b/core/themes/bartik/css/components/sidebar.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/table.css b/core/themes/bartik/css/components/table.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/tabs.css b/core/themes/bartik/css/components/tabs.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/triptych.css b/core/themes/bartik/css/components/triptych.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/user.css b/core/themes/bartik/css/components/user.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/components/views.css b/core/themes/bartik/css/components/views.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/layout/layout.css b/core/themes/bartik/css/layout/layout.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/media.css b/core/themes/bartik/css/media.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index d53b0e2..6491a2f 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -1,211 +1,3 @@
-/* ---------- Overall Specifications ---------- */
-
-body {
-  line-height: 1.5;
-  font-size: 87.5%;
-  word-wrap: break-word;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-a {
-  text-decoration: none;
-  border-bottom: 1px dotted;
-}
-a:hover,
-a:active,
-a:focus,
-.link:hover,
-.link:active,
-.link:focus {
-  text-decoration: none;
-  border-bottom-style: solid;
-}
-.field-type-image a,
-h1 a,
-h2 a,
-[role*=banner] a,
-.feed-icon,
-.contextual-links a,
-.toolbar a {
-  border-bottom: none !important;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 1.0em 0 0.5em;
-  font-weight: inherit;
-}
-h1 {
-  font-size: 1.357em;
-  color: #000;
-}
-h2 {
-  font-size: 1.143em;
-}
-h3 {
-  font-size: 1.092em;
-}
-h4 {
-  font-size: 1.05em;
-}
-h5 {
-  font-size: 0.889em;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-}
-h6 {
-  font-size: 0.67em;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-}
-p {
-  margin: 0 0 1.2em;
-}
-del {
-  text-decoration: line-through;
-}
-
-/**
- * The generic monospace font family is listed before Courier new to avoid a
- * a bug in font-size rendering:
- * http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing
- */
-code,
-pre,
-kbd,
-samp,
-var {
-  padding: 0 0.4em;
-  font-size: 0.857em;
-  font-family: Menlo, Consolas, "Andale Mono", "Lucida Console", "Nimbus Mono L", "DejaVu Sans Mono", monospace, "Courier New";
-}
-code {
-  background-color: #f2f2f2;
-  background-color: rgba(40, 40, 0, 0.06);
-}
-pre code,
-pre kbd,
-pre samp,
-pre var,
-kbd kbd,
-kbd samp,
-code var {
-  font-size: 100%;
-  background-color: transparent;
-}
-pre code,
-pre samp,
-pre var {
-  padding: 0;
-}
-.description code {
-  font-size: 1em;
-}
-kbd {
-  background-color: #f2f2f2;
-  border: 1px outset #575757;
-  margin: 0 3px;
-  color: #666;
-  display: inline-block;
-  padding: 0 6px;
-  border-radius: 5px;
-}
-pre {
-  background-color: #f2f2f2;
-  background-color: rgba(40, 40, 0, 0.06);
-  margin: 10px 0;
-  overflow: hidden;
-  padding: 15px;
-  white-space: pre-wrap;
-}
-
-
-/* ------------------ Fonts ------------------ */
-
-body,
-#site-slogan,
-.site-slogan,
-#page .ui-widget,
-.comment-form label,
-.node-form label,
-.node-form .description {
-  font-family: Georgia, "Times New Roman", Times, serif;
-}
-#header,
-#footer-wrapper,
-.skip-link,
-ul.contextual-links,
-ul.links,
-ul.primary,
-.pager__items,
-div.field-type-taxonomy-term-reference,
-div.messages,
-.node__meta,
-p.comment-time,
-table,
-.breadcrumb,
-.link {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-input,
-textarea,
-select,
-.form-button,
-a.button,
-button {
-  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
-}
-
-/* ------------------ Reset Styles ------------------ */
-
-blockquote {
-  background: #f7f7f7;
-  border-left: 1px solid #bbb;
-  font-style: italic;
-  margin: 1.5em 10px;
-  padding: 0.5em 10px;
-}
-[dir="rtl"] blockquote {
-  border-left: none;
-  border-right: 4px solid #afafaf;
-}
-blockquote:before {
-  color: #bbb;
-  content: "\201C";
-  font-size: 3em;
-  line-height: 0.1em;
-  margin-right: 0.2em;
-  vertical-align: -.4em;
-}
-[dir="rtl"] blockquote:before {
-  content: "\201D";
-}
-blockquote:after {
-  color: #bbb;
-  content: "\201D";
-  font-size: 3em;
-  line-height: 0.1em;
-  vertical-align: -.45em;
-}
-[dir="rtl"] blockquote:after {
-  content: "\201C";
-}
-blockquote > p:first-child {
-  display: inline;
-}
-a.feed-icon {
-  display: inline-block;
-  padding: 15px 0 0 0;
-}
-img {
-  max-width: 100%;
-  height: auto;
-  border: 0;
-}
 
 /* ------------------ Table Styles ------------------ */
 
@@ -1383,12 +1175,6 @@ div.messages {
   margin-left: 15px;
 }
 
-/* -------------- Breadcrumbs   -------------- */
-
-.breadcrumb {
-  font-size: 0.929em;
-}
-
 /* -------------- User Profile   -------------- */
 
 .profile .field-name-field-user-picture {
@@ -1828,71 +1614,6 @@ div.add-or-remove-shortcuts {
   padding-top: 0.9em;
 }
 
-/* ---------- Admin-specific Theming ---------- */
-.path-admin #content img {
-  margin-right: 15px; /* LTR */
-}
-.path-admin #content .simpletest-image img {
-  margin: 0;
-}
-.path-admin #admin-dblog img {
-  margin: 0 5px;
-}
-
-/* Block demo mode */
-.demo-block {
-  background: #ffff66;
-  border: 1px dotted #9f9e00;
-  color: #000;
-  font: 90% "Lucida Grande", "Lucida Sans Unicode", sans-serif;
-  margin: 5px;
-  padding: 5px;
-  text-align: center;
-  text-shadow: none;
-}
-#featured .demo-block {
-  font-size: 0.55em;
-}
-#header .demo-block {
-  width: 500px;
-}
-
-/* Configuration. */
-div.admin .right,
-div.admin .left {
-  width: 49%;
-  margin: 0;
-}
-div.admin-panel {
-  background: #fbfbfb;
-  border: 1px solid #ccc;
-  margin: 10px 0;
-  padding: 0 5px 5px;
-}
-div.admin-panel h3 {
-  margin: 16px 7px;
-}
-div.admin-panel dt {
-  border-top: 1px solid #ccc;
-  padding: 7px 0 0;
-}
-div.admin-panel dd {
-  margin: 0 0 10px;
-}
-div.admin-panel .description {
-  margin: 0 0 14px 7px;
-}
-
-/* ---------- book ----------- */
-.book-navigation .menu {
-  border-top: 1px solid #d6d6d6;
-}
-.book-navigation .book-pager {
-  border-bottom: 1px solid #d6d6d6;
-  border-top: 1px solid #d6d6d6;
-  margin: 0;
-}
-
 /* ---------- Dropbutton ----------- */
 .js .dropbutton-multiple.open .dropbutton-widget {
   border-radius: 1em;
diff --git a/core/themes/bartik/css/maintenance-page.css b/core/themes/bartik/css/theme/maintenance-page.css
similarity index 100%
rename from core/themes/bartik/css/maintenance-page.css
rename to core/themes/bartik/css/theme/maintenance-page.css