Wrapper utilities

Wrap elements with padding around them.

Two classes available from start .wrapper-small and .wrapper-medium.

// default config
wrapper: (
  property: 'padding',
  values: (
    'small': 1rem,
    'medium': 1.5rem,
  ),
),

<div class="wrapper-small">small</div>
<div class="wrapper-medium">medium</div>

Add more, update data, set responsive values (Check the options)

$ooLoop: ooAdd('wrapper.values', (
  'tiny': .5rem,
  'wide': (
    rt: 1rem,
    sm: 2rem,
    md: 3rem,
    lg: 4rem,
  )
));

// set .wrapper-tiny@sm .wrapper-small@sm .wrapper-medium@sm
// set .wrapper-tiny@md .wrapper-small@md
// set .wrapper-small@lg .wrapper-medium@lg
$ooLoop: ooSet('wrapper.screens', (
  sm: '✲',
  md: ('tiny', 'small'),
  lg: ('small', 'medium')
));

<div class="wrapper-tiny">tiny</div>
<div class="wrapper-wide">responsive</div>
<div class="wrapper-tiny wrapper-small@sm wrapper-medium@lg">With breakpoints</div>

In manual mode add the mixin Wrapper().

Use Float utilities <<