API

Table of Contents

• Basics
• Font
• Box
• Options
  • 1) mode
  • 2) device
  • 3) unit
  • 4) min
  • 5) max
  • 6) limit
• Other Customize
  • 1) Base Values
  • 2) Breakpoints

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

• Options:mode is fluid.
• Options:max is not null.

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;