View source

Core Settings

The default settings file contains all the settings that iotaCSS needs to work.

Installation

npm install --save iotacss-settings-core

Settings

Core settings file contains all the necessary settings that iotaCSS needs to work properly. Below you can see all the settings that can be overwritten in order to fit the needs of your project.

Name Type Default Description
$iota-global-objects-namespace String o- Objects global namespace
$iota-global-components-namespace String c- Components global namespace
$iota-global-utilities-namespace String u- Utilities global namespace
$iota-global-breakpoint-separator String \@ Global breakpoint suffix naming setting. All breakpoint specific styles have a '@breakpointName' suffix by default. The \ character is used to escape the @ character.
$iota-global-delimiter String \/ Global delimiter naming setting for Size, Push and Pull utilities. By default it is '/' (.u-1/2) and you can change it for example to 'of' so that the generated HTML class will be 'u-1of2'.
$iota-global-breakpoints Map 
  $iota-global-breakpoints: ( 

    sm  : "screen and ( min-width: 768px )", 

    md  : "screen and ( min-width: 1000px )"

  );
Default global breakpoints map. These are the default breakpoints map that will be shared across all iotaCSS modules. You can change it also locally to each module.
$iota-global-columns List 2, 3, 6 Grid columns. This setting is shared between iotaCSS grid objects and size, pull & push utilities. You can change it also locally to each module.
$iota-global-gutter-default String 10px Default gutters. This setting is shared between multiple objects and utilities as the default value for gutters. You can change it also locally to each module. E.g. grid gutter, media object gutter, list gutter, etc.
$iota-global-flex Boolean false Enables flexbox across the app. If you do not want all modules to use flexbox you can keep this value false and set it to true separately to each one of them locally.
$iota-global-rtl Boolean false Enables rtl across the app. If you enable this setting the final CSS will be converted to RTL.