Configuration

Asterix's configuration is made of two parts.

$asterix-conf configures the asterix's settings ;

$asterix-vars injects your own design system settings into Asterix. Go to section "Variables" for more details.

Default values

$asterix-conf: (
  grid-columns-number: 12,
  media-queries-default-media: all,
  scope-vars-in-each-layout: true,
  specifiers-default-attribute: data-spe,
  verbose: false
) !default;

Retrieve configuration

You can retrieve configuration setting with the --conf($property) function.

@if(--conf(verbose)){
    @warn 'I am verbose.';
}

Update configuration

The mixin --update-conf($updatedConf) will merge the map you provide with the current settings.

Updates should be made between the asterix's main @import and the call of the asterix() mixin.

// Your index.scss file
@import '@digivorefr/asterix-scss';

// Apply custom conf here.
@include --update-conf((
 grid-column-numbers: 6,
));

// Initializes Asterix
@include asterix();

// your code here...

Parameters

grid-columns-number

Define the maximal number of colums you're going to use in your layouts.

Because important loops are run from this value, you should always consider having a minimal number of columns.

default: 12;

Keep also in mind that this value is only concerning grid layouts, and can be set to 0 if you're going to use only flex layouts.

media-queries-default-media

Indicate the media used into --mq() built media queries.

// By default:
@include --mq(xs){...} // @media all and (min-width:480px){...}
// if media-queries-default-media is set to screen:
@include --mq(xs){...} // @media screen and (min-width:480px){...}

Default: all

scope-vars-in-each-layout

Boolean defining if asterix's internal css variables should be resetted each time a selector is declared, or if they should be declared only on the asterix's root level.

This allows to prevent any inheritance in the DOM tree.

default: true;

When set to false, be sure to initialize asterix inside of a selector. Variables will indeed be initialized at this element level, and css variable cannot be initialized at top level.

specifiers-default-attribute

default: data-spe

Globally set the attribute used to attach custom specifiers to.

// Some code
div{
    @include --spe(specifier){...}
}

<!-- if specifiers-default-attribute is set to its default -->
<div data-spe="--specifier"></div>

<!-- if specifiers-default-attribute = class -->
<div class="--specifier"></div>

verbose

In some case, Asterix can output warnings into the console, especially with --mq() mixin, when verbose is set to true.

default : false;