Skip to content

A module-relative rem unit library for Sass (mixin / function).

License

Notifications You must be signed in to change notification settings

iocss/crossass-mem

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Crossass Mem

A module-relative rem unit library (mixin / function) for Sass.

Each HTML/CSS module can be separately scalable with Crossass Mem.

// Defines the HTML font-size for the base REM value
@include x-config-set('x.mem.rem-base', 16px);

html {
    font-size: 16px;                        // 1Rem = 16px
}
article {
    // Defines the base MEM value for this module
    @include x-mem-base(.75rem);            // 1Mem = .75Rem (12px)

    font-size: x-mem-base-fallback();       // 12px the fallback below
    font-size: x-mem-base();                // .75Rem = 1Mem (12px)

    h1 {
        font-size: x-mem-fallback(2)        // 24px: the fallback below
        font-size: x-mem(2);                // 1.5Rem = .75Rem * 2Mem (24px)
    }
}

Features

  • Module-relative rem value (MEM unit)
  • Fallbacks for legacy browsers (such as IE8)
  • Multiple and nestable base mem values

Em, rem problems

Nowaday, em and rem unit are widely used for building scalable Web. However they have a few problems with the scalability / modularity, especially with the font-sizing.

Unit Relative to Use case
em parent element em
rem root (html) rem
mem any mem

The table below is a comparison table about the scalability against each kind of modification.

Unit | Base font-size | Structure | Module font-sizing --- | --- | --- | --- | --- em | Good | Poor | Good rem | Good | Good | Poor mem | Good | Good | Good

With Crossass Mem, you can easily/flexibly handle rem-based sizing.

Requirement

Installation

bower install crossass-mem

or just copy crossass-mem folder and crosass-config folder of Crossass Configuration into your project.

Usage

Import

@import 'bower_components/crossass-config/scss/config';
@import 'bower_components/crossass-mem/scss/mem';

or

@import 'your-folder/crossass-config/scss/config';
@import 'your-folder/crossass-mem/scss/mem';

Configuration

// Defines the HTML font-size for the base REM value
@include x-config-set('x.mem.rem-base', 16px);

html {
    font-size: 16px;  // This should be the same as `x.mem.rem-base` value
}