cloudfour / drizzle

A streamlined tool for developing, documenting and presenting UI pattern libraries.
https://cloudfour.com/thinks/introducing-drizzle/
MIT License
666 stars 32 forks source link

Page item and label header markup has some quirks #28

Closed tylersticka closed 8 years ago

tylersticka commented 8 years ago
megnotarte commented 8 years ago

Small

gerardo-rodriguez commented 8 years ago

Hey @tylersticka, could I get some clarification from you on these tasks? Maybe some screenshots?

There's too much margin above the titles at large sizes (should probably be margin below thumbs instead).

Not sure what this is describing. :)

We should override padding on labels in case a project doesn't (they are a <ul> currently).

This isn't clear to me either. :P

We should allow pattern titles to wrap (not sure why we aren't).

Is this referring to the <pre> code?

Thanks!

tylersticka commented 8 years ago

There's too much margin above the titles at large sizes (should probably be margin below thumbs instead).

Currently the page titles have margin above them. This is fine at small sizes:

screen shot 2016-05-13 at 3 31 28 pm

But at larger sizes when the layout shifts, the upper margin looks kinda funky. This isn't super noticeable until you have a longer description, which we do in other projects:

screen shot 2016-05-13 at 3 31 49 pm


We should override padding on labels in case a project doesn't (they are a <ul> currently).

The labels are inside of a <ul> element, but we aren't overriding the list display of that element in our Drizzle CSS. But if we disable or change toolkit.css, they get excess padding on the left:

screen shot 2016-05-13 at 3 36 14 pm

This is because our toolkit.css removes padding-left from all <ul> elements. But that's fairly uncommon in our projects, so ideally our <ul> would have its left padding removed (perhaps with a utility class) to avoid this issue.


We should allow pattern titles to wrap (not sure why we aren't).

Is this referring to the <pre> code?

Nope, the pattern headings. They have a white-space: nowrap utility on them, which means longer titles won't break at narrow widths:

screen shot 2016-05-13 at 3 39 45 pm


@mrgerardorodriguez Responses above, let me know if you have more questions.

gerardo-rodriguez commented 8 years ago

Cool, thanks @tylersticka! 😀