Width and height



The Height selectors are identical to the width selectors. They only have the indicator of -h in their class names instead of -w




Description

The width selectors can be controlled on each breakpoint separately, and they can be used the way to target the children of a specific element, to remove the necessity of defining width on each child separately.



Relative width

The relative width is basically percentage based and is calculated based on the numbers in a class selector.




There is no need to remember the percentage values, you can, the class names are self explanatory.

i.e 1/5 returns one-fifth of the width of the element's container. 



un-w1

Returns the width of 100%

un-w1/2

Returns the width of 50%

un-w1/3

Returns the width of 33.33%

un-w1/4

Returns the width of 25%

un-w1/5

Returns the width of 20%

un-w1/6

Returns the width of 16.6%



Example of basic use
Markup
    


    
1

    
    
1/2

    
1/2

        
    
1/3

    
1/3

    
1/3

    
    
1/4

    
1/4

    
1/4

    
1/4

    
    
1/5

    
1/5

    
1/5

    
1/5

    
1/5

    
    
1/6

    
1/6

    
1/6

    
1/6

    
1/6

    
1/6
1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6


Static width

The static width is based on the pre-defined width values in Ueyen, you can change them by overriding their SASS variables in Control Panel.




The static width values are subject to change in each breakpoint by default due to the custom attribute multiplier values. If you want a fully static width values, you can disable the custom attributes in SASS Control Panel, or you can override the width variables in the Control Panel 



un-w-s

Returns the small width

un-w-m

Returns the medium width

un-w-l

Returns the large width

un-w-h

Returns the huge width



Example of basic use
Markup
    


    
1

    
1/2

    
1/2

    
1/3

Small
Medium
Large
Huge


Applying to an element's children

All the width selectors (relative & static) can have * indicator after -w. This will cause the width value applies to the element's children.



Example of use
Markup
  


    <div class="un-w*-s" >
        <div>Small<div>
        <div>Small</div>
        <div>Small</div>
        <div>Small</div>
    </div>
    <div class="un-w*-l" >
        <div>Large<div>
        <div>Large</div>
        <div>Large</div>
        <div>Large</div>
    </div>

Small
Small
Small
Small
Large
Large
Large
Large

Width and breakpoints

All the selectors in the basic mode can be followed by :s to :h (small to huge) to have different number of items on each row.


Example of using width with brekpoints

The following elements have these class names: un-w*-1 un-w*-1/2:s un-w*-1/4:l



Markup
    


    
Width & Breakpoint
    
    
Width & Breakpoint

    
Width & Breakpoint
        
    
Width & Breakpoint

The result will be:

un-w*-1 The width of the children is 100% by default.

un-w*-1/2:s The width become 50% on screens larger than breakpoint small.

un-w*-1/4:l The width become 25% on screens larger than breakpoint large.


Width & Breakpoint
Width & Breakpoint
Width & Breakpoint
Width & Breakpoint