General

mixins

MinWidth

@mixin MinWidth($breakpoint) { ... }

Description

This one let allow define media query within one class.
The media queries affect screen widths with the given breakpoint or larger.

Parameters

NameDescriptionTypeDefault value
$breakpoint

Point to break layout

sm, md, lg, xl, xxl—

Example

@use "xiaolin-css/scss/mixins" as XiaolinCSSMixins;

@include XiaolinCSSMixins.MinWidth(md) {
  padding-bottom: 11px;
}

// Output
@media (min-width: 768px) {
  padding-bottom: 11px;
}

Output

@media query match with breakpoint

Throws

  • [#{variables.$libraryName}] - Unknown direction #{$breakpoint}.

Requires

See

Links

MaxWidth

@mixin MaxWidth($breakpoint) { ... }

Description

This one let allow define media query within one class.
The media queries affect screen widths with the given breakpoint or smaller.

Parameters

NameDescriptionTypeDefault value
$breakpoint

Point to break layout

sm, md, lg, xl, xxl—

Example

@use "xiaolin-css/scss/mixins" as XiaolinCSSMixins;

@include XiaolinCSSMixins.MaxWidth(md) {
  padding-bottom: 11px;
}

// Output
@media (max-width: 767px) {
  padding-bottom: 11px;
}

Output

@media query match with breakpoint

Throws

  • [#{variables.$libraryName}] - Unknown direction #{$breakpoint}.

Requires

See

Links

variables

enableSmoothScroll

$enableSmoothScroll: true !default;

Description

Specifies whether to smoothly animate the scroll position, instead of a straight jump, when the user clicks on a link within a scrollable box.

columnNumber

$columnNumber: 12 !default;

Description

Maximum number of columns on the page. By default, XiaolinCSS's grid system allows up to 12 columns on the page

breakpoints

$breakpoints: (
  sm: 576, // ≥576px Small
  md: 768, // ≥768px Medium
  lg: 992, // ≥992px Large
  xl: 1200, // ≥1200px Extra large
  xxl: 1400 // ≥1400px Extra extra large
) !default;

Description

Point to break layout

Used by

containerMaxWidths

$containerMaxWidths: (
  sm: 544px,
  md: 720px,
  lg: 960px,
  xl: 1152px,
  xxl: 1312px
) !default;

Description

Max width of containers

containerFluidLimitMaxWidth

$containerFluidLimitMaxWidth: 1920px !default;

Description

Max width of container

mainGutterWidth

$mainGutterWidth: 16px !default;

Description

Main spacing for this Library. containers, grid, and so on use this. Default is 16px cause 16:9 aspect ratio is the most common aspect ratio for televisions and computer monitors

fontSizeRoot

$fontSizeRoot: 14px !default;

Description

Used to set the default font-size for the entire website

fontSizeBase

$fontSizeBase: 1rem !default;

Description

Used to set the default font-size for the entire website. This value related with $fontSizeRoot

See

defaultFontFamily

$defaultFontFamily: "Arial", sans-serif !default;

Description

Default font-family for the entire website

defaultFontWeight

$defaultFontWeight: 400 !default;

Description

Default font-weight for the entire website

defaultLineHeight

$defaultLineHeight: 1 !default;

Description

Default line-height for the entire website

gapSizes

$gapSizes: 0, 4, 8, 16, 32, 64 !default;

Description

Sizes for gap, gap-row, gap-column properties

gutterSizes

$gutterSizes: 0, 4, 8, 16, 32, 64 !default;

Description

Sizes for padding, margin properties

flexOrders

$flexOrders: 1, 2, 3, 4, 5 !default;

Description

Change the visual order of specific flex items with a handful of "order" utilities