Utility classes
Utility classes are as simple, independent, and reusable as possible; A utility class applies a single rule or a very simple,
universal pattern. Think.float-right
,.align-center
, or.font-small
for single rules;.list-unstyled
, and.visually-hidden
for patterns. Sometimes they’re called “helpers”. Prefix to denote utilities, overrides,
and helper classes. Classes beginning with.u-
should never be redefined, bound onto, or modified.
.occlss-u-hidden
This class will hide the object from display.
.occlss-u-more-link
This class will display the arrow icon on the right of the link.
Contact us<a href="https://www.oxfordshire.gov.uk/cms/public-site/contact-oxfordshire-county-council" class="occlss-u-more-link">
Contact us
<span class="occlss-icon occlss-icon--arrow-right-long-right-secondary" aria-hidden="true">
<svg aria-hidden="true" class="occlss-icon__container occlss-u-more-link__icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#arrow-right-long-right-secondary" class="icon__source icon__source--svg"></use>
</svg>
</span>
</a>
.occlss-u-unstyled-list
This class will remove the default list item style.
.occlss-u-max-width-(n)
This class adds max-width to the object.
- .occlss-u-max-width-one-quarter - max width: 25%
- .occlss-u-max-width-one-third - max width: 33.333%
- .occlss-u-max-width-one-half - max width: 50%
- .occlss-u-max-width-two-thirds - max width: 66.666%
- .occlss-u-max-width-three-quarters - max width: 75%
.occlss-u-tspace-(n)
This class adds top margin to the object.
- .occlss-u-tspace-none - top margin: 0
- .occlss-u-tspace-xs - top margin: 6px
- .occlss-u-tspace-sm - top margin: 12px
- .occlss-u-tspace-md - top margin: 25px
- .occlss-u-tspace-large - top margin: 50px
.occlss-u-bspace-(n)
This class adds bottom margin to the object.
- .occlss-u-bspace-none - bottom margin: 0
- .occlss-u-bspace-xs - bottom margin: 6px
- .occlss-u-bspace-sm - bottom margin: 12px
- .occlss-u-bspace-md - bottom margin: 25px
- .occlss-u-bspace-large - bottom margin: 50px
.occlss-u-tpspace-(n)
This class adds top padding to the object.
- .occlss-u-tpspace-none - top padding: 0
- .occlss-u-tpspace-xs - top padding: 6px
- .occlss-u-tpspace-sm - top padding: 12px
- .occlss-u-tpspace-md - top padding: 25px
- .occlss-u-tpspace-large - top padding: 50px
.occlss-u-bpspace-(n)
This class adds bottom padding to the object.
- .occlss-u-bpspace-none - bottom padding: 0
- .occlss-u-bpspace-xs - bottom padding: 6px
- .occlss-u-bpspace-sm - bottom padding: 12px
- .occlss-u-bpspace-md - bottom padding: 25px
- .occlss-u-bpspace-large - bottom padding: 50px
.occlss-u-img-responsive
This class adds 100% width to the image container.
<img src="https://dummyimage.com/1200x574/525252/ffffff.png" class="occlss-u-img-responsive" alt="Responsive image class">
Changelog
2.4.8
- occlss-u-img-responsive class added
1.0.0
- Component Added