Sea Salt

Minimal seasoning for your web application.

Grid-based layout and scaleable typography for effortless responsive design.

Sea Salt

Minimal seasoning for your web application.

Grid-based layout and scaleable typography for effortless responsive design.

Basic Installation


            // install the package
            $ yarn add seasalt


            // import via Webpack in your JS
            import 'seasalt/dist/index.css'


            // import via Sass or Less
            @import 'node_modules/seasalt/dist/index'


            // or just load up directly into your HTML
            <link href="node_modules/seasalt/dist/index.css" rel="stylesheet" type="text/css" />

A simple, customizable grid.

Using built-in CSS variables, you can adjust the grid configuration on the fly.

Rows have static width for easy nesting.

No math required.

No more complicated classes.

Use attributes like [data-row="1"] and [data-col="1"] to set sizes. No more class conflicts! Plus, it's super clean to use whether you're writing plain HTML or JSX.

Relative units for smooth styling.

Bye, breakpoint hell! Unification makes scaling a breeze.

All you need to do is update a single CSS variable (--rem) to scale your entire design. Try it out:

How does this work?

This --rem value is used to set the `font-size` property of the HTML element. By doing that, we are also setting the value of `1rem` throughout the document. Then, if we use `rem` as our unit across the board (instead of px, for instance), all those values will be relative to one another.