@ec-europa/ecl-u-display

0.3.0 • Public • Published

Display utility

Forked from Bootstrap 4 Beta and adapted to our needs.

Common display values

The display property accepts a handful of values and we support many of them with utility classes. We purposefully don't provide every value as a utility, so here's what we support:

  • .ecl-u-d-none
  • .ecl-u-d-inline
  • .ecl-u-d-inline-block
  • .ecl-u-d-block
  • .ecl-u-d-table
  • .ecl-u-d-table-cell
  • .ecl-u-d-flex
  • .ecl-u-d-inline-flex

Put them to use by applying any of the classes to an element of your choice. For example, here's how you could use the inline, block, or inline-block utilities (the same applies to the other classes).

Responsive variations also exist for every single utility mentioned above.

  • .ecl-u-d-[ sm|md|lg|xl ]-none
  • .ecl-u-d-[ sm|md|lg|xl ]-inline
  • .ecl-u-d-[ sm|md|lg|xl ]-inline-block
  • .ecl-u-d-[ sm|md|lg|xl ]-block
  • .ecl-u-d-[ sm|md|lg|xl ]-table
  • .ecl-u-d-[ sm|md|lg|xl ]-table-cell
  • .ecl-u-d-[ sm|md|lg|xl ]-flex
  • .ecl-u-d-[ sm|md|lg|xl ]-inline-flex

Readme

Keywords

none

Package Sidebar

Install

npm i @ec-europa/ecl-u-display

Weekly Downloads

0

Version

0.3.0

License

EUPL-1.1

Unpacked Size

2.7 kB

Total Files

5

Last publish

Collaborators

  • kalin.chernev
  • weslito
  • yhuard