Skip to content

API

Jump to bottom
BlaCk_Void edited this page Oct 13, 2020 · 8 revisions

Table of Contents

Basics

Just use the name of the API with @include!!

tag {
  @include property($size);
}

Example

// Only Single Value
body {
  @include font-size(16px);       // Countable Value    => Calculated
  @include text-indent(inherit);  // Uncalculated Value => Passed
}

// List Value
body {
  @include font-size(16px !important);         // with Uncountable Value
  @include text-indent(5em hanging each-line); // with Multiple Uncountable Values
  @include margin(-3px 1em auto);              // with Mixed Value
}

Font

API Arguments
font-size ($size, $max-size or $options)
line-height ǀǀ
text-indent ǀǀ
letter-spacing ǀǀ
word-spacing ǀǀ
tab-size ǀǀ

Box

API Arguments
width ($size, $max-size or $options)
height ǀǀ
border-width ǀǀ
margin ǀǀ
margin-top ǀǀ
margin-bottom ǀǀ
margin-left ǀǀ
margin-right ǀǀ
padding ǀǀ
padding-top ǀǀ
padding-bottom ǀǀ
padding-left ǀǀ
padding-right ǀǀ

Options

Options consist of global and scoped options.

  • Global Option: Setting it as a variable changes the default value of the whole.
  • Scoped Option: It is provided as an argument(map type) to the function, and when used, applies only to the current value.
// Global Option
$option1: value1;
$option2: value2;

// Scoped Option
tag {
  @include property($size, $max-size);
  // or
  @include property($size, (option1: value1, option2: value2));
}
API Description Default Types Global Variable Scoped Key Dependency
mode Resizing method fluid fluid or fit $fls-mode mode None
device Criterion of visual angle min min or max, Device's key $fls-device device None
unit Unit of result each each or Units $fls-unit unit None
min Min size null null or Length $fls-min min
min-size		 None
max Max size null null or Length $fls-max max
max-size		 None
limit A method of limiting the size size size or break $fls-limit limit mode: fluid
max: not null

1) mode

How to resize when the viewport changes.

Dependency

  • None

Types

  • fluid(default): Size changes dynamically. (fluid)
  • fit: Size changes statically. (responsive)

Usage

$fls-mode: fluid; // or fit

body {
  @include font-size(16px, (mode: fluid)); // 16px is 1rem
}

Example

// Set to fluid
@media (min-width: 480px) {
  body {
    font-size: calc(-0.95048vw + 1.4568rem);
  }
}

// Set to fit size
@media (min-width: 480px) {
  body {
    font-size: 1.17165rem;
  }
}

2) device

Device to be criterion of visual angle.

Dependency

  • None

Types

  • min(default): Based on the device that will looks the smallest,
  • max: Based on the device that will looks the largest,
  • Device's key: Key set in map(breakpoints).

Usage

$fls-device: min; // or max, devices's key(Ex. phone, tablet, ...)

body {
  @include font-size(16px, (device: min));
}

Example with mode:fit, unit:px

/** Tentative Result
 * INFO
 * Basis value: 16px
 *
 * Visual Angles - The larger the value, the smaller it looks.
 * Phone:        about 50.5;
 * Tablet:       about 59.2; - min
 * Laptop:       about 56.6;
 * Desktop:      about 53.9;
 * High-Desktop: about 45.5; - max
 */


// Set to min
@media (min-width: 480px) {  // phone
  body {
    font-size: 18.74647px;
  }
}

@media (min-width: 768px) {  // tablet - target
  body {
    font-size: 16.0091px;
  }
}

@media (min-width: 2560px) { // high-desktop
  body {
    font-size: 20.81706px;
  }
}

// Set to max
@media (min-width: 480px) {  // phone
  body {
    font-size: 14.4076px;
  }
}

@media (min-width: 768px) {  // tablet
  body {
    font-size: 12.30379px;
  }
}

@media (min-width: 2560px) { // high-desktop - target
  body {
    font-size: 15.99895px;
  }
}

// Set to phone
@media (min-width: 480px) {  // phone - target
  body {
    font-size: 15.99107px;
  }
}

@media (min-width: 768px) {  // tablet
  body {
    font-size: 13.65604px;
  }
}

@media (min-width: 2560px) { // high-desktop
  body {
    font-size: 17.75732px;
  }
}

3) unit

The units of results can be set.

Dependency

  • None

Types

  • each(default): Font(rem), Box(px);
  • Units: px, pt, em, rem , ...Etc. Please refer to sass-unitconverter.

Usage

$fls-unit: each; // or units(Ex. px, em, rem, ...)

body {
  @include font-size(16px, (unit: each));
}

Example

// Set to each
@media (min-width: 480px) { // Font - rem
  body {
    font-size: calc(-0.95048vw + 1.4568rem);
  }
}

@media (min-width: 480px) { // Box - px
  body {
    margin: calc(-0.1188vw + 2.91331px);
  }
}

// Set to pt
@media (min-width: 480px) {
  body {
    font-size: calc(-0.95048vw + 17.48158pt);
  }
}

@media (min-width: 480px) {
  body {
    margin: calc(-0.1188vw + 2.18498pt);
  }
}

4) min

Limit the minimum size.

Dependency

  • None

Types

  • null(default): Do not limit the size.
  • Length: A number with units. (It should be instantiated.)

Usage

$fls-min: null; // or length(Ex. 20px, 20pt, ...)

body {
  @include font-size(16px, (min: null));
}

Example with mode:fit, unit:px

// Set to null
@media (min-width: 768px) {
  body {
    font-size: 16.0091px;
  }
}

@media (min-width: 1280px) {
  body {
    font-size: 16.728px;
  }
}

@media (min-width: 1920px) {
  body {
    font-size: 17.5644px;
  }
}

// Set to 17px
@media (min-width: 768px) {
  body {
    font-size: 17px;
  }
}

@media (min-width: 1280px) {
  body {
    font-size: 17px;
  }
}

@media (min-width: 1920px) {
  body {
    font-size: 17.5644px;
  }
}

5) max

Limit the maximum size.

Dependency

  • None

Types

  • null(default): Do not limit the size.
  • Length: A number with units. (It should be instantiated.)

Usage

$fls-max: null; // or length(Ex. 20px, 20pt, ...)

body {
  @include font-size(16px, (max: null));
}

Example with mode:fit, unit:px

// Set to null
@media (min-width: 480px) {
  body {
    font-size: 18.74647px;
  }
}

@media (min-width: 768px) {
  body {
    font-size: 16.0091px;
  }
}

@media (min-width: 2560px) {
  body {
    font-size: 20.81706px;
  }
}

// Set to 18px
@media (min-width: 480px) {
  body {
    font-size: 18px;
  }
}

@media (min-width: 768px) {
  body {
    font-size: 16.0091px;
  }
}

@media (min-width: 2560px) {
  body {
    font-size: 18px;
  }
}

6) limit

A method of limiting the size.

Dependency

Types

  • size(default): Limit the size assigned to each brake. (Changing slowly)
  • break: Leave the size assigned to each brake and add a brake point. (Changes rapidly and stops)

If the max is greater than the calculated value, it works the same.

Usage

$fls-limit: size // or break

body {
  @include font-size(16px, (limit: size));
}

Example with unit:px

/** Tentative Result
 * INFO
 * Basis value: 16px
 *
 * SIZES
 * Default:            16px;
 * Phone:        about 18.75px;
 * Tablet:       about 16px;
 * Laptop:       about 16.73px;
 * Desktop:      about 17.56px;
 * High-Desktop: about 20.82px;
 */

// Disabled(max:null)
@media (min-width: 480px) {  // Phone
  body {
    font-size: calc(-0.95048vw + 23.30877px);
  }
}

@media (min-width: 1280px) { // Laptop
  body {
    font-size: calc(0.13069vw + 15.0552px);
  }
}

@media (min-width: 1920px) { // Desktop
  body {
    font-size: calc(0.50823vw + 7.8064px);
  }
}

@media (min-width: 2560px) { // High-Desktop
  // Don't Create
}

// -- Less than the calculated value, max:17px --
// Set to size

@media (min-width: 480px) {  // Phone - Maximum value reflected.
  body {
    font-size: calc(-0.95048vw + 23.30877px);
  }
}

@media (min-width: 1280px) { // Laptop - Desktop limitations were reflected.
  body {
    font-size: calc(0.0425vw + 16.18399px);
  }
}

@media (min-width: 1920px) { // Last limit point
  body {
    font-size: 17px;
  }
}

// Set to break
@media (min-width: 480px) {  // Phone - Replace
  body {
    font-size: 17px;
  }
}

@media (min-width: 664px) { // Add fluid break(size: 17px~16px, break: 664px~tablet)
  body {
    font-size: font-size: calc(-0.95279vw + 23.32655px);
  }
}

@media (min-width: 1280px) { // Laptop - Desktop is a target but does not change.
  body {
    font-size: calc(0.13069vw + 15.0552px);
  }
}

@media (min-width: 1488px) { // Add limit break
  body {
    font-size: 17px;
  }
}

@media (min-width: 1920px) { // Desktop - Replace
  body {
    font-size: 17px;
  }
}

Other Customize

Covers other customizable items.

1) Base Values

sass-unitconverter's options.

  • $root-font-size(16px): Base font size in pixel for converting rem to absolute lengths.
  • $base-font-size($root-font-size): Base font size in pixel for converting em to absolute lengths.

2) Breakpoints

Detailed values of each device.

Width && Height

$phone-width:  480px;
$phone-height: 854px;

$tablet-width:   768px;
$tablet-height: 1024px;

$laptop-width:  1280px;
$laptop-height:  720px;

$desktop-width:  1920px;
$desktop-height: 1080px;

$high-desktop-width:  2560px;
$high-desktop-height: 1440px;

Breakpoints Width && Breakpoints Height

$breakpoints: (        // px
  phone:        $phone-width,
  tablet:       $tablet-width,
  laptop:       $laptop-width,
  desktop:      $desktop-width,
  high-desktop: $high-desktop-width
);

$breakpoints-height: ( // px
  phone:        $phone-height,
  tablet:       $tablet-height,
  laptop:       $laptop-height,
  desktop:      $desktop-height,
  high-desktop: $high-desktop-height
);

Screen Size && Screen Distances

$screen-sizes: (       // inch
  phone:        5,
  tablet:       10.2,
  laptop:       14,
  desktop:      24,
  high-desktop: 27
);

$screen-distances: (   // 10cm
  phone:        3,
  tablet:       4,
  laptop:       5,
  desktop:      6,
  high-desktop: 6
);

Alias

$phone:        $phone-width;
$tablet:       $tablet-width;
$laptop:       $laptop-width;
$desktop:      $desktop-width;
$high-desktop: $high-desktop-width;
Clone this wiki locally