How to styling

A basic primer about the CSS utilities included in the skeleton and how astro handles CSS generally.

Stylesheets in Astro

There are two types of CSS in Astro. Component-scoped CSS within .astro components and global .css files which are included through an import in the src/layouts/Layout.astro component.

Component-scoped CSS is automatically scoped to the component where it is used. This is very clever and involved and thus out of scope of this document. But the upshot is that the selectors can be very short and unspecific because there is no danger of a collision.

There is more detailed info in the astro documentation.

---
---

<article>
  <h2>My title</h2>
  <p>Lorem Ipsum</p>
</article>

<style>
/* No danger of collision here ... */
h2 {
  color: red;
}
p {
  margin-top: 1em;
}
</style>

Utilities

The utilities can be found in the global CSS which is loaded through /src/styles/global.scss.

Grid

Grid classes work much the same way as bootstrap grids work. An example:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-10 offset-md-2">
      Column A
    </div>
    <div class="col-xs-12">
      <div class="row"> <!-- Nested subgrids always need a wrapping .row to normalize gutters -->
        <div class="col-xs-12 col-lg-6">
          Column B.1
        </div>
        <div class="col-xs-12 col-lg-6">
          Column B2
        </div>
      </div>
    </div>
  </div>
</div>

To achieve aligned subgrids the subgrid columns must always be fractions of 12.

Whitespace

There are white space classes for margin and padding: {p,m}{t,r,b,l}-{xs,sm,md,lg}-{0,1,2,3,4}

Hide something visually, only readable for screen readers: .visually-hidden

Heading