csslib

A customised fork of inuitcss which I use on most projects

Usage no npm install needed!

<script type="module">
  import csslib from 'https://cdn.skypack.dev/csslib';
</script>

README

CSSlib

A customised fork of inuitcss which I use on most projects.

Setting Default
$inuit-namespace null
$inuit-base-font-size 16px
$inuit-base-line-height 24px
$inuit-base-text-color #333
$inuit-base-background-color #fff
$inuit-widths-namespace $inuit-namespace
$inuit-use-fractions true
$inuit-global-border-box false
$inuit-heading-size-1 36px
$inuit-heading-size-2 30px
$inuit-heading-size-3 24px
$inuit-heading-size-4 20px
$inuit-heading-size-5 16px
$inuit-heading-size-6 14px
$inuit-lede-size 1.125
$inuit-block-namespace $inuit-namespace
$inuit-block-gutter $inuit-base-spacing-unit
$inuit-block-gutter--tiny quarter($inuit-block-gutter)
$inuit-block-gutter--small halve($inuit-block-gutter)
$inuit-block-gutter--large double($inuit-block-gutter)
$inuit-block-gutter--huge quadruple($inuit-block-gutter)
$inuit-enable-block--flush false
$inuit-enable-block--tiny false
$inuit-enable-block--small false
$inuit-enable-block--large false
$inuit-enable-block--huge false
$inuit-enable-block--center false
$inuit-enable-block--right false
$inuit-box-namespace $inuit-namespace
$inuit-box-padding $inuit-base-spacing-unit
$inuit-box-padding--tiny quarter($inuit-box-padding)
$inuit-box-padding--small halve($inuit-box-padding)
$inuit-box-padding--large double($inuit-box-padding)
$inuit-box-padding--huge quadruple($inuit-box-padding)
$inuit-enable-box--flush false
$inuit-enable-box--tiny false
$inuit-enable-box--small false
$inuit-enable-box--large false
$inuit-enable-box--huge false
$inuit-btn-namespace $inuit-namespace
$inuit-btn-padding halve($inuit-base-spacing-unit)
$inuit-btn-padding--small halve($inuit-btn-padding)
$inuit-btn-padding--large double($inuit-btn-padding)
$inuit-btn-background #4a8ec2
$inuit-btn-color #fff
$inuit-btn-border-width 1px
$inuit-btn-border-style solid
$inuit-btn-border-color $inuit-btn-background
$inuit-btn-radius 0
$inuit-enable-btn--small false
$inuit-enable-btn--large false
$inuit-enable-btn--full false
$inuit-enable-btn--pill false
$inuit-flag-namespace $inuit-namespace
$inuit-flag-gutter $inuit-base-spacing-unit
$inuit-flag-gutter--tiny quarter($inuit-flag-gutter)
$inuit-flag-gutter--small halve($inuit-flag-gutter)
$inuit-flag-gutter--large double($inuit-flag-gutter)
$inuit-flag-gutter--huge quadruple($inuit-flag-gutter)
$inuit-enable-flag--tiny false
$inuit-enable-flag--small false
$inuit-enable-flag--large false
$inuit-enable-flag--huge false
$inuit-enable-flag--rev false
$inuit-enable-flag--flush false
$inuit-enable-flag--top false
$inuit-enable-flag--bottom false
$inuit-enable-flag--responsive false
$inuit-flag-collapse-at 720px
$inuit-layout-namespace $inuit-namespace
$inuit-layout-gutter $inuit-base-spacing-unit
$inuit-layout-gutter--tiny quarter($inuit-layout-gutter)
$inuit-layout-gutter--small halve($inuit-layout-gutter)
$inuit-layout-gutter--large double($inuit-layout-gutter)
$inuit-layout-gutter--huge quadruple($inuit-layout-gutter)
$inuit-enable-layout--tiny false
$inuit-enable-layout--small false
$inuit-enable-layout--large false
$inuit-enable-layout--huge false
$inuit-enable-layout--flush false
$inuit-enable-layout--rev false
$inuit-enable-layout--middle false
$inuit-enable-layout--bottom false
$inuit-enable-layout--right false
$inuit-enable-layout--center false
$inuit-enable-layout--auto false
$inuit-global-border-box false
$inuit-list-bare-namespace $inuit-namespace
$inuit-list-block-namespace $inuit-namespace
$inuit-list-block-padding $inuit-base-spacing-unit
$inuit-list-block-padding--tiny quarter($inuit-list-block-padding)
$inuit-list-block-padding--small halve($inuit-list-block-padding)
$inuit-list-block-padding--large double($inuit-list-block-padding)
$inuit-list-block-padding--huge quadruple($inuit-list-block-padding)
$inuit-enable-list-block--tiny false
$inuit-enable-list-block--small false
$inuit-enable-list-block--large false
$inuit-enable-list-block--huge false
$inuit-list-inline-namespace $inuit-namespace
$inuit-enable-list-inline--delimited false
$inuit-list-inline-delimit-character ",\00A0"
$inuit-list-ui-namespace $inuit-namespace
$inuit-list-ui-padding $inuit-base-spacing-unit
$inuit-list-ui-padding--tiny quarter($inuit-list-ui-padding)
$inuit-list-ui-padding--small halve($inuit-list-ui-padding)
$inuit-list-ui-padding--large double($inuit-list-ui-padding)
$inuit-list-ui-padding--huge quadruple($inuit-list-ui-padding)
$inuit-list-ui-border-width 1px
$inuit-list-ui-border-style solid
$inuit-list-ui-border-color #ccc
$inuit-enable-list-ui--tiny false
$inuit-enable-list-ui--small false
$inuit-enable-list-ui--large false
$inuit-enable-list-ui--huge false
$inuit-media-namespace $inuit-namespace
$inuit-media-gutter $inuit-base-spacing-unit
$inuit-media-gutter--tiny quarter($inuit-media-gutter)
$inuit-media-gutter--small halve($inuit-media-gutter)
$inuit-media-gutter--large double($inuit-media-gutter)
$inuit-media-gutter--huge quadruple($inuit-media-gutter)
$inuit-enable-media--tiny false
$inuit-enable-media--small false
$inuit-enable-media--large false
$inuit-enable-media--huge false
$inuit-enable-media--rev false
$inuit-enable-media--flush false
$inuit-enable-media--responsive false
$inuit-media-collapse-at 720px
$inuit-pack-namespace $inuit-namespace
$inuit-pack-gutter $inuit-base-spacing-unit
$inuit-pack-gutter--tiny quarter($inuit-pack-gutter)
$inuit-pack-gutter--small halve($inuit-pack-gutter)
$inuit-pack-gutter--large double($inuit-pack-gutter)
$inuit-pack-gutter--huge quadruple($inuit-pack-gutter)
$inuit-enable-pack--auto false
$inuit-enable-pack--tiny false
$inuit-enable-pack--small false
$inuit-enable-pack--large false
$inuit-enable-pack--huge false
$inuit-enable-pack--rev false
$inuit-enable-pack--middle false
$inuit-enable-pack--bottom false
$inuit-table-namespace $inuit-namespace
$inuit-table-padding--compact quarter($inuit-base-spacing-unit)
$inuit-table-padding--cosy halve($inuit-base-spacing-unit)
$inuit-table-padding--comfy $inuit-base-spacing-unit
$inuit-table-border-width 1px
$inuit-table-border-style solid
$inuit-table-border-color #ccc
$inuit-enable-table--fixed false
$inuit-enable-table--compact false
$inuit-enable-table--cosy false
$inuit-enable-table--comfy false
$inuit-enable-table--cells false
$inuit-enable-table--rows false
$inuit-enable-table--columns false
$inuit-tabs-namespace $inuit-namespace
$inuit-spacing-namespace $inuit-namespace
$inuit-margin $inuit-base-spacing-unit
$inuit-margin--small halve($inuit-margin)
$inuit-margin--tiny quarter($inuit-margin)
$inuit-margin--large double($inuit-margin)
$inuit-margin--huge quadruple($inuit-margin)
$inuit-padding $inuit-base-spacing-unit
$inuit-padding--small halve($inuit-padding)
$inuit-padding--tiny quarter($inuit-padding)
$inuit-padding--large double($inuit-padding)
$inuit-padding--huge quadruple($inuit-padding)
$inuit-enable-margins false
$inuit-enable-margins--tiny false
$inuit-enable-margins--small false
$inuit-enable-margins--large false
$inuit-enable-margins--huge false
$inuit-enable-margins--negative false
$inuit-enable-margins--negative-tiny false
$inuit-enable-margins--negative-small false
$inuit-enable-margins--negative-large false
$inuit-enable-margins--negative-huge false
$inuit-enable-margins--none false
$inuit-enable-paddings false
$inuit-enable-paddings--tiny false
$inuit-enable-paddings--small false
$inuit-enable-paddings--large false
$inuit-enable-paddings--huge false
$inuit-enable-paddings--none false
$inuit-enable-responsive-margins false
$inuit-enable-responsive-margins--tiny false
$inuit-enable-responsive-margins--small false
$inuit-enable-responsive-margins--large false
$inuit-enable-responsive-margins--huge false
$inuit-enable-responsive-margins--negative false
$inuit-enable-responsive-margins--negative-tiny false
$inuit-enable-responsive-margins--negative-small false
$inuit-enable-responsive-margins--negative-large false
$inuit-enable-responsive-margins--negative-huge false
$inuit-enable-responsive-margins--none false
$inuit-enable-responsive-paddings false
$inuit-enable-responsive-paddings--tiny false
$inuit-enable-responsive-paddings--small false
$inuit-enable-responsive-paddings--large false
$inuit-enable-responsive-paddings--huge false
$inuit-enable-responsive-paddings--none false
$z-indexes foo, bar, baz