πŸš€Β Β Astro β€” Resets


Common CSS resets in a configurable Astro component. Only needed CSS is injected into critical path.

Keywords:

  • astro
  • astro-component
  • boilerplate
  • app
  • base
  • css
  • resets

πŸš€Β Β Astro β€” Resets

NPM Downloads ISC License PRs Welcome
Astro TypeScript Prettier EditorConfig ESLint

Common CSS resets in a configurable Astro component.
Only needed CSS is injected into critical path.

All settings are applied by default. Individual rule can be disabled.

πŸ“¦Β Β Installation

pnpm i @julian_cataldo/astro-resets

πŸ› Β Β Usage

---
import Resets from '@julian_cataldo/astro-resets/Resets.astro';
// ...
---
<!-- ... -->
<head>
  <!-- Place component inside `HEAD` tag -->

  <!-- All properties are optional -->
  <Resets
    bodyMargin={true}
    fontSmoothing={true}
    fontSystem={true}
    scrollSmooth={true}
    borderBox={true}
    scrollBarKeep={true}
  />

  <!-- ... -->
</head>
<!-- ... -->

Suggestions

It is assumed that CSS resetting is an highly opinionated topic.
This component takes these stances about it:

  • Must not aggressively override beneficial defaults
  • Must make user experience better
  • Must avoid side-effects
  • Must be clear about what is affected
  • Might be used to level-out browser inconsistencies
  • Might be used to offer next gen. features
  • Should be used in last resort
  • Must be re-evaluated / removed regularly while browsers evolve

That being said, don't hesitate to share your handy little resets in issues.

Rules

Body margin

Removes body margin.

Font smoothing

Cross-browser grayscale font-smoothing.

Font system

Apply default system font instead of Times, before loading custom web-font or keeped as is.

Scroll smooth

Ensure smooth CSS scrolling.
Native only, no polyfill for older Safari etc.

Border box

Consistent border box for all elements.

Scroll bar keep

Always show browser scrollbar.
This is to prevent annoying layout jump when you navigate to a page which doesn't scroll, or when you open a lightbox/modal etc.

To do

  • Find a more practical way to handle CSS snippets files and their import

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.12.4 (2022-10-17)

Bug Fixes

  • remove package prefix, simplify import method (73bd31b)

0.12.3 (2022-09-22)

Note: Version bump only for package @julian_cataldo/astro-resets

0.12.2 (2022-07-31)

Note: Version bump only for package @julian_cataldo/astro-resets

0.12.1 (2022-07-24)

Note: Version bump only for package @julian_cataldo/astro-resets

0.12.0 (2022-07-18)

Features

0.11.0 (2022-06-28)

Features

  • better defaults properties (cc55aec)

0.10.7 (2022-06-26)

Note: Version bump only for package @julian_cataldo/astro-resets

0.10.6 (2022-06-25)

Note: Version bump only for package @julian_cataldo/astro-resets

0.10.5 (2022-06-22)

Note: Version bump only for package @julian_cataldo/astro-resets

0.10.4 (2022-06-22)

Note: Version bump only for package @julian_cataldo/astro-resets

0.10.3 (2022-06-21)

Bug Fixes

0.10.2 (2022-06-20)

Note: Version bump only for package @julian_cataldo/astro-resets

0.10.1 (2022-06-20)

Note: Version bump only for package @julian_cataldo/astro-resets

0.10.0 (2022-06-19)

Features

...

⚠️  Having an issue? / πŸ—£   Wanna share feedback or suggestion?

✍️  Open an Issue or a Pull Request   on GitHub -or-   Contact me   on my Website.