Code Monkey home page Code Monkey logo

unit's Introduction

Unit

Create Responsive dimensions based on aspect ratios [for MUI].
Works with mui emotion system

Usage

unit provides 3 functions (unit, unit.text, unit.dim, unit.scale)
by default unit assumes xxl breakpoint.

unit (for paddings/margins etc (size -> size / 8))

unit(16)
// => 
// {
//     "xs": 1.08,
//     "lg": 1.44,
//     "xl": 1.7,
//     "xxl": 2
// }

unit.text (for fontSizes)

unit.text(16)
// => 
// {
//     "xs": 11.2,
//     "lg": 13.6,
//     "xl": 14.4,
//     "xxl": 16
// }

unit.dim (for width/height (dimensions))

unit.dim(16)
// => 
// {
//     "xs": 8.64,
//     "lg": 11.52,
//     "xl": 13.6,
//     "xxl": 16
// }

unit.scale (for adjusting sizes via transform->scale)

unit.scale()
// =>
// {
//     "transform": {
//         "xs": "scale(0.7)",
//         "lg": "scale(0.8)",
//         "xl": "scale(0.9)",
//         "xxl": "scale(1)"
//     }
// }

unit.scale({ xs: 0.5 , xl: 0.88 })
// =>
// {
//     "transform": {
//         "xs": "scale(0.5)",
//         "lg": "scale(0.8)",
//         "xl": "scale(0.88)",
//         "xxl": "scale(1)"
//     }
// }

Defaults

default ratios for unit and unit.dim

let xsRatio = 0.54;
let lgRatio = 0.72;
let xlRatio = 0.85;

default ratios for unit.text

let xsRatio = 0.7;
let lgRatio = 0.85;
let xlRatio = 0.9;

Types

export type ResponsiveSize = {
  xs?: number;
  md?: number;
  lg?: number;
  xl?: number;
  xxl?: number;
};

Function Parameters/Return Types

Name Parameters Return
unit, unit.dim, unit.text size: number ResponsiveSize
unit.scale ratios: ResponsiveSize { transform: { xs: string; lg: string; xl: string; xxl: string } }

Extending unit

adding custom functions to unit , for example rem for px -> rem

unit.rem = function (size: number): string {
  return size / 16 + "rem";
};

using unit.rem

unit.rem(8) // => "0.5rem"

unit's People

Contributors

amn1729 avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.