search

UBCCM / UBC-DEF

University of British Columbia Digital Experience Framework (previously known as UBC-CLF)
MIT License
2 stars 4 forks source link

Define button / link styles, classes, names and markup #43

Open occupant opened 5 years ago

occupant commented 5 years ago

Problem description
The current design spec defines a series of button styles and ways to extend. We need to define, code and document the method for adding these consistently with a variety of markup (ie. a, button, p, div tags).

Button style link styles

Button style Links

Inline CTA link styles

Inline CTA Links

CTA link styles

CTA Links

Text link styles

Text Links

When adding icons within / before / after buttons or links, we additionally need to decide if these are inline elements (ie. an svg, which would allow any image to be added) or a set of background image elements (meaning we will have a limited set of icons that will be managed and included with CSS).

Proposed solution
In an initial attempt to replicate these styles, I have taken the approach of constructing these styles with an additive approach. For example, to produce this:

Button with envelope and separator

Instead of single class to output all required styling: .unit-button--blue-w-envelope-separator

I've used a series of classes that can be combined as required: .unit-button unit-button--light unit-button--has-icon-right unit-button--has-separator-right and an inline svg for the envelope.

eg. <a href="#" class="unit-button unit-button--has-icon-right unit-button--animate-icon unit-button--light">Unit button: light <svg role="presentation" class="unit-button__icon" viewBox="0 0 64 64"><use xlink:href="#icon-arrow-circle"></use> </svg></a>

<button class="unit-button unit-button--has-icon-right unit-button--animate-icon unit-button--light">Unit button: light <svg role="presentation" class="unit-button__icon" viewBox="0 0 64 64"> <use xlink:href="#icon-arrow-circle"></use> </svg></button>

We could provide a few classes to simplify common use cases (a button with an arrow on the right) as a compromise between simplicity and flexibility.

Additional context
Example css can be found here. Example markup can be found here.

hazuremon commented 4 years ago

Feature Review Checklist:

Check above and leave comment below for each review.

hazuremon commented 4 years ago

HTML Markup Review

Info: https://github.com/UBCCM/guides/tree/master/html

... Code sample (i.e. CodePen)

... Detail of review and tests

hazuremon commented 4 years ago

CSS Review

Info: https://github.com/UBCCM/guides/tree/master/css

... Code sample (i.e. CodePen)

... Detail of review and tests

hazuremon commented 4 years ago

JS Review (if needed)

Info: https://github.com/UBCCM/guides/tree/master/javascript

... Code sample (i.e. CodePen)

... Detail of review and tests

hazuremon commented 4 years ago

Responsive Behaviour Review

... Description of the expected behaviour

... Detail of review and tests

hazuremon commented 4 years ago

UX Review

... Description of the expected user experience, UX tests results, expected interactions, etc.

... Detail of review and tests. verification animations or interactions to be consistent with others

hazuremon commented 4 years ago

Design Review

... Screenshot, design system?

... Detail of review and tests

hazuremon commented 4 years ago

Web Accessibility Review

... For components, start with markup testing on https://achecker.ca/checker/index.php ... WCAG AAA for brand elements, WCAG AA for everything else

... Accessibility test results

hazuremon commented 4 years ago

Documentation

... Link to Documentation, focus on developer documentation.

occupant commented 4 years ago

https://codepen.io/occupant/pen/WNvZrLO