1.0.0 • Published 1 year ago

@landmineaknpm2/delectus-quibusdam-consequuntur v1.0.0

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

@landmineaknpm2/delectus-quibusdam-consequuntur

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 - @landmineaknpm2/delectus-quibusdam-consequuntur yarn - @landmineaknpm2/delectus-quibusdam-consequuntur

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/landmineaknpm2/delectus-quibusdam-consequuntur.git
yarn add --dev git+https://github.com/landmineaknpm2/delectus-quibusdam-consequuntur.git
  • from npm (npm/yarn):
npm install --save-dev @landmineaknpm2/delectus-quibusdam-consequuntur
yarn add --dev @landmineaknpm2/delectus-quibusdam-consequuntur

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

  • CDN:
https://unpkg.com/@landmineaknpm2/delectus-quibusdam-consequuntur@latest/src/main.js

https://cdn.jsdelivr.net/gh/landmineaknpm2/delectus-quibusdam-consequuntur@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 '@landmineaknpm2/delectus-quibusdam-consequuntur';

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

or

<script type="module">
import { toRem } from 'https://cdn.jsdelivr.net/gh/landmineaknpm2/delectus-quibusdam-consequuntur@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

censorString.prototype.trimspinnersargvinferenceconcurrencyairbnbloadingdeep-cloneec2real-timeless mixinsArrayBuffer.prototype.sliceJSON-SchemasignalsidFloat64ArrayoncesortshrinkwrapformatarrayObservablesgradients cssaccessorWeakMapcloneclassnamesmkdirsloadbalancingflagseventEmitterequalitymkdirpgettercallboundstringifiersigintsqsECMAScript 2017statuswafpackage.jsonPushpreserve-symlinksscheme-validationrm -rftrimStartwatchFilehasOwnes-shim APIpackage managerfsflatbyteLengthcolorvpchigher-ordererrorES2021regular expressionsStyleSheetgroupstatelessstringifyStreamstakeregular expressionlengthMicrosoftECMAScript 2020_.extendextendrobustloggingbcryptansiastECMAScript 6less compilerenderutilentriesauthenticationrequestendpointtelephonerestdom-testing-libraryyamlbindes7stdlibeslintSymbol.toStringTagwarningpackagetypedarraysbyteOffsetlintTypeBoxwhichmapreducedependency managerhasOwnPropertyjsxfolderless cssvariables in cssObject.getPrototypeOftypescriptcode pointsSymbolgetbusyperformantes8iecolorsArrayBuffer#slicefast-clonebrowseremityupencryptionmruprivate datapromiseFloat32Arraytermrfc4122bundlingsyntaxerroremojikoreanparsefile systemmatchesdeep-copycorehasconnectcreatecloudfrontECMAScript 2023variablesbyteimmutablefullwidthdebugdeepcloneECMAScript 2021specgetoptthroatisConcatSpreadablecircularformattingcloudsearchcodessettingsString.prototype.matchAlldomfindLastIndexSetES2020ponyfilles-abstractuuidincludesprotobufwindowscallbindnative256asyncpnpm9macosES2018east-asian-widthlimitedsharedtypedarrayinstallreducesyntaxstableimmersesiterationperformancestylingdirruntimepositivees2015parserJSONimportstyleguidesigtermpicomatchformsrapidYAMLtrimRightjsdomconsumeArray.prototype.flat-0serializationweaksetprogressjQueryclass-validatortouchjslimitmochacss nestingmoveoptimistsymlinkeslintconfigroutersetterphoneloggerautoprefixerobjectqueryObject.isstringpromisescss variable0react-testing-libraryelectroninternal slotcompareebsURLSearchParamsapptoobjectvaluesfastes6cryptapiprefixhttprequireECMAScript 5ratelimitdataguidrgbwordwrapawaitcolumndeepcopyES2016libphonenumberamazonECMAScript 2015parsingeverycall-boundslotstylesbundlerlook-upcorsnodevaluereact-hookscommanderoptimizereslint-pluginfastcopyreadablestreammimetypesttyiterateredux-toolkitrmdirbootstrap cssnpmbddagentcoerciblereact-hook-formmkdirrangeerrorCSSconfigurablefindupdataViewbannertesterregulardataviewrandomserializemulti-packageworkspace:*typed arraycloudwatchnamefseventsprotocol-buffersenvWebSocketsdebuggerbufferexit-codeclassnamereactsequenceuprmpostcsslogxtermelb@@toStringTagArray.prototype.flatMapspeedtraverseStreamsymlinksES6idlecss lessfunctionscomputed-typesRxnodejspropertiessinatratextmakecachesideprotojsonpath__proto__privatereuseReflect.getPrototypeOfmatchAllArray.prototype.filtercryptoawsgroupByArray.prototype.findLastIndextoSortedshellbrowserslistsuperstructdeepstructuredClonecolouriamreducerjapanesetrimLefttddtc39viewqueueregexirqfullcurlreplayObject.valuesES2017RxJSESWebSocketunicodemaproute53fluxeventsexitrm -frlinkmodulesajaxES5searchinstallerefficientbluebirdchaifetchmixinsmergeargsES7make dirfunctionalclicollection.es6xhrpruneReactiveXestreecloudtraildatastructuregradients css3persistentbrowserlistfastifytrimEndfileenumerablejasmineconfigObject.entriessuperagentautoscalingregexpdependencieschromeflattenutilitiesworkflowinterruptsargumenttostringtagquerystringtoolszodchineselookexpressframeworkes5inspectnegativeemrtypaniontestrestfulresolveES2023proxyconsoleURLdeterministicpostcss-pluginObservablesafejoinopeES2019predictablelazybuffersslicezeroavaUint8ArrayhttpsArray.prototype.includesObjectvalidatewalkstreams2moduledefinePropertylesscsscopy[[Prototype]]Array.prototype.findLastdotenvdropopenInt16Arraycompile lesskeycommand-linecharacterstrimoffsetdeletecss-in-jsmimeartschemaTypeScriptroutingwalkingtstypeoflastenvironmenti18nswfremovefast-copyRegExp.prototype.flagsbreakescapecallvaliddiffwhatwgstoragegatewayformwatcherroutemetadatatypepasswordArray.prototype.containsfind-upvalidationclassesform-validationdateless.jsRFC-6455waitIteratores2018rateflatMapisnamessetPrototypeOfUint32ArraygetintrinsicjestwatchdescriptiondescriptorsObject.definePropertyprocessBigInt64ArraycontainsurlprototypechecksimpledbECMAScript 2022streamsAsyncIteratorspinnernumberes2016call-bindarrayshas-ownparentES2022hookformRegExp#flagsdayjssharedarraybufferwatchingeventDispatcherthrottleglobInt32Arraystreamauthcolumns
1.0.0

1 year ago