Geek Answers Handbook

Is label.inline class 5 class only available for @media media-up?

I am trying to get this layout for different types of media, an example below.

Small screens:

+----------------------+
| LABEL                |
+----------------------+
| TEXT INPUT           |
+----------------------+

Middle screens:

+----------------------+----------------------+
| LABEL                | TEXT INPUT           |
+----------------------+----------------------+

So, I have this code:

<div class="row">
    <div class="columns medium-2">
        <label>
            Label
        </label>
    </div>
    <div class="columns medium-10">
        <input type="text" />
    </div>                                    
</div>

Everything is fine, but for medium screens the label does not vertically align in the middle, nor does it align horizontally to the right. To achieve this, Foundation 5 has two special label classes: label.inlineand label.right, but I don't like these classes to be used for small screens either.

A possible solution that I already know, but searching for the best (css only):

<label class="visible-for-small-only">
    Label
</label>
<label class="visible-for-medium-up right inline">
    Label
</label>

- CSS Foundation inline right , , ?

+4
1

, SASS, . :

label {
    &.inline-for-medium-up { 
        @media #{$medium} {
            @include form-label(inline,false);
        }
    }
}


<div class="row">
    <div class="medium-2 columns">
        <label class="inline-for-medium-up">
            Label
        </label>
    </div>
    <div class="medium-10 columns">
        <input type="text" />
    </div>                                    
</div>

:

SASS CSS, , . Form-label - , . , , . , mixin inline, sass css . mixin -, , , .

+7

More articles:


All Articles