Andras/BoundlessFlowCampus2K

Fork 0

Research how to enforce platform specific settings #346

New issue

Open

opened 2026-04-16 10:02:54 +00:00 by a24vinla · 2 comments

a24vinla commented

2026-04-16 10:02:54 +00:00

Collaborator

Certain views and components will have to differ depending on platform (phone, desktop, TV-screen). How do we efficiently enforce this?

a24vinla added the

research

label

2026-04-16 10:02:54 +00:00

c22abdal was assigned by c24elipe

2026-04-21 08:51:39 +00:00

c22abdal commented

2026-04-21 11:08:27 +00:00

Collaborator

Brace yourselves!

Enforcing consistent and responsive UI across platforms

1-Ensuring Visual Consistency

There is no one way to effectively enforce a 100% match on every platform. But you can maintain consistency and responsiveness.
In order to maintain a consistent design across the application:

There must be a design system that defines the following:

Colors
Typography
Spacing
Component styles : (Buttons, Cards, Charts, etc)
Only one place to define these rules that all other components and features must refer to. This already exists: Theme.css in the project.

This also include having design tokens which store

colors
font sizes
spacing
border radius
etc

Basically every visual design should have reusable tokens.

2- Making the application Responsive

Responsive design ensures the application works on different screen sizes (make webpage pretty, EVERYWHERE!).

Flexible layouts

use in CSS:

Flexbox
CSS Grid

These allow elements to adjust automatically based on available space.

Relative units (IMPORTANT)

Instead of using fixed sizes such as px, use:

%
- sizes an element based on its parent (div, border, card, screen, etc.)
em, rem
- relative to the font size of the parent element (ex: font-size: 2em. means-> twice the parent's font size)
- use when: padding, margins tied to text
- rem, same as em, but it's based on the root of the element not the parent (ex: contianer_title-> box_title-> text: rem will be based on contianer_title).
vw, vh
- vw and vh = viewport width/height
- ex (width: 50vw = 50% of the screen's width)

Media Queries

"@media" is used to apply CSS styles only under certain conditions, usually based on screen size.
EX: this means= when the screen is 768px or smaller, change the layout as follows.

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

3- Cross-platform Compatibility

Different browsers and operating systems may render elements differently.
To avoid this:

Use standard wb tech (JS, HTML, CSS)
Avoid unsupported or experimental features
Use CSS resets or normalization to reduce browser differences
Test in multiple browsers

4-Test and validate

To ensure everything works you must always test on different platforms, screen sizes, and multiple browsers.

Brace yourselves! # Enforcing consistent and responsive UI across platforms ## 1-Ensuring Visual Consistency There is no one way to effectively enforce a 100% match on every platform. But you can maintain consistency and responsiveness. In order to maintain a consistent design across the application: There must be a design system that defines the following: - Colors - Typography - Spacing - Component styles : (Buttons, Cards, Charts, etc) Only one place to define these rules that all other components and features must refer to. This already exists: **_Theme.css_** in the project. This also include having **design tokens** which store - colors - font sizes - spacing - border radius - etc Basically every visual design should have reusable tokens. ----- ## 2- Making the application **Responsive** Responsive design ensures the application works on different screen sizes (make webpage pretty, EVERYWHERE!). ### Flexible layouts use in CSS: - Flexbox - CSS Grid These allow elements to adjust automatically based on available space. ### Relative units (IMPORTANT) Instead of using fixed sizes such as _px_, use: - % - sizes an element based on its parent (div, border, card, screen, etc.) - em, rem - relative to the font size of the parent element (ex: font-size: 2em. means-> twice the parent's font size) - use when: padding, margins tied to text - rem, same as em, but it's based on the root of the element not the parent (ex: contianer_title-> box_title-> text: rem will be based on contianer_title). - vw, vh - vw and vh = viewport width/height - ex (width: 50vw = 50% of the screen's width) ### Media Queries "@media" is used to apply CSS styles only under certain conditions, usually based on screen size. EX: this means= when the screen is 768px or smaller, change the layout as follows. ``` @media (max-width: 768px) { .container { flex-direction: column; } } ``` ------ ## 3- Cross-platform Compatibility Different browsers and operating systems may render elements differently. To avoid this: - Use standard wb tech (JS, HTML, CSS) - Avoid unsupported or experimental features - Use CSS resets or normalization to reduce browser differences - Test in multiple browsers ----- ## 4-Test and validate To ensure everything works you must always test on different platforms, screen sizes, and multiple browsers.

c22abdal added the

needs review

label

2026-04-21 11:08:48 +00:00

b24krila was assigned by b24johka

2026-04-23 10:07:09 +00:00

b24krila commented

2026-04-23 11:18:03 +00:00

Collaborator

Another technique that was pointed out was "@media" which is good since this can be used to enforce a standard across the codebase by allowing visual changes to be applied based on the screen size.

To ensure that the project stays consistent across the codebase, it is important that the breakpoints are clearly defined centrally and reused consistently throughout the project.

Example

:root {
     --breakpoint-tablet: 768px;
     --breakpoint-desktop: 1200px;
     --breakpoint-tv: 1920px;
}

And all media queries should reference these values rather than introducing their own custom breakpoints with this we can enforce consistency throughout the project.

Then with the combination of design tokens and breakpoints we can have a single way for styling and a single way to handle responsive behavior.

Overall the research is solid and provides a good foundation and will help us with consistency and responsiveness across different devices and browsers throughout our project. By adjusting the part regarding @media queries to only reference the predefined breakpoints this research becomes directly usable and will give us a clear way to enforce these principles.

The research points out the correct core principles for maintaining a visual consistency and responsiveness website across multiple different devices and browsers. It points out techniques such as design tokens, responsive units and flexible layouts and more. Another technique that was pointed out was "@media" which is good since this can be used to enforce a standard across the codebase by allowing visual changes to be applied based on the screen size. To ensure that the project stays consistent across the codebase, it is important that the breakpoints are clearly defined centrally and reused consistently throughout the project. ### Example ``` :root { --breakpoint-tablet: 768px; --breakpoint-desktop: 1200px; --breakpoint-tv: 1920px; } ``` And all media queries should reference these values rather than introducing their own custom breakpoints with this we can enforce consistency throughout the project. Then with the combination of design tokens and breakpoints we can have a single way for styling and a single way to handle responsive behavior. Overall the research is solid and provides a good foundation and will help us with consistency and responsiveness across different devices and browsers throughout our project. By adjusting the part regarding @media queries to only reference the predefined breakpoints this research becomes directly usable and will give us a clear way to enforce these principles.

b24krila added

reviewed

and removed

needs review

labels

2026-04-23 11:18:10 +00:00