Sailor CSS

Sailor CSS is a small and customizable layout-focused CSS library. It includes a powerful spacing system, CSS grid and Flexbox utility classes and some useful extras.

Manage everything in one SCSS config file

You add only what you want to use, nothing is added in your code unless you want to. When you add a Sailor map variable to your config file, the related classes become available.

Designed first for layout purposes

You keep using your reset file, CSS boilerplate, naming convention, etc. Sailor do not interfers with your project base. You use it first for layout. The few general utility classes are available if you want to take it a step further.

1. Install Sailor CSS

      yarn add sailorcss

      npm i sailorcss

If you are not using a Node development environment, you can download Sailor CSS from Git and manually add it to your project.

2. Import it to your project

In your index.scss (or main SCSS file), import Sailor CSS from the node_modules folder.

      // using Webpack
      @import 'sailorcss';

      // using a custom setup (adjust relative path for your project)
      @import '../../node_modules/sailorcss';

Why this works for Webpack? The loader will try to resolve @import as a relative path. If it cannot be resolved, it will try to resolve @import inside node_modules.

3. Create a config.scss file

By default, nothing is import unless you setup a config file. Sweet nah ? So first, create a config.scss in your project and import it BEFORE Sailor.

      @import 'config'; // import YOUR config file before Sailor
      @import 'sailorcss';

      // your project SCSS here

Example config file

For a quick start, download this example config file and customize it for your needs.

Download an example file


This library use Sass math.div() and list.slash(). The basic slash (/) are depreciated in Sass. Just update your Sass version to ^1.34 to avoid the warning. Official info here