Spacing

Integrating a design in a "pixel perfect" way is not always the right solution. For layout or spacing, using a consistent and responsive system makes much more sense. One of the strengths of Sailor CSS is the ability to use a fraction-based spacing system. You set a general or specific base value at each breakpoint. Subsequently, in your config file, you add the desired suffix for the class name and the corresponding fraction.

Configuration

Base value

You can use a different value per breakpoint if you have set values in $s-breakpoints.
This value, unique or specific to each breakpoint, will also be declared on the :root in this way: --spacing: {value}

      // using a different value per breakpoint
      $s-spacing-values:(
         'xs': 5rem,
         'md': 6rem,
         'xl': 7rem,
         // etc.
      ),
    

         // or using a unique value
         $s-spacing-values: 6rem,
      

Class suffixes and fractions

Set your spacing class suffixes and the fraction for each. You are free to add or remove elements.

      // the keys will be part of your spacing and grid-gap classes name
      $s-spacing-fractions: (
         "full": 1,
         "threequarter": 0.75,
         "twothird": 0.66,
         "half": 0.5,
         "third": 0.33,
         "quarter": 0.25,
         "sixth": 0.16,
         "none": 0,
      ),
    

How it works ? Using for example the previous configuration, for a utility class like mb-half, the CSS value will be: margin-bottom: 6rem * 0.5. As the base value is set as CSS custom properties (CSS variable), the real value will be: margin-bottom: var(—spacing) * 0.5

No Margin or Padding

If you want to remove padding or margin on an element, use the -none value.