shila-css

2.1 #tools.core tools.core

Contains core framework Sass functions that can be used in settings. This should be the first file imported from shila-css.

Source: partials/tools/_tools.core.scss, line 5

2.1.1 #tools.core.shila-breakpoint shila-breakpoint

@function shila-breakpoint($breakpoint)

Shorthand for map-get($shila-breakpoints, $breakpoint).

Parameters:

$breakpoint

Breakpoint key.

Source: partials/tools/_tools.core.scss, line 67

2.1.2 #tools.core.shila-line-height shila-line-height

@function shila-line-height($px, $breakpoint: "default", $map: $shila-base-font-sizes)

Returns a unitless line height based on the size provided in pixels and other possible provided parameters.

Parameters:

$px

Size in pixels.
$breakpoint

(Optional.) Breakpoint key in the provided or default $map.
$map

(Optional.) Sass map containing font sizes keyed by breakpoints.

Source: partials/tools/_tools.core.scss, line 37

2.1.3 #tools.core.shila-px-to-rem shila-px-to-rem

@function shila-px-to-rem($px, $breakpoint: "default")

Returns the rem equivalent of the size provided in pixels, in the optionally provided breakpoint.

Parameters:

$px

Size in pixels.
$breakpoint

(Optional.) Breakpoint key in $shila-base-font-sizes.

Source: partials/tools/_tools.core.scss, line 16

2.1.4 #tools.core.shila-shade shila-shade

@function shila-shade($color, $percent)

Mixes a color with black.

Parameters:

$color

Color.
$percent

The amount of black to be mixed in.

Source: partials/tools/_tools.core.scss, line 87

2.1.5 #tools.core.shila-tint shila-tint

@function shila-tint($color, $percent)

Mixes a color with white.

Parameters:

$color

Color.
$percent

The amount of white to be mixed in.

Source: partials/tools/_tools.core.scss, line 108

2.2 #tools.clearfix tools.clearfix

Source: partials/tools/_tools.clearfix.scss, line 5

2.2.1 #tools.clearfix.shila-clearfix shila-clearfix

@mixin shila-clearfix

Traditional clearfix.

Source: partials/tools/_tools.clearfix.scss, line 10

2.3 #tools.font-size tools.font-size

Contains mixins related to font sizes.

Source: partials/tools/_tools.font-size.scss, line 5

2.3.1 #tools.font-size.shila-breakpoint-font-size shila-breakpoint-font-size

@mixin shila-breakpoint-font-size($breakpoint, $font-sizes, $line-heights: (), $rem: true)

Sets the font size and/or optionally the line height for the provided breakpoint if found in the provided Sass map(s). If the font size is in pixels, it will be converted to rem unless the optional $rem parameter is set to false.

Parameters:

$breakpoint

Breakpoint key to use with the provided Sass map(s).
$font-sizes

Sass map containing font sizes keyed by breakpoints.
$line-heights

(Optional.) Sass map containing line heights keyed by breakpoints.
$rem

(Optional.) Boolean indicating whether a px value should be converted to rem.

Source: partials/tools/_tools.font-size.scss, line 12

2.3.2 #tools.font-size.shila-responsive-font-sizes shila-responsive-font-size

@mixin shila-responsive-font-size($font-sizes, $line-heights: (), $rem: true)

Sets font sizes and/or optionally line heights for all breakpoints found in the provided Sass map(s). If font sizes are in pixels, they will be converted to rem unless the optional $rem parameter is set to false.

Parameters:

$font-sizes

Sass map containing font sizes keyed by breakpoints.
$line-heights

(Optional.) Sass map containing line heights keyed by breakpoints.
$rem

(Optional.) Boolean indicating whether a px value should be converted to rem.

Source: partials/tools/_tools.font-size.scss, line 46

2.3.3 #tools.font-size.shorthands Shorthands

Source: partials/tools/_tools.font-size.scss, line 76

2.3.3.1 #tools.font-size.shorthands.shila-h1-font-size shila-h1-font-size

@mixin shila-h1-font-size

Shorthand for shila-responsive-font-size($shila-h1-font-sizes, $shila-h1-line-heights).

Source: partials/tools/_tools.font-size.scss, line 81

2.3.3.2 #tools.font-size.shorthands.shila-h2-font-size shila-h2-font-size

@mixin shila-h2-font-size

Shorthand for shila-responsive-font-size($shila-h2-font-sizes, $shila-h2-line-heights).

Source: partials/tools/_tools.font-size.scss, line 94

2.3.3.3 #tools.font-size.shorthands.shila-h3-font-size shila-h3-font-size

@mixin shila-h3-font-size

Shorthand for shila-responsive-font-size($shila-h3-font-sizes, $shila-h3-line-heights).

Source: partials/tools/_tools.font-size.scss, line 107

2.3.3.4 #tools.font-size.shorthands.shila-h4-font-size shila-h4-font-size

@mixin shila-h4-font-size

Shorthand for shila-responsive-font-size($shila-h4-font-sizes, $shila-h4-line-heights).

Source: partials/tools/_tools.font-size.scss, line 120

2.3.3.5 #tools.font-size.shorthands.shila-h5-font-size shila-h5-font-size

@mixin shila-h5-font-size

Shorthand for shila-responsive-font-size($shila-h5-font-sizes, $shila-h5-line-heights).

Source: partials/tools/_tools.font-size.scss, line 133

2.3.3.6 #tools.font-size.shorthands.shila-h6-font-size shila-h6-font-size

@mixin shila-h6-font-size

Shorthand for shila-responsive-font-size($shila-h6-font-sizes, $shila-h6-line-heights).

Source: partials/tools/_tools.font-size.scss, line 146

2.4 #tools.hidden tools.hidden

Source: partials/tools/_tools.hidden.scss, line 5

2.4.1 #tools.hidden.shila-hide-text shila-hide-text

@mixin shila-hide-text

Hides text in an element so you can see the background.

Source: partials/tools/_tools.hidden.scss, line 10

2.4.2 #tools.hidden.shila-hide-visually shila-hide-visually

@mixin shila-hide-visually

Hides an element visually.

Source: partials/tools/_tools.hidden.scss, line 24

2.5 #tools.hover tools.hover

Source: partials/tools/_tools.hover.scss, line 5

2.6 #tools.layout tools.layout

Source: partials/tools/_tools.layout.scss, line 5

2.6.1 #tools.layout.shila-css-grid-multicol-layout shila-css-grid-multicol-layout

@mixin shila-css-grid-multicol-layout($columns, $column-gap: null, $row-gap: null)

Defines a CSS grid based multi-column layout. Percentage based widths are used to ensure equal width columns.

Parameters:

$columns

Number of columns.
$column-gap

(Optional.) Column gap.
$row-gap

(Optional.) Row gap.

Source: partials/tools/_tools.layout.scss, line 147

2.6.2 #tools.layout.shila-flexbox-multicol-layout shila-flexbox-multicol-layout

@mixin shila-flexbox-multicol-layout($columns, $column-gap: null, $row-gap: null)

Defines a flexbox based multi-column layout. Calculations are based on 99.99% width to avoid undesired rounding in Microsoft IE / Edge browsers.

Parameters:

$columns

Number of columns.
$column-gap

(Optional.) Column gap.
$row-gap

(Optional.) Row gap.

Source: partials/tools/_tools.layout.scss, line 110

2.6.3 #tools.layout.shila-multicol-layout shila-multicol-breakpoint-layout

@mixin shila-multicol-breakpoint-layout(
  $columns: ("s": 2, "m": 3, "l": 4),
  $column-gaps: ("s": $shila-base-spacing, "m": $shila-base-spacing, "l": $shila-base-spacing),
  $row-gaps: (),
  $type: "flexbox"
)

Defines CSS multi-column layouts for different breakpoints.

Parameters:

$columns

Sass map with columns keyed by breakpoints.
$column-gaps

Sass map with column gaps keyed by breakpoints.
$row-gaps

Sass map with row gaps keyed by breakpoints.
$type

"flexbox" (default value) or "css-grid".

Source: partials/tools/_tools.layout.scss, line 176

2.6.4 #tools.layout.shila-outer-container shila-outer-container

@mixin shila-outer-container($max-width: $shila-max-page-width)

Sets a maximum width with auto side margins.

Parameters:

$max-width

(Optional.) Maximum width.

Source: partials/tools/_tools.layout.scss, line 95

2.6.5 #tools.layout.shila-responsive-side-margins Deprecated: shila-responsive-side-margins

Will be removed in the next major release. Use shila-responsive-side-spacings instead.

@mixin shila-responsive-side-margins

Sets side margins for different breakpoints using the provided or default values.

Parameters:

$margins

(Optional.) Sass map with margins keyed by breakpoints.

Source: partials/tools/_tools.layout.scss, line 77

2.6.6 #tools.layout.shila-responsive-side-spacings shila-responsive-side-spacings

@mixin shila-responsive-side-spacings

Sets side margins and padding for different breakpoints using the provided or default values.

Parameters:

$margins

(Optional.) Sass map with margins keyed by breakpoints.
$paddings

(Optional.) Sass map with paddings keyed by breakpoints.

Source: partials/tools/_tools.layout.scss, line 40

2.6.7 #tools.layout.shila-side-margins shila-side-margins

@mixin shila-side-margins($margin: $shila-base-spacing)

Sets the left and right margins.

Parameters:

$margin

(Optional.) Margin to set.

Source: partials/tools/_tools.layout.scss, line 10

2.6.8 #tools.layout.shila-side-paddings shila-side-paddings

@mixin shila-side-paddings($padding: $shila-base-spacing)

Sets left and right padding.

Parameters:

$padding

(Optional.) Padding to set.

Source: partials/tools/_tools.layout.scss, line 25

2.7 #tools.links tools.links

2.7.1 #tools.links.shila-hover-color shila-hover-color

@mixin shila-hover-color($color: $shila-action-color, $hover-color: shila-shade($color, 25%))

Transitions the color of the element on hover.

Parameters:

$color

(Optional.) The default color for the element.
$hover-color

(Optional.) The color for the element when hovered on.

Source: partials/tools/_tools.hover.scss, line 10

2.7.2 #tools.links.shila-hover-shade shila-hover-underline

@mixin shila-hover-underline

Underline the element when hovered on.

Parameters:

$color

(Optional.) Underline color.

Source: partials/tools/_tools.hover.scss, line 29

2.8 #tools.lists tools.lists

Source: partials/tools/_tools.lists.scss, line 5

2.8.1 #tools.lists.shila-flexbox-list shila-flexbox-list

@mixin shila-flexbox-list($spacing: $shila-small-spacing, $reset: true)

Defines a horizontal list using Flexbox.

Parameters:

$spacing

(Optional.) Spacing between list items.
$reset

(Optional.) Boolean indicating whether to reset the list or not.

Source: partials/tools/_tools.lists.scss, line 78

2.8.2 #tools.lists.shila-horizontal-nav shila-horizontal-nav

@mixin shila-horizontal-nav(
  $spacing: $shila-small-spacing,
  $color: $shila-medium-gray,
  $active-color: $shila-dark-gray
)

Defines a horizontal navigation element based on a list of links.

Parameters:

$spacing

(Optional.) Spacing between list items.
$reset

(Optional.) Boolean indicating whether to reset the list or not.

Source: partials/tools/_tools.lists.scss, line 107

2.8.3 #tools.lists.shila-inline-list shila-inline-list

@mixin shila-inline-list($spacing: $shila-small-spacing, $reset: true)

Defines a horizontal list, with list items as inline blocks.

Parameters:

$spacing

(Optional.) Spacing between list items.
$reset

(Optional.) Boolean indicating whether to reset the list or not.

Source: partials/tools/_tools.lists.scss, line 52

2.8.4 #tools.lists.shila-no-bullet shila-no-bullet

@mixin shila-no-bullet

Removes the list style and margin from a list item.

Source: partials/tools/_tools.lists.scss, line 10

2.8.5 #tools.lists.shila-no-bullets shila-no-bullets

@mixin shila-no-bullets

Removes the list style and margin from a list.

Source: partials/tools/_tools.lists.scss, line 24

2.8.6 #tools.lists.shila-reset-list shila-reset-list

@mixin shila-reset-list

Resets a list's box model measurements and removes the list style.

Source: partials/tools/_tools.lists.scss, line 39

2.9 #tools.ratio tools.ratio

Source: partials/tools/_tools.ratio.scss, line 5

2.9.1 #tools.ratio.shila-intrinsic-ratio shila-intrinsic-ratio

@mixin shila-intrinsic-ratio($ratio, $fit: null, $selector: "> :first-child")

Sets a fixed ratio for a child element. Supports different ways to fit the content. The default is to scale both width and height so all content is visible, but might be distorted. The optional $fit parameter can be used to scale the content in only one dimension, possible overflow is hidden.

Parameters: