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
// 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
list.slash(). The basic slash (/) are depreciated in Sass. Just update your Sass version to
^1.34 to avoid the warning. Official info here