Fluid Size

:triangular_ruler::iphone::computer::desktop_computer: A method of fluidly resizing in various devices based on visual angle. (with SASS) :revolving_hearts: :eyes:

Get away from the effects of devices' distance, size, and resolution!!

• Demo(Codepen)
• Demo(Simple ToDo App)

Advantages

Wiki:Comparison

• Easy
• Provides the fit size for each device
• Resized fluidly between each device
• Compatible with include-media

How to Use?

Install

## Yarn
yarn add fluid-size

## NPM
npm install fluid-size

## Github Repository
npm install @black7375/fluid-size

Import

@import '~fluid-size/fluid-size';

Usage

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

tag {
  @include property($size);
}

Example

You can use the regular CSS as it is. There are no restrictions. [Ver 1.5.0 will patch for %, num]

// 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 1% 0 auto);             // with Mixed Value
}

Converted Sample

// Code
body {
  @include font-size(16px);
}

/** Tentative Result
 * INFO
 * Basis Angle: min angle device(Tablet)
 *
 * SIZES
 * Default:            16px;
 * Phone:        about 18.75px;
 * Tablet:       about 16px;
 * Laptop:       about 16.73px;
 * Desktop:      about 17.56px;
 * High-Desktop: about 20.82px;
 */

// Result
body {                       // Default
  font-size: 1rem;
}

@media (min-width: 480px) {  // Phone ~ Tablet
  body {
    font-size: calc(-0.9504790795vw + 1.4567984055rem);
  }
}

@media (min-width: 768px) {  // Tablet ~ Laptop
  body {
    font-size: calc(0.1404102228vw + 0.9331715404rem);
  }
}

@media (min-width: 1280px) { // Laptop ~ Desktop
  body {
    font-size: calc(0.1306874648vw + 0.9409497468rem);
  }
}

@media (min-width: 1920px) { // Desktop ~ High-Desktop, Keep going.
  body {
    font-size: calc(0.5082290299vw + 0.4878998687rem);
  }
}

Options

Wiki:API(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));
}

You can customize resizing method, result's unit, min or max size, ..etc.

Converted Sample

// Code
body {
  @include font-size(16px !important, (unit: px, max: 25px));
}

// Result
body {                       // Default
  font-size: 16px !important;
}

@media (min-width: 480px) {  // Phone ~ Tablet
  body {
    font-size: calc(-0.95048vw + 23.30877px) !important;
  }
}

@media (min-width: 768px) {  // Tablet ~ Laptop
  body {
    font-size: calc(0.14041vw + 14.93074px) !important;
  }
}

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

@media (min-width: 1920px) { // Desktop ~ High-Desktop, Keep going.
  body {
    font-size: calc(0.50823vw + 7.8064px) !important;
  }
}

@media (min-width: 3383px) { // Reach maximum size
  body {
    font-size: 25px !important;
  }
}

Learn More

Wiki:The theory of font size and readability

Principle

Use visual angles to determine the fit size(I called) for each device.

source: Legibility: how to make text convenient to read

Calculation process

1. Size specification
2. Measure the angle to be viewed on the reference device
3. Generate a fit size for each device based on the angle
4. Provides real-time resizing(fluidity) for mid-range devices

Browser Supports

• CSS3 Media Queries
• vw unit(Viewport units)
• calc()

F&A

• CSS decimal place: Are the decimal places in a CSS width respected?