debug

mixins

debug-vertical-alignment

@mixin debug-vertical-alignment($color: $bompasteque2-debug) { ... }

Description

Debug vertical rhythm

Parameters

NameDescriptionTypeDefault value
$color—Color$bompasteque2-debug

Requires

Links

Author

  • Compass

typography

mixins

adjust-font-size-to

@mixin adjust-font-size-to($to, $map: null) { ... }

Description

Adjust a block to have a different font size and line height to maintain the rhythm.

Parameters

NameDescriptionTypeDefault value
$to—Number—
$map—Map or Nullnull

Requires

Author

  • Aziz Da

leader

@mixin leader($property: "margin", $map: null) { ... }

Description

Apply leading whitespace. The $property can be margin or padding.

Parameters

NameDescriptionTypeDefault value
$property—String"margin"
$map—Map or Nullnull

Requires

Used by

Author

  • Aziz Da

trailer

@mixin trailer($property: "margin", $map: null) { ... }

Description

Apply trailing whitespace. The $property can be margin or padding.

Parameters

NameDescriptionTypeDefault value
$property—String"margin"
$map—Map or Nullnull

Requires

Used by

Author

  • Aziz Da

rhythm

@mixin rhythm($map: null) { ... }

Description

Shorthand mixin to apply whitespace for top and bottom margins and padding.

Parameters

NameDescriptionTypeDefault value
$map—Map or Nullnull

Used by

Author

  • Aziz Da

establish-baseline

@mixin establish-baseline() { ... }

Description

Establishes a font baseline for the given font-size. relative font sizing: true http://caniuse.com/#feat=rem

Parameters

None.

Requires

Links

Author

  • Compass

adjust-leading-to

@mixin adjust-leading-to($lines, $from: null) { ... }

Description

Adjust a block to have different line height to maintain the rhythm.

Parameters

NameDescriptionTypeDefault value
$lines—Number—
$from—Null or Numbernull

Requires

Links

Author

  • Compass

padding-leader

@mixin padding-leader($map: null) { ... }

Description

Apply leading whitespace as padding.

Parameters

NameDescriptionTypeDefault value
$map—Map or Nullnull

Requires

Links

Author

  • Compass

margin-leader

@mixin margin-leader($map: null) { ... }

Description

Apply leading whitespace as margin.

Parameters

NameDescriptionTypeDefault value
$map—Map or Nullnull

Requires

Links

Author

  • Compass

padding-trailer

@mixin padding-trailer($map: null) { ... }

Description

Apply trailing whitespace as padding.

Parameters

NameDescriptionTypeDefault value
$map—Map or Nullnull

Requires

Links

Author

  • Compass

margin-trailer

@mixin margin-trailer($map: null) { ... }

Description

Apply trailing whitespace as margin.

Parameters

NameDescriptionTypeDefault value
$map—Map or Nullnull

Requires

Links

Author

  • Compass

rhythm-margin

@mixin rhythm-margin($map: null) { ... }

Description

Shorthand mixin to apply whitespace for top and bottom margins.

Parameters

NameDescriptionTypeDefault value
$map—Map or Nullnull

Requires

Links

Author

  • Compass

rhythm-padding

@mixin rhythm-padding($map: null) { ... }

Description

Shorthand mixin to apply whitespace for top and bottom padding.

Parameters

NameDescriptionTypeDefault value
$map—Map or Nullnull

Requires

Links

Author

  • Compass

[private] apply-side-rhythm-border

@mixin apply-side-rhythm-border($side, $lines: 1, $minus: $border-width-global, $style: $border-style-global, $color: $border-color-global, $from: null) { ... }

Description

Apply a border and whitespace to any side without destroying the vertical rhythm. The whitespace must be greater than the width of the border.

Parameters

NameDescriptionTypeDefault value
$side—String—
$lines—Number1
$minus—Number$border-width-global
$style—String$border-style-global
$color—Color$border-color-global
$from—Null or Numbernull

Requires

Used by

Links

Author

  • Compass

leading-border

@mixin leading-border($map: null) { ... }

Description

Apply a leading border.

Parameters

NameDescriptionTypeDefault value
$map—Map or Nullnull

Requires

Links

Author

  • Compass

trailing-border

@mixin trailing-border($map: null) { ... }

Description

Apply a trailing border.

Parameters

NameDescriptionTypeDefault value
$map—Map or Nullnull

Requires

Links

Author

  • Compass

horizontal-border

@mixin horizontal-border($map: null) { ... }

Description

Apply both leading and trailing borders.

Parameters

NameDescriptionTypeDefault value
$map—Map or Nullnull

Requires

Links

Author

  • Compass

rhythm-border

@mixin rhythm-border($map: null) { ... }

Description

Apply borders and whitespace equally to all sides.

Parameters

NameDescriptionTypeDefault value
$map—Map or Nullnull

Requires

Links

Author

  • Compass

text-on-baseline

@mixin text-on-baseline($to, $adjust, $map: null) { ... }

Description

Move text downwards

Parameters

NameDescriptionTypeDefault value
$to—Number—
$adjust—String—
$map—Map or Nullnull

Requires

Links

Author

  • Aziz Da

component-on-baseline

@mixin component-on-baseline($to, $adjust, $map: null) { ... }

Description

Block alignment on baseline

Parameters

NameDescriptionTypeDefault value
$to—Number—
$adjust—String—
$map—Map or Nullnull

Requires

Links

Author

  • Aziz Da

above

@mixin above($to, $adjust, $lines: 0, $property: "padding", $from: null, $at: 1) { ... }

Description

Add leading whitespace to adjust to baseline

Parameters

NameDescriptionTypeDefault value
$to—Number—
$adjust—String—
$lines—Number0
$property—String"padding"
$from—Null or Numbernull
$at—Number or String1

Requires

Links

Author

  • Aziz Da

below

@mixin below($to, $adjust, $lines: 0, $property: "margin", $from: null, $at: 1) { ... }

Description

Add trailing whitespace to adjust to baseline

Parameters

NameDescriptionTypeDefault value
$to—Number—
$adjust—String—
$lines—Number0
$property—String"margin"
$from—Null or Numbernull
$at—Number or String1

Requires

Links

Author

  • Aziz Da

functions

rhythm

@function rhythm($lines: 1, $minus: 0px, $from: null) { ... }

Description

Calculate rhythm units.

Parameters

NameDescriptionTypeDefault value
$lines—Number1
$minus—Number0px
$from—Null or Numbernull

Returns

Number —

Rhythm

Example

rhythm(1) => 8px;
rhythm(4) => 32px;

Requires

Used by

Links

Author

  • Compass

[private] lines-for

@function lines-for($from) { ... }

Description

Calculate the minimum multiple of rhythm units needed to contain the font-size.

Parameters

NameDescriptionTypeDefault value
$from—Number—

Returns

Number —

Lines

Example

lines-for(16px) => 4
lines-for(33px) => 6

Requires

Used by

Links

Author

  • Compass

[private] shift-for

@function shift-for($to, $adjust, $lines: 1, $from: null) { ... }

Description

Calculate shift value.

Parameters

NameDescriptionTypeDefault value
$to—Number—
$adjust—Number—
$lines—Number1
$from—Null or Numbernull

Returns

Number —

Shift value

Example

$fonteque2: ("body": ("family": "Open Sans", sans-serif, "size": 100px, "weight": 400, "style": normal, "cap-height": 0.72));
shift-for(16px, 0.72em, 4, null) => 0.64rem;

Requires

Used by

Links

Author

  • Aziz Da

General

mixins

bompasteque2-add

@mixin bompasteque2-add($map: $bpt2-global) { ... }

Description

Check bompasteque2 variables

Parameters

NameDescriptionTypeDefault value
$map—Map$bpt2-global

Requires

Author

  • Aziz Da

variables

[private] CONSTANT

$CONSTANT: ("BROWSER_DEFAULT_FONT_SIZE": 16px, "LINE_UNIT": 8px, "LINE_MULTI": 4) !global;

Description

Constants map

Type

Map

Map structure

NameDescriptionTypeValue
"BROWSER_DEFAULT_FONT_SIZE"

Default font-size for all browsers

Number16px
"LINE_UNIT"

The unit of vertical rhythm

Number8px
"LINE_MULTI"

The multiplication factor used to define the distance between text baselines

Number4

Used by

Links

Author

  • Hugo Giraudel

unit-global

$unit-global: "rem" !default;

Description

The length unit in which to output rhythm values. Supported values: px, rem. Percent units can't be used since they make calculating padding and margins impractical, and percentage borders are not valid or supported in css.

Type

String

Used by

Links

Author

  • Compass

border-width-global

$border-width-global: 1px !default;

Description

Default values for rhythm borders width.

Type

Number

Used by

Links

Author

  • Compass

border-style-global

$border-style-global: solid !default;

Description

Default values for rhythm borders style.

Type

String

Used by

Links

Author

  • Compass

border-color-global

$border-color-global: #CCCCCC !default;

Description

Default values for rhythm borders color.

Type

Color

Used by

Author

  • Aziz Da

fonteque2

$fonteque2: () !global;

Description

Fonts map

Type

Map

Used by

Author

  • Aziz Da

[private] ms-base

$ms-base: const("BROWSER_DEFAULT_FONT_SIZE");

Description

modularscale-sass base

Type

Number

Used by

Links

Author

  • modularscale-sass

[private] ms-ratio

$ms-ratio: $fourth;

Description

modularscale-sass ratio

Type

Number

Used by

Links

Author

  • modularscale-sass

[private] modularscale

$modularscale: ("base": $ms-base, "ratio": $ms-ratio) !global;

Description

modularscale-sass configuration

Type

Map

Used by

Links

Author

  • modularscale-sass

bpt2-global

$bpt2-global: () !default;

Description

Global bompasteque2 configuration Map

Type

Map

Author

  • Aziz Da

bompasteque2-debug

$bompasteque2-debug: #FF0000 !default;

Description

bompasteque2 debug color

Type

Color or Null

Author

  • Aziz Da

unit

mixins

rem

@mixin rem($css) { ... }

Description

Output a given style rule containing rem values along with an (optional) fallback rule for older browsers (with rem values converted to px).

Parameters

NameDescriptionTypeDefault value
$css

map of css properties and values.

Map—

Author

  • Aziz Da

functions

convert-length

@function convert-length($length, $to-unit, $from: null) { ... }

Description

Convert any CSS length or percentage value to any another.

Parameters

NameDescriptionTypeDefault value
$length

A css length or percentage value

Number—
$to-unit

String matching a css unit keyword, e.g. 'em', '%', etc.

String—
$from

When converting from relative units, the absolute length (in px) to which $length refers (e.g. for $lengths in em units, would normally be the font-size of the current element).

Null or Numbernull

Returns

Number —

Converted length

Example

convert-length(19px, "rem") => 1.1875rem;

Requires

Used by

Links

Author

  • Compass

[private] rem-fallback

@function rem-fallback($value) { ... }

Description

Get the px/rem versions of a value.

Parameters

NameDescriptionTypeDefault value
$value—Number—

Returns

Map —

See example below

Example

rem-fallback(19px) => (px: 19px, rem: 1.1875rem);

Requires

Used by

Links

Author

  • Compass

[private] list-rem-fallback

@function list-rem-fallback($value) { ... }

Description

Get the px/rem versions of a list (or nested lists).

Parameters

NameDescriptionTypeDefault value
$value—List or Number—

Returns

Map —

See example below

Example

$list: 19px, 21px;
list-rem-fallback($list) => (px: 19px, 21px, rem: 1.1875rem, 1.3125rem);

Requires

Links

Author

  • Compass

util

functions

[private] ms-key

@function ms-key($key: 1, $pattern: $modularscale) { ... }

Description

Returns if modularscale config map has key

Parameters

NameDescriptionTypeDefault value
$key—Number or String1
$pattern—Map$modularscale

Returns

Null or String —

modularscale-sass configuration map key

Example

$modularscale: ("base": 12px, "ratio": 1.333, "640px": ("base": 14px, "ratio": 1.414));
ms-key(1) => null;
$modularscale: ("base": 12px, "ratio": 1.333, "640px": ("base": 14px, "ratio": 1.414));
ms-key(2) => "640px";

Used by

Author

  • Aziz Da

[private] ms-get

@function ms-get($key: 1, $pattern: $modularscale) { ... }

Description

Returns the correct pattern for modularscale

Parameters

NameDescriptionTypeDefault value
$key—Number or String1
$pattern—Map$modularscale

Returns

Map —

modularscale-sass configuration map

Example

$modularscale: ("base": 12px, "ratio": 1.333, "640px": ("base": 14px, "ratio": 1.414));
ms-get(2) => ("base": 14px, "ratio": 1.414);
$modularscale: ("base": 12px, "ratio": 1.333, "640px": ("base": 14px, "ratio": 1.414));
ms-get(1) => ("base": 12px, "ratio": 1.333, "640px": ("base": 14px, "ratio": 1.414));

Requires

Used by

Author

  • Aziz Da

mixins

fonteque2-get

@mixin fonteque2-get($key: null, $map: null) { ... }

Parameters

NameDescriptionTypeDefault value
$key—Null or Stringnull
$map—Map or Nullnull

Requires

Author

  • Aziz Da

vendor

functions

const

@function const($key) { ... }

Description

Constant getter

Parameters

NameDescriptionTypeDefault value
$key

Key of constant to get

String—

Returns

Any type —

Const

Example

$CONSTANT: ("BROWSER_DEFAULT_FONT_SIZE": 16px);
const("BROWSER_DEFAULT_FONT_SIZE") => 16px;

Throws

  • Unknown constant #{$key}.

Requires

Used by

Links

Author

  • Hugo Giraudel

[private] map-extend

@function map-extend($map, $maps..., $deep) { ... }

Description

jQuery-style extend function About map-merge():

  • only takes 2 arguments
  • is not recursive

Parameters

NameDescriptionTypeDefault value
$map

First map

Map—
$maps

Other maps

Arglist—
$deep

Recursive mode

Bool—

Returns

Map

Example

$grid-configuration-default: ("columns": 12, "layouts": ("small": 800px, "medium": 1000px, "large": 1200px));
$grid-configuration-custom: ("layouts": ("large": 1300px, "huge": 1500px));
$grid-configuration-user: ("direction": "ltr", "columns": 16, "layouts": ("large": 1300px, "huge": 1500px));
$grid-configuration: map-extend($grid-configuration-default, $grid-configuration-custom, $grid-configuration-user, false);
=> ("columns": 16, "layouts": (("large": 1300px, "huge": 1500px)), "direction": "ltr")
$grid-configuration: map-extend($grid-configuration-default, $grid-configuration-custom, $grid-configuration-user, true);
=> ("columns": 16, "layouts": (("small": 800px, "medium": 1000px, "large": 1300px, "huge": 1500px)), "direction": "ltr");

Used by

Links

Author

  • Hugo Giraudel