Global Styling and Responsive Design

[IsabellUrban]

Global Styling and Responsive Design

Value Proposition

As a user

I want a simple and modern Design

so that I have a better User Experience across all screens.

Description

Consistency in UI design ensures that elements like colors, fonts, spacing, and overall layout remain uniform throughout the application. The Layout works for all screen sizes.

Acceptance Criteria

• Font sizes, line heights, and font families are consistent across the website and responsive to different screen sizes.
• A consistent color palette is applied globally (e.g.: primary, secondary, background, and accent colors).
• Consistent spacing (margins, padding, etc.) is applied across components using global spacing variables.
• Layout grids and containers are used consistently across pages to maintain a uniform structure.
• The website should be fully responsive across common screen sizes, while maintaining Flashcard usability.
• Interactive elements (e.g. buttons, links, form fields) should be intuitive to use on both touch and non-touch devices.
• The Menu should unmount when the Collections Link is clicked.
• The Footer should be fully visible when a Toast Message is staged.

Tasks

• [ ] Create feature branch feature/global-styling
• [ ] Define font sizes, line height and font families and implement those in styles.js
• [ ] Define variables for colors in styles.js
• [ ] Apply styling that adjusts design to all common screen sizes (mobile: 320px-767px, tablet: 768px-1023px, desktop: 1024px and above)
• [ ] Apply styling to interactive elements (e.g. buttons, links, form fields) to highlight those ad apply pseudo classes where necessary
• [ ] Add onClick handler function to Collections Link to unmount menu when clicked
• [ ] Style the ToastMessage so that it doesn't overlap Footer

[ahohnsen]

Sounds good 🙂

There is just a little mistake in your value proposition:

As a user

I want a simple and modern Design

so that I have a better User Experience across all screens.