Micellaneous

Micellaneous classes

Those styles are generated from the property misc of the config map.

//default config
misc: (
  responsive: ( // name of the class
    props: ( // css properties
      max-width: 100%,
      height: auto,
    )
  ),
)

Loop config includes miscellaneous classes by default. In manual mode use the mixin Misc()

# Responsive

<img class="responsive" src="logo.svg" width="600">

# Custom

As for now, Loop is providing only one miscellaneous class. You can still add your own recurring class through the config file though.

Add .thumbnail class

// Auto:
$ooLoop: ooAdd('misc', (
  'thumbnail': (
    props: (
      padding: 5px,
      border: 1px solid #d6d6d6,
      border-radius: 5px,
      background-color: #ffffff,
    )
  )
));

@include ooCreate();

// Manual:
@include ooInit();

@include Misc((
  'thumbnail': (
    props: (
      padding: 5px,
      border: 1px solid #d6d6d6,
      border-radius: 5px,
      background-color: #ffffff,
    )
  )
));

<img class="thumbnail" src="orange.jpg" alt="orange" width="150">

Use List classes << >> Make Utilities