Scaling Ionic with CSS rem units

tutorials
9

Hi,
We also like the solution of all CSS having REM units so font-size scaling is easy. We created a gulp taks during our build process that reads the index.html and gets all CSS assets and replaces the px to rem units, like this:

gulp.task('build:rem', ['build:sass'], function() {
    function replaceWith(match, p1, offset, string) {
        return p1 / 16 + 'rem';
    }

    return gulp.src('./www/index.html')
        .pipe(assets({js: false, css: true}))
        .pipe(tap(function(file) {
            file.contents = new Buffer(file.contents.toString().replace(/([\d.]+)\s*px/g, replaceWith));
        }))
        .pipe(gulp.dest('./www'));
});

All works fine for all CSS assets and all is replaced/calculated to REM units. But unfortunately some other Ionic/AngularJS directives calculate some px on the style attribute. So we added a style directive like:

(function() {
    'use strict';
    angular.module('App.core')
	.directive('style', StyleDirective);

    StyleDirective.$inject = ['$timeout'];

    function StyleDirective($timeout) {
	function pxToRem(el, at) {
	    if (el.attr('style')) {
		at.$set('style', el.attr('style').replace(/([\d.]+)\s*px/g, function(match, p1, offset, value) {
		    return p1 / 16 + 'rem';
		}));
	    }
	}

	return {
	    restrict: 'A',
	    compile: function(element, attr) {
	        pxToRem(element, attr);
	    }
	};
    }
})();

Which works great on most style attributes, but some are a real pain in the ass like collection-repeat. What we have done/tried is extended collection-repeat as follows:

(function() {
    'use strict';
    angular.module('App.core')
	.directive('collectionRepeat', CollectionRepeatDirective);

    CollectionRepeatDirective.$inject = ['$timeout'];

    function CollectionRepeatDirective($timeout) {
	function pxToRem(el, at) {
	    if (el.attr('style')) {
	        $timeout(function() {
	            at.$set('style', el.attr('style').replace(/([\d.]+)\s*px/g, function(match, p1, offset, value) {
	                return p1 / 16 + 'rem';
	            }));
	        });
	    }
	}

	return {
	    restrict: 'A',
	    multielement: true,
	    link: {
	        post: function(scope, element, attr) {
	            pxToRem(element, attr);
	        }
	    }
	};
    }
})();

This addition to the collection-repeat directive works great initially, but after a screen resize etc, the new rem units are not recalculated. I can’t seem to find any solution to that issue. @mhartington @inportb any ideas?

I have also added a pen to demonstrate the collection-repeat directive: http://codepen.io/mark-veenstra/pen/reaBoy