Modules to build for this library

[BrianSipple]

See: https://github.com/Ticketfly-UI/ticketfly-css/tree/master/modules

Current Published Modules on NPM

*Note: This is still an ongoing list that I'll also try to make a bit more descriptive.

• base-settings
  • core-variables
  • spacing-variables
  • color-variables
  • animation-variables
  • box-shadow-variables
  • breakpoint-variables
  • typography-settings
  • typography-variables

• utilities
  • spacing
  • overflow
  • sizing
  • z-index
  • text
  • display
  • flex
  • positioning
  • common
    • Miscellaneous, one-off concerns. For example, something that defines cursor: pointer.
  • v-align

• object-patterns
  • grid
    • Flexbox for version 1, but I definitely want to begin exploring implementations based on the CSS Grid Module as it becomes standardized and more supported.
  • responsive grid
    • Same as grid, but with more helpers that correspond to breakpoints
  • tap-targets
  • boxes
    • standard blocks with uniform inset padding
    • "squished" blocks with reduced vertical padding
    • "stretched" blocks with extra vertical padding

• normalize

• garnishes
  • borders
  • color
  • typography
  • border-radius
  • box-shadow

[ksin]

Some missing pieces surfaced while using the addon:

• garnishes

• cursor style
• font-weight (part of typography)

• utilities

• vertical-align

• base-settings

• font-family (Gibson and Akkurat-Pro for Ticketfly UI. part of typography)
• font-size (14px, 16px, etc. part of typography)

Specifically, CSS that needed filling in / overrides in this project https://github.com/Ticketfly/email-service-client/pull/6

[BrianSipple]

@ksin

• Font-weight should be supported as part of ticketfly-css-typography-garnishes.

• Font sizing and specific font families is definitely something that I'm looking in to for ticketfly-css-typography-settings.

• See the note about cursor as a potential "common" utility. It could be a garnish, though 🤔.

• vertical-align could definitely be a utility module. How does v-align-utilities sound?

  • Just out of curiosity, where are you currently using vertical-align? Often, that's something that flexbox can be a handy solution for, as well (see: ticketfly-css-flex-utilities).

[ksin]

I think a cursor garnish would be useful. At least until all the inconsistent behavior between links and buttons are sorted out in ticketfly-ui.

Vertical align: I've been using u-va-t / u-va-b / u-va-m

Examples:
https://github.com/Ticketfly/email-service-client/blob/97c0683600439ac31a7fa4450acf2f512a040f07/app/templates/components/campaigns-table.hbs#L20

https://github.com/Ticketfly/email-service-client/blob/97c0683600439ac31a7fa4450acf2f512a040f07/app/templates/components/top-bar.hbs#L1

https://github.com/Ticketfly/email-service-client/blob/97c0683600439ac31a7fa4450acf2f512a040f07/app/styles/utilities.css

[ksin]

Anyway I can help push forward typography-settings? Do you have some specs in mind?

[ksin]

• utility to set position: relative / absolute / fixed

[BrianSipple]

@ksin Just released:

https://github.com/Ticketfly-UI/ticketfly-css-position-utilities
https://github.com/Ticketfly-UI/ticketfly-css-v-align-utilities