Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[OUDS] Tokens: Grid #2609

Open
1 task
julien-deramond opened this issue Jul 10, 2024 · 0 comments · May be fixed by #2744
Open
1 task

[OUDS] Tokens: Grid #2609

julien-deramond opened this issue Jul 10, 2024 · 0 comments · May be fixed by #2744
Labels
feature
Milestone
OUDS

Comments

@julien-deramond
Copy link
Member

julien-deramond commented Jul 10, 2024 •
edited
Loading

Description

The aim of this issue is to study and implement the grid tokens taking into account the cohesive multi-platform approach, the customization by libraries inheriting OUDS Web, but also what we're using for OUDS Web: Boosted, Bootstrap etc.

  • Define the possibilities
  • Define the constraints
  • Define the impacts
  • Implement the tokens (with a future Style Dictionary usage in mind)

Reminder: there will be in the end 3 layers of tokens:

  • Raw primitive values: Insertion of brand foundations.
    • These tokens will be customizable by libraries inheriting OUDS Web.
    • These tokens cannot be used by developers using OUDS Web.
  • Semantic applications: Depends on raw primitive values.
    • Mapping between these tokens and the raw primitive values will be customizable by libraries inheriting OUDS Web.
    • These tokens can be used by developers using OUDS Web.
  • Component applications: Depends on semantic applications.:
    • Mapping between these tokens and the semantic tokens should rarely be customized by libraries inheriting OUDS Web.
    • These tokens can be used by developers using OUDS Web.

Tokens: Grid (Composite)

Raw primitive values

$ouds-grid-width-100: 360 !default;
$ouds-grid-width-200: 390 !default;
$ouds-grid-width-300: 480 !default;
$ouds-grid-width-400: 768 !default;
$ouds-grid-width-500: 1024 !default;
$ouds-grid-width-600: 1440 !default;
$ouds-grid-width-700: 1680 !default;
$ouds-grid-width-800: 1920 !default;

$ouds-grid-min-width-100: 1 !default;
$ouds-grid-min-width-200: 390 !default;
$ouds-grid-min-width-300: 480 !default;
$ouds-grid-min-width-400: 736 !default;
$ouds-grid-min-width-500: 1024 !default;
$ouds-grid-min-width-600: 1320 !default;
$ouds-grid-min-width-700: 1640 !default;
$ouds-grid-min-width-800: 1880 !default;

$ouds-grid-max-width-100: 389 !default;
$ouds-grid-max-width-200: 479 !default;
$ouds-grid-max-width-300: 735 !default;
$ouds-grid-max-width-400: 1023 !default;
$ouds-grid-max-width-500: 1319 !default;
$ouds-grid-max-width-600: 1639 !default;
$ouds-grid-max-width-650: 1680 !default;
$ouds-grid-max-width-700: 1879 !default;
$ouds-grid-max-width-800: 1920 !default;

$ouds-grid-margin-100: 16 !default;
$ouds-grid-margin-300: 24 !default;
$ouds-grid-margin-400: 28 !default;
$ouds-grid-margin-500: 32 !default;
$ouds-grid-margin-600: 36 !default;
$ouds-grid-margin-700: 40 !default;
$ouds-grid-margin-1000: 52 !default;
$ouds-grid-margin-1100: 56 !default;
$ouds-grid-margin-1700: 80 !default;
$ouds-grid-margin-2500: 112 !default;

$ouds-grid-column-gap-10: 1 !default;
$ouds-grid-column-gap-100: 8 !default;
$ouds-grid-column-gap-200: 16 !default;
$ouds-grid-column-gap-300: 20 !default;
$ouds-grid-column-gap-400: 24 !default;
$ouds-grid-column-gap-600: 32 !default;
$ouds-grid-column-gap-800: 40 !default;

$ouds-grid-column-count-100: 1 !default;
$ouds-grid-column-count-200: 2 !default;
$ouds-grid-column-count-400: 4 !default;
$ouds-grid-column-count-600: 6 !default;
$ouds-grid-column-count-800: 8 !default;
$ouds-grid-column-count-1000: 10 !default;
$ouds-grid-column-count-1200: 12 !default;

Semantic applications: Grid (Composite)

$ouds-grid-2xs-width: $ouds-grid-width-100 !default;
$ouds-grid-2xs-min-width: $ouds-grid-min-width-100 !default;
$ouds-grid-2xs-max-width: $ouds-grid-max-width-100 !default;
$ouds-grid-2xs-margin: $ouds-grid-margin-100 !default;
$ouds-grid-2xs-column-gap: $ouds-grid-column-gap-100 !default;
$ouds-grid-2xs-column-count: $ouds-grid-column-count-400 !default;

$ouds-grid-xs-width: $ouds-grid-width-200 !default;
$ouds-grid-xs-min-width: $ouds-grid-min-width-200 !default;
$ouds-grid-xs-max-width: $ouds-grid-max-width-200 !default;
$ouds-grid-xs-margin: $ouds-grid-margin-300 !default;
$ouds-grid-xs-column-gap: $ouds-grid-column-gap-100 !default;
$ouds-grid-xs-column-count: $ouds-grid-column-count-400 !default;

$ouds-grid-sm-width: $ouds-grid-width-300 !default;
$ouds-grid-sm-min-width: $ouds-grid-min-width-300 !default;
$ouds-grid-sm-max-width: $ouds-grid-max-width-300 !default;
$ouds-grid-sm-margin: $ouds-grid-margin-400 !default;
$ouds-grid-sm-column-gap: $ouds-grid-column-gap-100 !default;
$ouds-grid-sm-column-count: $ouds-grid-column-count-400 !default;

$ouds-grid-md-width: $ouds-grid-width-400 !default;
$ouds-grid-md-min-width: $ouds-grid-min-width-400 !default;
$ouds-grid-md-max-width: $ouds-grid-max-width-400 !default;
$ouds-grid-md-margin: $ouds-grid-margin-500 !default;
$ouds-grid-md-column-gap: $ouds-grid-column-gap-400 !default;
$ouds-grid-md-column-count: $ouds-grid-column-count-600 !default;

$ouds-grid-lg-width: $ouds-grid-width-500 !default;
$ouds-grid-lg-min-width: $ouds-grid-min-width-500 !default;
$ouds-grid-lg-max-width: $ouds-grid-max-width-500 !default;
$ouds-grid-lg-margin: $ouds-grid-margin-700 !default;
$ouds-grid-lg-column-gap: $ouds-grid-column-gap-400 !default;
$ouds-grid-lg-column-count: $ouds-grid-column-count-600 !default;

$ouds-grid-xl-width: $ouds-grid-width-600 !default;
$ouds-grid-xl-min-width: $ouds-grid-min-width-600 !default;
$ouds-grid-xl-max-width: $ouds-grid-max-width-600 !default;
$ouds-grid-xl-margin: $ouds-grid-margin-1100 !default;
$ouds-grid-xl-column-gap: $ouds-grid-column-gap-600 !default;
$ouds-grid-xl-column-count: $ouds-grid-column-count-1200 !default;

$ouds-grid-2xl-width: $ouds-grid-width-700 !default;
$ouds-grid-2xl-min-width: $ouds-grid-min-width-700 !default;
$ouds-grid-2xl-max-width-specific-tools: $ouds-grid-max-width-700 !default;
$ouds-grid-2xl-max-width-public-website: $ouds-grid-max-width-650 !default;
$ouds-grid-2xl-margin: $ouds-grid-margin-1700 !default;
$ouds-grid-2xl-column-gap: $ouds-grid-column-gap-600 !default;
$ouds-grid-2xl-column-count: $ouds-grid-column-count-1200 !default;

$ouds-grid-3xl-width: $ouds-grid-width-800 !default;
$ouds-grid-3xl-min-width: $ouds-grid-min-width-800 !default;
$ouds-grid-3xl-max-width: $ouds-grid-max-width-800 !default;
$ouds-grid-3xl-margin: $ouds-grid-margin-2500 !default;
$ouds-grid-3xl-column-gap: $ouds-grid-column-gap-800 !default;
$ouds-grid-3xl-column-count: $ouds-grid-column-count-1200 !default;

Study

  • Study the architecture of these tokens, and define the technical details

Technical details

TODO

  • A compact/compressed mode is currently planned for the web only (it won't be considered for the mobile platforms for now)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature
Projects
[OUDS] Project
Status: In Progress
Milestone
OUDS
1 participant
@julien-deramond