@citizensadvice/floats

Pushes the element to either the left or right side.

Usage no npm install needed!

<script type="module">
  import citizensadviceFloats from 'https://cdn.skypack.dev/@citizensadvice/floats';
</script>

README

Floats npm (scoped)

Pushes the element to either the left or right side.

Classes

.float-left {
  float: left;
}
.float-right {
  float: right;
}
.float-none {
  float: none;
}

Responsive float classes

To apply specific classes at set screen widths, use the following classes:

Class name Description
[aboveClassName]-ns Screens with a min-width of 48rem
[aboveClassName]-m Screens with widths from 48rem to 64rem
[aboveClassName]-l Screens with a min-width of 64rem

Examples

<div class="float-left float-right-ns float-left-l">...</div>
<div class="float-none float-left-ns">...</div>

Installation

$ npm install @citizensadvice/floats

now import into your stylesheet...

@import '@citizensadvice/floats/index.scss';

You can also make use of the unpkg service, try adding the link below to the head of your HTML file

<link src="https://unpkg.com/@citizensadvice/floats@latest/build/floats.css" />