CSS improvements
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3594084. -->
Reported by: [markconroy](https://www.drupal.org/user/336910)
Related to !13
>>>
<h2>Let's write the CSS mobile-first. </h2>
<p>Check for things like:</p>
<pre>.bus-homepage__search-columns {<br> display: grid;<br> grid-template-columns: 1fr 1fr;<br>}<br><br>@media (max-width: 48em) {<br> .bus-homepage__search-columns {<br> grid-template-columns: 1fr;<br> }<br>}</pre><p>which should be written like:</p>
<pre>.bus-homepage__search-columns {<br> display: grid;<br> grid-template-columns: 1fr;<br>}<br><br>@media (min-width: 48em) {<br> .bus-homepage__search-columns {<br> grid-template-columns: 1fr 1fr;<br> }<br>}</pre><h2>Write as little CSS as possible</h2>
<p>Most of the CSS for this should be created by themes. LocalGov Base (which will be the base for most of the themes) already has good support, so let's keep our CSS to a minimum.</p>
<p>For example, our <code>button</code> items for the areas sidebar/tablist could probably be as simple as</p>
<pre>.bus-area-browse__area-btn {<br> display: block;<br> width: 100%;<br> text-align: left;<br>}</pre><p>We just want to make the buttons 100% of their container and the text aligned left. Everything else can inherit from a button style in the theme, or custom styles from somewhere else.</p>
<h2>full names for classes</h2>
<p>Avoid .btn, use .button</p>
<h2>Use grids for grids</h2>
<p>If something is a two-column layout, with both items the same width, use grid. If we do not know how wide each items should be, use flexbox.</p>
<h2>use rems in media queries</h2>
<p>use rems instead of ems in media queries for consistency.</p>
issue