Responsive mixins

[vslinko]

Hello!

I'm wrote responsive mixin for my project:

same = false // synonym for better experience

browser(name, value)
    add-property name, value

tablet(name, value)
    @media (max-width: 979px)
        add-property name, value

phone(name, value)
    @media (max-width: 767px)
        add-property name, value

responsive(name, browser-value, tablet-value, phone-value = same)
    if s("%s", name) == "image"
        // hack for image support, not interested now
        -image-responsive browser-value tablet-value phone-value
    else
        browser name browser-value

        if tablet-value is not same and tablet-value != browser-value
            tablet name tablet-value

        if phone-value is not same and phone-value != tablet-value
            phone name phone-value

Usage example:

.logo
    responsive width 500px 360px 300px
    responsive height 170px 122px 102px
    responsive margin, 60px auto 65px, \
                       30px auto 45px, \
                       15px auto
    responsive image "/images/logo.png" "/images/logo-tablet.png" "/images/logo-phone.png"
    hide-text()

Example usage for same keyword:

.copyrights
    responsive font-size 32px same 18px

What are you think about include that mixin into nib? Maybe you have any suggestions how to make that mixin better?

[hems]

+1 definitely useful

ps: just not really sure about the queries, some people use way more complex queries

[hems]

@vslinko i believe you saw https://github.com/jenius/rupture ?

[vslinko]

rupture was released after this PR and after I'm moved from stylus, but thank you anyway :smile:

[hems]

@vslinko you welcome ( :

what you using now?

[vslinko]

@hems mostly other people :smile: but sometimes I can use pure css