Utilities

A bunch of handy classes doing one job to customize elements on the fly.

Loop provides flexible utilities to assist you during your development. Extend them, set your own needs by adjusting the Loop config with the correct format.

• Color
• Typography
• Spacing
• Float
• Wrapper

# Format

A utility follows a specific map format being passed to the config.

• prefix(string)(optional)
  Name prefixing each values - (default grabbing the first part of the name of the map)
• property(string)(optional)
  CSS property to change - (default turning the name of the map into a kebab-case CSS property)
• values(map|list)
  CSS values for the targetted CSS property
• important(boolean)(optional)
  Add the !important flag - (default to true)
• screens(mixed)(optional)
  Targetted responsive screens, global or specific - (defaulft empty)

The generated class will be created from .(prefix | namePart1)-valueName

# Custom Utilities

Following the appropriate map format create your own utitlies via the proterty utilities of the Loop config.

$ooLoop: ooAdd('utilities', (
  borderRadius: (
    prefix: 'radius',
    values: (
      'small': .5rem,
      'large': 1.5rem,
    )
  ),
  textDecoration: (
    values: (
      'underline',
      'overline',
    )
  ),
  display: (
    prefix: 'd',
    values: (
      'block': block
      'flex': flex,
      'iflex': inline-flex,
    )
  ),
  valign: (
    property: 'vertical-align',
    values: (
      'top',
      'middle',
    ),
    important: false,
  )
));

/** It will generate **/

.radius-small { border-radius: .5rem !important }
.radius-large { border-radius: 1.5rem !important }

.text-underline { text-decoration: underline !important }
.text-overline  { text-decoration: overline !important }

.d-block { display: block !important }
.d-flex  { display: flex !important }
.d-iflex { display: inline-flex !important }

.valign-top    { vertical-align: top }
.valign-middle { vertical-align: middle }

# Responsive utilities

The screens propertity can be used to set global responsive rules to apply to all listed values.prefix-valueName@screenName

@include ooCreate((
  utilities: (
    borderRadius: (
      prefix: 'radius',
      values: (
        'small': .5rem,
        'large': 1.5rem,
      ),
      screens: 'sm'
    ),
    textDecoration: (
      values: (
        'underline',
      ),
      screens: (sm, md, lg)
    ),
  )
));

Generating the classes .radius-small .radius-large .radius-small@sm .radius-large@sm .text-underline .text-underline@sm .text-underline@md .text-underline@lg

Be specific, lighten your css

Specify the needed valueName from the needed screens and generate only the necessary rules.

@include ooCreate((
  utilities: (
    borderRadius: (
      prefix: 'radius',
      values: (
        'small': .5rem,
        'large': 1.5rem,
      ),
      screens: (
        sm: 'small',
        lg: '✲' // Target all
      )
    ),
  )
));

Generating the classes .radius-small .radius-large .radius-small@sm .radius-small@lg .radius-large@lg

Responsive value

Instead of using the screens property, set a responsive screen map to your utility value to modify it between the screen sizes.

@include ooCreate((
  utilities: (
    borderRadius: (
      prefix: 'radius',
      values: (
        'small': (
          rt: .25rem,
          sm: .5rem,
          md: 1rem,
        ),
        'large': 1.5rem,
      ),
    ),
  )
));

Generating the classes .radius-small .radius-large

.radius-small { border-radius: .25rem !important }

@media (min-width: 37.5em) {
  .radius-small { border-radius: .5rem !important }
}
@media (min-width: 60em) {
  .radius-small { border-radius: 1rem !important }
}

.radius-large { border-radius: 1.5rem !important }

Use Miscellaneous classes << >> Use Color utilities