General
functions
tipo-strip-unit
@function tipo-strip-unit($tipo-number) { ... }Description
Remove unit of a value
Parameters
| parameterName | parameterDescription | parameterType | parameterDefault value |
|---|---|---|---|
$tipo-number | variable (with or without unit) | Number | —none |
Returns
Number —variable without unit.
tipo-em
@function tipo-em($tipo-px, $tipo-context: $tipo-fs0) { ... }Description
Convert pixels to ems
Parameters
| parameterName | parameterDescription | parameterType | parameterDefault value |
|---|---|---|---|
$tipo-px | size in pixels | Number (px) | —none |
$tipo-context | context in pixels | Number (px) | $tipo-fs0 |
Returns
Number (em) —value in em
tipo-pt
@function tipo-pt($tipo-px) { ... }Description
Convert pixels to points
Parameters
| parameterName | parameterDescription | parameterType | parameterDefault value |
|---|---|---|---|
$tipo-px | size in pixels | Number (px) | —none |
Returns
Number (pt) —value in pt.
tipo-rem
@function tipo-rem($tipo-px) { ... }Description
Convert pixels to rems
Parameters
| parameterName | parameterDescription | parameterType | parameterDefault value |
|---|---|---|---|
$tipo-px | size in pixels | Number (px) | —none |
Returns
Number (rem) —value in rem
tipo-pourcent
@function tipo-pourcent($tipo-px, $tipo-context: $tipo-fs0) { ... }Description
Convert pixels to percentages
Parameters
| parameterName | parameterDescription | parameterType | parameterDefault value |
|---|---|---|---|
$tipo-px | size in pixels | | —none |
$tipo-context | context in pixels | | $tipo-fs0 |
Returns
Number (%) —value in %
tipo-size
@function tipo-size($tipo-px, $tipo-unit: $tipo-default-unit, $tipo-context: $tipo-fs0) { ... }Description
Size calculation in the choosen unit
Parameters
| parameterName | parameterDescription | parameterType | parameterDefault value |
|---|---|---|---|
$tipo-px | size in pixels | Number (px) | —none |
$tipo-unit | choosen unit | String | $tipo-default-unit |
$tipo-context | context in pixels | Number (px) | $tipo-fs0 |
Returns
Number (unit) —Size in em, rem, pt, % or px depending on $tipo-unit
tipo-lines
@function tipo-lines($tipo-font-size, $tipo-line-height) { ... }Description
Number of line calculation
Parameters
| parameterName | parameterDescription | parameterType | parameterDefault value |
|---|---|---|---|
$tipo-font-size | size in | Number (px) | —none |
$tipo-line-height | line height | Number (px) | —none |
Returns
Number —number of line needed by the font size
tipo-scale
@function tipo-scale($tipo-level: 0) { ... }Description
Get a size from the typographic scale
Parameters
| parameterName | parameterDescription | parameterType | parameterDefault value |
|---|---|---|---|
$tipo-level | level of typographic scale asked | Number | 0 |
Returns
Number (px) —size in px
tipo-uniq
@function tipo-uniq($list) { ... }Description
Remove duplicated entries in a list
Parameters
| parameterName | parameterDescription | parameterType | parameterDefault value |
|---|---|---|---|
$list | a list | List | —none |
Returns
List —list whitout duplicated entry
tipo-sort
@function tipo-sort($list) { ... }Description
Sort a list (of number)
Parameters
| parameterName | parameterDescription | parameterType | parameterDefault value |
|---|---|---|---|
$list | list to sort | List | —none |
Returns
List —sorted list
mixins
tipo
@mixin tipo($tipo-fs, $tipo-unit: $tipo-default-unit, $tipo-context: $tipo-fs0) { ... }Description
Font size and line height on the vertical rythm
Parameters
| parameterName | parameterDescription | parameterType | parameterDefault value |
|---|---|---|---|
$tipo-fs | font-size in pixels | Number (px) | —none |
$tipo-unit | unit of return font-size | String | $tipo-default-unit |
$tipo-context | needed for | Number (px) | $tipo-fs0 |
variables
tipo-amplitude
$tipo-amplitude: 10 !default;Description
Range of typographic scale
tipo-default-unit
$tipo-default-unit: 'rem' !default;Description
Unit of reference in the project
Type
String
tipo-bfs
$tipo-bfs: 16px !default;Description
Base font size on the <body> element
Type
Number (unit)
tipo-fs0
$tipo-fs0: $tipo-bfs !default;Description
Curent font-size = base font-size by default
Type
Number (unit)
tipo-ratios
$tipo-ratios: (
double-octave: 1/4, // 0.25
major-twelfth: 1/3, // 0.3333
major-eleventh: 3/8, // 0.375
major-tenth: 2/5, // 0.4
octave: 1/2, // 0.5
major-seventh: 8/15, // 0.5333
minor-seventh: 9/16, // 0.5625
major-sixth: 3/5, // 0.6
golden: 1/1.618, // 0.6180
minor-sixth: 5/8, // 0.625
fifth: 2/3, // 0.6666
augmented-fourth: 1/1.4142135, // 0.7071 (1/√2)
fourth: 3/4, // 0.75
major-third: 4/5, // 0.8
minor-third: 5/6, // 0.8333
major-second: 8/9, // 0.8888
minor-second: 15/16, // 0.9375
prime: 1/1 // 1
) !default;Description
Ratio based on musical intervals used for calculate typographic scale.
Type
Map
tipo-lh
$tipo-lh: round($tipo-fs0 / map-get($tipo-ratios, fifth)) !default;Description
Line height
Type
Number (unit)
tipo-ratio
$tipo-ratio: map-get($tipo-ratios, fifth) !default;Description
Ratio choosen for calculate typographic scale
Type
Number
tipo-number1
$tipo-number1: $tipo-fs0 * 1 !default;Description
First important number
Type
Number (unit)
tipo-number2
$tipo-number2: $tipo-fs0 * 2 !default;Description
Second important number
Type
Number (unit)
tipo-offset
$tipo-offset: 0 !default;Description
Inital offset on the typographic scale
Type
Number