Menu icon Foundation
How should I treat rem-calc()?

I've understood how rem-calc() works. but I'm still confusing that which situation should I use this.

p {
    font-size: rem-calc(12); // well, I think this is natural
}

// then, is this correct?
#main {
    width: 960px;
    margin: 0 auto;
    @extend .clearfix;
    #content {
        width: rem-calc(600);
        // means width: 600px, right?
        float: left;
        margin-right: 20px;
    }
    #aside {
        width: rem-calc(320);
        // width: 320px;
        float: right;
        margin-left: 20px;
    }
}
         

In Foundation project, should I never use "px" values?

Or, I should use px and rem-calc() different purpose?

thanks.

cssrem-calc

I've understood how rem-calc() works. but I'm still confusing that which situation should I use this.

p {
    font-size: rem-calc(12); // well, I think this is natural
}

// then, is this correct?
#main {
    width: 960px;
    margin: 0 auto;
    @extend .clearfix;
    #content {
        width: rem-calc(600);
        // means width: 600px, right?
        float: left;
        margin-right: 20px;
    }
    #aside {
        width: rem-calc(320);
        // width: 320px;
        float: right;
        margin-left: 20px;
    }
}
         

In Foundation project, should I never use "px" values?

Or, I should use px and rem-calc() different purpose?

thanks.

This post has been closed. No new replies can be added.

Kohki over 4 years ago

Hi Rafi

I appriciate your helpful message.

I've understood very well.

Thank you so much.

Rafi Benkual over 4 years ago

We try to use rems on everything we make. Because some people still think in px (just a habit), we have the handy rem-calc() function.

You are correct that rem-calc(600) = 600px

I still use px for a border like border: 1px solid dodgerblue; just because it's easy.
I personally don't use rem-calc() often because I've started thinking in rems.

Some helpful reading:
https://vasilis.nl/nerd/you-should-understand-css-units/

http://blog.donnywals.com/how-to-choose-between-rem-and-em/