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. If you are looking for an alternative between big libraries and utility-first frameworks, Sailor is for you.

Designed first for layout purposes

The main utility of Sailor is to allow you to use certain utility classes for the layout of your pages and to maintain a component approach for the styles specific to each element.

Ideal base for BEM, SMACSS and OOCSS workflow

Do you like having a well-separated and defined CSS codebase? Sailor integrates beautifully with your established workflow, without changing your structure.

Manage everything in one 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.

Combine the power of SASS with CSS variables

We really like CSS variables! Some elements of your config file are automatically converted into CSS variables for easier use.

No compiler other than SASS, the most widely used in the world

You only need SASS as compiler dependency. It is very likely that SASS is already integrated into your build process.

Used and maintain on a daily basis

Sailor is used and maintained daily by a web agency, so you don't have to worry about the future of the project.

Powerful in-between solution

If you are looking for an in-between solution between large frameworks and utility-first library, Sailor is probably the solution for you.

Use SASS modern rules

Sailor CSS use the rules @use and @forward from SASS to scope mixins and variables, so no possible conflict with your existing mixins.