Skip to content

Block component class names #356

Description

@stephaniehobson

As part of #326 there are some utility classes that need naming. Everything gets the mzp- prefix of course.

These three make the text or media vertically aligned to the top center or bottom of the container:

  • v-top
  • v-center
  • v-bottom

I think those are pretty straight forward. We probably also need corresponding horizontal alignment ones. I suggest borrowing from flex box to avoid RTL confusion:

  • h-start
  • h-middle
  • h-end

These are the ones that need a bit more work:

The media can be inside the container's padding, inside the container but flush to it's edges (ignoring the padding), or it can expand outside the container. And it can do this on each side.

screen shot 2019-02-21 at 1 19 31 pm

My working classes for this are:

  • fit-inside
  • fit-flush (fit-flush-top, fit-flush-bottom, fit-flush-side)
  • fit-pop (fit-pop-top, fit-pop-bottom, fit-pop-side)

The media's height and width can be constrained by the height of the text and the width of the container. Or it can be constrained by the the height of the text but overflow the container's width. (This behaves a bit like background-size:cover) Or the media can insist on being it's full height and width, pushing the container taller, and overflowing it's width (if it needs to).

Screen Shot 2019-03-28 at 11 15 16 AM

My working classes for this are:

  • grow-contain
  • grow-cover
  • grow-push

Thoughts? @amychurchwell @alexgibson @craigcook @johngruen?

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Fields

Priority

None yet

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions