Styling Audit - Githubissues

Interactive-Design-and-Technology / interactive-learning

Generate Interactive Learning Activities for your LMS using JavaScript.

https://interactive-design-and-technology.github.io/interactive-learning/

0 stars 2 forks source link

Styling Audit #30

Closed FeXd closed 1 year ago

FeXd commented 1 year ago

All examples were previously using their own style sheet. This was ok, but it would be better if they shared a stylesheet and thus had consistent styles.

Create a new style sheet in the root of the project that can be used for ALL different types of interactive learning assessments.

Note that since this story touches many different files, it should be done when there are no open pull requests and be sure to communicate with the team so we don't create any unnecessary conflicts.

Raunaq27 commented 1 year ago

Color picker

I was thinking we could use this color

FeXd commented 1 year ago

Color looks good, we use CSS Variables we could easily change it later as well: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

FeXd commented 1 year ago

Some inspiration from Google Forms: https://docs.google.com/forms/d/e/1FAIpQLScjoZ7DfL1jZizo_V3CtQ35qbSXMhnmie3wGjpE1k0liZYgcw/viewform?usp=sf_link

Consider updating form styling to be more similar with rounded corners?

Raunaq27 commented 1 year ago

Made a wireframe for the styling

FeXd commented 1 year ago

Generally looks good but I would not abbreviate "Question" just use the full word. Might be cleaner to have background be colored and boxes be white like the example. May be hard to read on green. But otherwise, an improvement.

Raunaq27 commented 1 year ago

FeXd commented 1 year ago

A bit of an improvement, but I'd like to see changes:

options and questions should also be inside of those round containers.
header and footer are also square while the description is rounded - be consistent
the green is too intense, dial it back a bit

FeXd commented 1 year ago

@Raunaq27 previewed his work today:

Feedback:

add more side padding to buttons (typically double the top / bottom)
move the Copy Code to Clipboard outside of <pre>
wrap <pre> and <button> inside an element (maybe <aside> or <section>) ensure that it has rounded corners consistent with other sections
added questions and answers are missing the "Type the question here" placeholder
add more padding to paragraph description at the top
add padding to <body> maybe 1em or so

Raunaq27 commented 1 year ago

This is how the form looks