Atlantis

• 21TORR/atlantis
• @21torr/atlantis

Atlantis is a library, that combines a lot of commonly used patterns in SCSS.

Installation

pnpm install @21torr/atlantis

Reset

Atlantis bundles a reset, that resets the browser default styles

• Removes all padding and margin
• Applies box-sizing: border-box to everything.
• Resets all list styling (it should be reapplied in your .content)
• Unifies SVG styling across the app.
• Unifies form element styling
• Improves global text styling

Usage:

@use "~@21torr/atlantis/reset";

This import belongs in your SCSS entry file.

Mixins

All available mixins:

• aspect-ratio()
• center-children()
• center-element()
• centered-container()
• color-svg()
• emoji-fonts()
• fill-parent()
• flex-equal-columns()
• flex-fill-height()
• flex-fill-width()
• flex-fixed-height()
• flex-fixed-width()
• hide-text()
• on-interaction()
• on-max-height()
• on-max-width()
• on-min-height()
• on-min-width()
• smooth-scroll()
• square()
• svg-child()
• system-fonts()
• text-overflow-ellipsis()
• transition()

Functions

All available functions:

• fluid-prop()
• inline-svg()