1.0.0 • Published 1 year ago

@rabiepenpm/quod-non-hic v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

@rabiepenpm/quod-non-hic

Simply Builder Module - Convert Pixels, Points, and Ems to Rem

The toRem function is a utility for converting length units (px, em, pt) to rem units in JavaScript.
This conversion is particularly useful for responsive web design, where rem units provide scalability and flexibility. The module simplifies the process of ensuring that elements scale proportionally across different screen sizes by leveraging the rem unit, which is based on the root element's font size.

SimplyBuilder SimplyBuilder SimplyBuilder - sb-module-to-rem GitHub License

GitHub package.json dynamic GitHub Release Test with Node.js

npm - @rabiepenpm/quod-non-hic yarn - @rabiepenpm/quod-non-hic

Open in StackBlitz

Table of Contents

Features

(go to top)

  • Multiple Units: Converts px, em, and pt units to rem.
  • Customizable Precision: Allows specifying the number of decimal places in the returned value.
  • Error Handling: Returns the original value for unrecognized units and logs a warning.

Installation

(go to top)
To install the toRem function, use the following npm command:

  • from GitHub (npm/yarn):
npm install --save-dev git+https://github.com/rabiepenpm/quod-non-hic.git
yarn add --dev git+https://github.com/rabiepenpm/quod-non-hic.git
  • from npm (npm/yarn):
npm install --save-dev @rabiepenpm/quod-non-hic
yarn add --dev @rabiepenpm/quod-non-hic

!NOTE This will add the toRem module as a development dependency in your project.

  • CDN:
https://unpkg.com/@rabiepenpm/quod-non-hic@latest/src/main.js

https://cdn.jsdelivr.net/gh/rabiepenpm/quod-non-hic@latest/src/main.min.js

Usage

(go to top)
Once installed, you can import the toRem function into your JavaScript project like so:

  • from install (npm/yarn):
import { toRem } from '@rabiepenpm/quod-non-hic';

  • from cdn (html):
<script type="module">
import { toRem } from 'https://unpkg.com/@rabiepenpm/quod-non-hic@latest/src/main.js';
// code
</script>

or

<script type="module">
import { toRem } from 'https://cdn.jsdelivr.net/gh/rabiepenpm/quod-non-hic@latest/src/main.min.js';
// code
</script>

Now you can use the function in your project to convert length units to rem.

Basic Conversion

(go to top)
Convert a length from pixels to rem:

const lengthInRem = toRem("24px");
console.log(lengthInRem); // Output: "1.5rem"

Specifying Decimal Places

(go to top)
You can specify the number of decimal places in the returned value:

const preciseLengthInRem = toRem("18px", 2);
console.log(preciseLengthInRem); // Output: "1.12rem"

Handling Other Units

(go to top)
Convert lengths from em or pt to rem:

const lengthFromEm = toRem("2em");
console.log(lengthFromEm); // Output based on default base of 16px for 1em

const lengthFromPt = toRem("12pt");
console.log(lengthFromPt); // Output based on conversion factor from pt to px to rem

Unrecognized Units

(go to top)
For unrecognized units, the original value is returned:

const unchangedLength = toRem("5vw");
console.log(unchangedLength); // Output: "5vw"

License

(go to top)

Released under MIT by @jamilservicos. (go to top)

  • You can freely modify and reuse.
  • The original license must be included with copies of this software.
  • Please link back to this repo if you use a significant portion the source code.

👩‍💻💻 Technologies

(go to top)

JavaScript TypeScript Nodejs

recursiveparenttapawaitexecincludesECMAScript 2021touchhookformassignTypeScriptArray.prototype.flattenjsdiffRxchaibrowserlistyamlelasticacheapollopipeJSON-Schemal10nsqsBigInt64Arrayargsfind-uptyped arrayargparseECMAScript 2023tapeansiArray.prototype.containsobjrequireassertionextendfast-deep-cloneprocessjestfastwebes2015fastifyflatpreprocessortoobjectextensionsymlinkslookarraysRFC-6455glacierinspectArrayBufferbyteOffsetchinesetc39optioncloudsearchdebugfindLastIndexserializerbundlingbindweaksettypesafestreams2characteres-shim APIsymbolkarmaFloat32ArraybrowserslistponyfillstylessetPrototypeOfextraexit-codefast-cloneWebSocketsWeakSetelectronredactlesssyntaxmkdirsetImmediatextermelmspinnerasyncvalidatematchtoStringTagebsencryptionconsumeresolvestylegradients css3fluxdefineoptimistnodejsgroupBymruthroatdatastructureflattenfileenderlockfiletrimspeedECMAScript 3dataViewWeakMaptoolkitclassnamescommandinferenceast0classeskeysprefixwaitregular expressionsES2015sharedequalchromepyyamlmimetypesslotsortedECMAScript 2017Object.fromEntriesrouterSymbolesautoscalingparsesequenceBigUint64ArrayinvariantmodulesamazonstdlibcloudwatchasciivalidationECMAScript 5callrateidsettingscallbindguidargumentES2021fastcopywafiamecmascriptdescriptorstypeoffunctionalscheme-validationwarningoffsetReactiveXcloudfrontmapreducequeryutil.inspectemojiwrapeslintgradients csseventsES2023installerES2016findLastarrayES3bytekoreanES7wordwrapwgetprotoremovevisualdeepcloneapilrubusysliceRxJSimportexportefficientform-validationvestsuperagentstatefast-deep-copyrandomstableshrinkwrapassertsterminalclonepathECMAScript 2018command-linepnpm9cloudtrailECMAScript 2020onceTypeBoxsigtermpromiseFunction.prototype.nameSetreact-hooks-0StreamsobjectwordbreaktypescriptdomhasOwnlesscssenvironmentwalkcommanderflatMapInt8ArraytoSortedstatuspositivetextomitmkdirsquerystringperformancedependency managerbluebirdhandlersminimalawesomesaucecss-in-jstrimEndindicatorexpressionrmaws$.extendUint32ArrayzodpropertiesfindObject.valuesprotocol-bufferssidesharedarraybufferes2016collectioninterruptstrimStartES2020Int16Arrayrobusttestingerror-handlingerrordeep-copydropnamestrimLeftunicoderequestfetchECMAScript 2016walkingoptimizerstreamsObservablelimitfseventsreplayroute53accessibilityES6typedarraycurlfile systemlastrm -frttyAsyncIteratorObject.keystakeglobspecframeworkcore-jsconnectlogfastclonefast-copyimportfpsconfigappstartermacosObject.ispackagesuuidECMAScript 2019full-widthArray.prototype.includesstoragegatewaycall-boundES5mkdirpUint16Arrayfixed-widthcolumnrmdirnumberReflect.getPrototypeOfgdpryupcssajaxString.prototype.trimstringifypackage.jsonswfarktypeESdeep-clonecontainsqsconcatMapbootstrap cssinternalkeyhelpersmochacompareless csswatchingphoneregexmatchAllsignalsintrinsicdescriptorjapanesepasswordcolour_.extendcensores2017testtslibloggercliec2Array.prototype.filterwindowscolorsflagObject.entriesmatchesjavascriptsortPushdependenciesbddtypesimmutablecryptoexpresshashdirectorycompilercreatetoArrayreadablestreamcopygetOwnPropertyDescriptordeletemomentforEachstatelessvpcchromiumRegExp.prototype.flagsxhrmulti-packageeventDispatchercirculario-tsinpackageparentslinkcollection.es6progressmetadatapicomatchairbnbbufferses6JSONArray.prototype.flatMapsyntaxerrorES2022enumerablenpmCSSStyleDeclarationjsdomwatcherfulloperating-systemlazyclassnamergbES2017consolestyleguideconcurrencymiddlewarequeuesigintschemeworkflowestreeregular expressioniteratorcharactersnamerm -rfESnextupuninstallruntimesafeArray.prototype.findLastIndexcallboundes5dirpropertyproxyzeroHyBiurlless.jsString.prototype.matchAlllimitedclass-validatora11yisConcatSpreadablequoteartURLSearchParamsconcatimmerECMAScript 2015sesfilterloggingfolderpredictablepruneiterationpolyfillArray.prototype.flates2018spinnersstreamsymlinkrestserializationtoolscompile lesssuperstructcoerciblevaluenativehasOwnPropertyaccessorpatchsameValueZerotypeerrorPromisetrimRightArrayBuffer#slicefunctionsObject.assignutilitycheckloadingdayjscachebundlerreusepackage managerStreami18ncloudformationes-shimsbyteLengthmoduleECMAScript 7descriptionlinewrapbootstrap lessietostringtagCSScss variableexitbcryptlengthpersistentReactiveExtensionscall-bindstyled-componentsprettyclientutilcallbackfindupavakinesis@@toStringTagreducetesterpostcssECMAScript 6workspace:*WebSocketoutputhotflagswriteajveslint-pluginlibphonenumbersimpledbdom-testing-libraryhasredux-toolkitinternal slotRegExp#flagsconfigurablechannelrfc4122beanstalkliveformattingES8fromjwtfullwidthformeslintpluginqueueMicrotasknested cssthrottlecolortermtypedhttpssettsreact-hook-formentrieseast-asian-widthbrowserpluginregexpjQuerylook-upTypedArrayarraybuffertypecryptmimenopedataviewhttp[[Prototype]]envtypanionagentassertvariables in csstelephonetaskworkersnsdatajsmime-dbirqwidthparsingObjectpostcss-plugincoreUint8Arraystylesheetjasmineschemaismapes7somerestfulIteratorserialize256mobilejsonpathless compilerendpointlintboundshimvalidjoiES2019rdspromisesdotenves8negativeObservablesbreakwhichbatchdebuggerprototypereduxnegative zerocomputed-typeswhatwgtddstructuredCloneregularcjkreducervalues.envutilitiesmonorepolistenersless mixinssetterstylingweakmapauthenticationdeepcopyhooksYAMLcolumnseverygetPrototypeOfprotobufdiffmovegetformatidlegraphqllanguagetypedarrays__proto__css lessfscode pointsreadabledynamodbsinatralinuxjsxMapwritablebannerelbsymbolsArrayBuffer.prototype.slicees-abstractUint8ClampedArrayeventEmitterargvparserhigher-orderwatchFilenodeauthInt32Arrayreal-timereact-testing-librarydeepshellhas-ownopenratelimitcodesgetintrinsicequalitypropES2018installhardlinksshamautoprefixermixinsfigletsignalinputviewsearchescaperapidgenericsfunctionreademrtraverseperformantgroupURLStyleSheetUnderscore
1.0.0

1 year ago