Meet ContainCSS

The Simple Svelte Component Library that uses css variables & container queries to make your life easier.

ContainCSS

Simple Components

Presenting the simple components you would expect to see in any modern component library.

Using svelte components is easy and supports a number of intuitive properties, such as:


Which produces:

CSS Variables

Our shorthand properties like bg and fg are just syntactic sugar for CSS variables scoped to components, like --card-bg and --button-width.

Because we use CSS variables, you can inject variables wherever you like in your component heirarchy, as in this nav bar with custom buttons:

Home

Container Queries

A Card

We use container queries out of the box. This "Card" has a sidebar, for example, but because the card is small, the sidebar will be in the "expander" mode, regardless of the screen size.

For the Future

We use modern CSS features like filter and transform to handle affordances, so changing color schemes should be a snap and only require changing a single value.

We also use features like <dialog> and the

Which handles overlays for items such as tooltips and dropdown menus, which we provide with <Tooltip> and <DropdownMenu> as well as with a custom <Select>
for our overlays, so there's no need for portals or other shenanigans.

Installation

Start by installing our library:

Once you have that, you will need to make sure to import our styles somewhere in your project, such as at the top level, in order to define the CSS variables we depend on. You can also select a theme or set of themes if you like.

Now you're ready to import and use our components anywhere you like in the project.

We use CSS variables wherever possible, so if you want to change up things like colors at a component level, you can simply inject the appropriate CSS variables into the component's style tag.

Typography

If you wrap an element in a TextLayout container, we will automatically apply some basic typography for body text, headers, and so forth.

The TextLayout element uses some of the typographic styles that are applied at our top level component, which you can define anywhere in your project that you'd like to make changes.

The Typography Triangle

The key to good typography is paying attention to the harmony and balance of three simple factors:

  1. Font: the font (font-family and font-size in combination).
  2. Width: the width of each line.
  3. Spacing: the spacing between lines (line-height).

In this system, you can customize those three elements with --body-font-family, --line-width and --line-height.

Headings

We take some pains to clean up the space around headings by default, so that headings are closer to the content they describe than the content that precedes them.

If you want to use background colors on your heading, you should add some padding to them using the --heading-pad variable, which is unset by default (since our default headings don't have a background color). I recommend trying one of the existing spacing utility variables such as var(--padding) or var(--gap) or var(--space) to make sure the space around the heading will harmonize with space elsewhere in your interface.