Remove media.css from Bartik, add it's current code directly to the components it references.

Investigated this a bit and this seems to be pretty straight forward issue. Patch as attachment. Didn't touch coding standards as we have separate issues for coding standards per component.

+++ b/core/themes/bartik/css/components/featured.css
@@ -20,3 +20,14 @@
+  /* ----------------- Featured ----------------- */

+++ b/core/themes/bartik/css/components/form.css
@@ -248,3 +248,10 @@ input.form-submit:focus {
+/* ---------- Input fields ---------- */

+++ b/core/themes/bartik/css/components/header.css
@@ -193,3 +193,51 @@ h1.site-name {
+/* Media queries */
...
+  /* ------------ Header and Menus -------------------------- */

We can remove these comments now that they are in the same file. Also we don't need to leave any blank lines above the media queries

+++ b/core/themes/bartik/css/components/form.css
@@ -248,3 +248,10 @@ input.form-submit:focus {
+/* ---------- Input fields ---------- */
+@media screen and (max-width: 60em) { /* 920px */
+  input,
+  textarea {
+    font-size: 1.142857143em;
+  }
+}

+++ b/core/themes/bartik/css/components/table.css
@@ -64,3 +64,21 @@ table ul.links {
+/**
+ * Responsive tables.
+ */
+@media screen and (max-width: 37.5em) { /* 600px */
+  th.priority-low,
+  td.priority-low,
+  th.priority-medium,
+  td.priority-medium {
+    display: none;
+  }
+}

Let's try and make sure that we are placing the media queries as close as possible to the elements/components that they are affecting instead of at the bottom of the file

Made the changes @lewisnyman suggested.

1. +++ b/core/themes/bartik/css/components/header.css
   @@ -193,3 +193,48 @@ h1.site-name {
   +@media all and (min-width: 461px) and (max-width: 900px) {
   +  .region-header {
   +    margin: .5em 5px .75em;
   +  }
   +  #logo,
   +  .site-logo {
   +    padding: 5px 0 0 5px; /* LTR */
   +  }
   

   I think LewisNyman meant this part could be included below the first #logo {} declaration as well

2. +++ b/core/themes/bartik/css/components/primary-menu.css
   @@ -105,3 +105,89 @@ body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu l
   +@media all and (min-width: 461px) and (max-width: 900px) {
   +  /* ------------ Header and Menus -------------------------- */
   +  .region-primary-menu .menu {
   

   I think this comment is superfluous as well and it can be deleted as well per #3 LewisNyman

3. +++ b/core/themes/bartik/css/components/triptych.css
   @@ -53,3 +53,15 @@
   +  /* ------------------ Triptych ----------------- */
   +  #triptych h2 {
   ...
   +    margin-bottom: 0.9em;
   +  }
   

   Same for this comment /* -- Triptych --- /*. Also this media query should be closer to the original #triptych h2 declaration.

Okay.

1. Moved media-queries of .region-header to layout.css.
2. Reorganized header.css so that media-queries are right after original styles
2.1 In case there's LTR and RTL styles for same element media-queries are coming after both
3. Removed the triptych-comment

+++ b/core/themes/bartik/css/components/primary-menu.css
@@ -105,3 +105,89 @@ body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu l
+@media all and (min-width: 461px) and (max-width: 900px) {
+  /* ------------ Header and Menus -------------------------- */

You missed one comment from media.css (sorry :P)

After that, this is good to go.

I thought that I removed it previous one, but maybe I missed the save button. On primary-menu.css I would keep the media queries on bottom.

Looks good, thanks @DickJohnson!

Looking good!

+++ b/core/themes/bartik/css/components/triptych.css
@@ -53,3 +53,14 @@
+@media all and (min-width: 520px) {
+  #triptych h2 {
+    font-size: 1.714em;
+    margin-bottom: 0.9em;
+  }
+  #triptych .block {
+    margin-bottom: 2em;
+    padding-bottom: 2em;
+  }
+}

The only thing I found was this media query at the bottom of the file, instead of near the selectors components.

Nice catch @LewisNyman, thanks :)

Let's finish this up so we can continue on the components

Checked this patch and it fixing what @lewisnyman said on #12.

I ran Backstop JS on a decent selection of pages, no pages failed. Report attached,

Patch no longer applied after #2142653: Change default logo filetype to .svg and add an SVG version of Druplicon. Rerolled.

Settings back to RTBC per #17 and the last patch is a reroll.

This is a big improvement from a maintainability and understandability POV, I think. Great patch!

Committed c8ec0cd and pushed to 8.0.x. Thanks!

1. +++ b/core/themes/bartik/css/components/featured.css
   @@ -12,10 +12,20 @@
   +@media all and (min-width: 520px) {
   +  #featured {
   +    font-size: 1.643em;
   +  }
   +}
   ...
   +@media all and (min-width: 520px) {
   +  #featured h2 {
   +    font-size: 1.174em;
   +  }
   +}
   

   Why are these not joined together? Do we know of any performance impacts. Looking around on the web I found https://helloanselm.com/2014/web-performance-one-or-thousand-media-queries/ so it seems that the numbers of queries has no meaningful impact other than increase in file size (more bytes to be downloaded) and we need to ensure that a theme uses consistent queries. Obviously the more queries we have in a theme the more chance we have of them becoming inconsistent. For me this is like the typography issue. Splitting this out by component increases the possibility of inconsistencies. A way to mitigate this will be to document the allowed font stack and media queries somewhere - maybe the theme's .info.yml file? However that can be a follow up to this.

2. +++ b/core/themes/bartik/css/components/form.css
   @@ -248,3 +259,4 @@ input.form-submit:focus {
   +
   

   Unnecessary blank line added. Fixed on commit.

#25.1: I think the whole reason this issue is done is exactly to avoid inconsistencies. I think the thinking is that it's easier to ensure the same media query is applied consistently in all of a theme's CSS assets (since there will only be at most a handful different ones) than it is to ensure that the different CSS declarations for the same component under different media queries are all kept in sync/consistent.

If we could use Sass then we could use variables to keep this consistent in the way everyone else does now-a-days. I guess we'll have to wait for CSS variables http://caniuse.com/#feat=css-variables

#28: exactly, twice. :)