christopher-ramirez / remixings

[UNMAINTAINED] Automatically convert pixel measures into rem in {less}.

remixins for {less}

Automatically convert pixel measures into rem units.

remixins is a collection of {less} mixins that helps you start using rem units without coding pixels fallbacks on every rule. Code your CSS using pixels. remixins will automatically convert them to rem units.

remixins includes {less} mixins for most popular properties where rem is used as a measure unit.

Mixins available for the following CSS properties:

• font-size, line-height and text-indent.
• margin(s)
• padding(s)
• height and width (including min- and max-)
• top, left, bottom and right.

How to use it:

1. Download remixins.less
2. Set @base-font-size-px (line 2) to your integer root's font size. Note that @base-font-size-px MUST BE AN INTEGER (without any measure unit).
3. Import downloaded file @import "remixins.less.

Examples:

{less}:

    .element {
        .font-size(16px);
    }

CSS result:

    .element {
        font-size: 16px;
        font-size: 1.6rem;
    }

{less}

    .element {
        .margin(10px, 3%);
    }

CSS result:

    .element {
        margin: 10px 3%;
        margin: 1rem 3%;
    }

Included mixins

• .font-size(@value)
• .line-height(@value)
• .text-indent(@value)
• .margin(@value)
• .margin(@vertical, @horizontal)
• .margin-top(@value)
• .margin-right(@value)
• .margin-bottom(@value)
• .margin-left(@value)
• .padding(@value)
• .padding(@vertical, @horizontal)
• .padding-top(@value)
• .padding-right(@value)
• .padding-bottom(@value)
• .padding-left(@value)
• .height(@value)
• .min-height(@value)
• .max-height(@value)
• .width(@value)
• .min-width(@value)
• .max-width(@value)
• .top(@value)
• .left(@value)
• .bottom(@value)
• .right(@value)

@chrRamirez

remixings's Issues

Using Auto

Hello,

Have you been able to further enhance the margin mixin to accept auto as a property?

Duplicate values

Great mixins, thanks!

Issue:

.margin(10px, 10px);

duplicate values:

margin: 10px 10px;
margin: 1rem 10px;
margin: 10px 1rem;
margin: 1rem 1rem;

whith padding(10px, 10px) same issue

Solution: add condition not

.margin(@vertical, @horizontal) 
when (ispixel(@vertical)) and not (ispixel(@horizontal)){
    @rem-value: ~`pxtorem('@{vertical}')`;
    .margin(@rem-value, @horizontal);
}
.margin(@vertical, @horizontal) 
when (ispixel(@horizontal)) and not (ispixel(@vertical)){
    @rem-value: ~`pxtorem('@{horizontal}')`;
    .margin(@vertical, @rem-value);
}

same for padding

but it would be better to implement solution from Anton Syuvaev

Getting Error: pxtorem is not defined

Hey I'm not able to get this to work it keeps getting this error on compile:

SyntaxError: JavaScript evaluation error: 'ReferenceError: pxtorem is not defined' in /Applications/MAMP/htdocs/mt-prototypes/grid/less/reset.less:145:2
144 h2, .h2 {
145 .font-size(34px);
146

Got an errormessage

Hi,
I put the code

@import "remixins.less";
@base-font-size-px: 10;

at the beginning of my less file. After I added this I got the errormessage

Fatal error: Uncaught exception 'Exception' with message 'parse error: failed at if (typeof rmxsBaseFontSize == 'undefined') rmxsBaseFontSize = @{base-font-size-px}; return (parseInt(px.replace(/(^\d+)(.+$)/i,'$1')) / rmxsBaseFontSize + 'rem') };` /Applications/XAMPP/xamppfiles/htdocs/kirbytextil/assets/less/remixins.less on line 5' in /Applications/XAMPP/xamppfiles/htdocs/kirbytextil/site/plugins/lessphp/less.inc.php:3460 Stack trace: #0 /Applications/XAMPP/xamppfiles/htdocs/kirbytextil/site/plugins/lessphp/less.inc.php(2273): lessc_parser->throwError() #1 /Applications/XAMPP/xamppfiles/htdocs/kirbytextil/site/plugins/lessphp/less.inc.php(121): lessc_parser->parse('// ===== REM UN...') #2 /Applications/XAMPP/xamppfiles/htdocs/kirbytextil/site/plugins/lessphp/less.inc.php(753): lessc->tryImport(Array, Object(stdClass), Object(stdClass)) #3 /Applications/XAMPP/xamppfiles/htdocs/kirbytextil/site/plugins/lessphp/less.inc.php(284): lessc->compileProp(Array, Object(stdClass), Object(stdClass)) #4 /Applications/XAMPP/xamppfi in /Applications/XAMPP/xamppfiles/htdocs/kirbytextil/site/plugins/lessphp/less.inc.php on line 3460

I don't understand what I'm doing wrong. I load the less through lessphp could this a problem?

Best regards

[enhancement] Add missing bower.json.

Hey, maintainer(s) of christopher-ramirez/remixings!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library christopher-ramirez/remixings is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "christopher-ramirez/remixings",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

rem to 2 decimal places

Have started accommodating half pixel values for high DPI screens, and found that pxtorem currently only outputs to 1 decimal place...

Changed @pxtorem-js-function to the following to allow 2 decimal place calculations... Not tested exhaustively though...

@pxtorem-js-function: ~`pxtorem = function(px){ if (typeof rmxsBaseFontSize == 'undefined')  rmxsBaseFontSize = @{base-font-size-px}; return (parseFloat(px.replace(/(^\d+)(\.\d{1,2})?$(.+$)/i,'$1')) / rmxsBaseFontSize + 'rem') }`;