ALF SASS variables and mixins

SASS variables

There's a number of SASS variables you can overwrite, to customize ALF. A few affect the core modules, the rest apply to the basic theme.

Overwrite them by defining them before importing the ALf SASS files. Here's the list:

// Core variables
// --------------
$alf-threshold-phone: 480px !default;
$alf-threshold-tablet: 768px !default;
$alf-threshold-web: 1024px !default;
$alf-threshold-web-large: 1200px !default;

$alf-radius: .3rem !default; // used by rounded-corners mixin

$alf-block-separation: 1.5rem !default;
$alf-base-spacing: 2rem !default;
$alf-base-padding: 1.5rem !default;
$alf-gap: $alf-base-spacing * 2 !default;





// Theme variables
// ---------------

// Fonts
$alf-font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
$alf-font-alt: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
$alf-font-code: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;


// Font sizes
$alf-size-xxs: 1rem !default;
$alf-size-xs: 1.1rem !default;
$alf-size-s: 1.4rem !default;
$alf-size-m: 1.6rem !default;
$alf-size-l: 1.8rem !default;
$alf-size-xl: 2rem !default;
$alf-size-xxl: 2.5rem !default;


// Colors
$alf-color-main: #3ab795 !default;
$alf-color-main-light: #f0faf7 !default;
$alf-color-main-dark: darken($alf-color-main, 10%) !default;
$alf-color-alt: #f06c84 !default;
$alf-color-alt-light: #faf1f2 !default;
$alf-color-alt-dark: darken($alf-color-alt, 10%) !default;

$alf-color-ok: #00c159 !default;
$alf-color-ok-light: #e0f6df !default;
$alf-color-ok-dark: darken($alf-color-ok, 10%) !default;
$alf-color-warning: rgb(247, 134, 0) !default;
$alf-color-warning-light: rgb(252, 241, 223) !default;
$alf-color-warning-dark: darken($alf-color-warning, 10%) !default;
$alf-color-error: #ec0017 !default;
$alf-color-error-light: #ffe4e7 !default;
$alf-color-error-dark: darken($alf-color-error, 10%) !default;

$alf-gray-xlight: #f5f5f5;
$alf-gray-light: #ddd;
$alf-gray: #999;
$alf-gray-dark: #666;
$alf-gray-xdark: #444;

$alf-color-text: $alf-gray-xdark !default;
$alf-color-text-light: $alf-gray-xlight !default;
$alf-color-link: #0a85ed !default;
$alf-color-link-light: lighten($alf-color-link, 45%) !default;

$alf-color-line: $alf-gray-light !default;


// Forms
$alf-label-width: 10em !default; // main-label width in .std forms (em or px)
$alf-form-control-small-width: 5em !default; // small fields' width
$alf-form-main-label-weight-tablet-up: 400; // the  main-label weight for tablet-up
$alf-form-main-label-weight-phone-down: 500; // the  main-label weight for phone-down


//  Buttons
$alf-button-border-width: 1px !default; // used in outlined versions

SASS mixins

ALF defines a number of mixins, which you can use in your own SASS files. Just know that they might change in future versions. Here's a list:

  • rounded-corners($radius:$alf-radius): simple (symetrical) rounded corners
  • clearfix($side:both): $side can be left, right, or both (default)
  • hide/unhide: hides/unhides from view (by moving it off-screen)
  • reset-list: resets margin, padding and styles in UL or OL elements
  • color-with-hover($color): applies $color as background, with a slightly lighter version on hover
  • box: ensures that first and last children have no margin (top/bottom respectively)
  • respond-to($media): $media can be:
    • phone-small, phone, tablet, web, web-large
    • phone-down, phone-up
    • tablet-down, tablet-up
    • web-down, web-up
    • phone-device, tablet-device
  • respond-to-size($min, $max): custom responsive code