VOL. III

FULLHAUS DEV DUNGEON is a monthly-ish dev huddle for updates on the FULLHAUS tech stack, team related stuff, for building team culture and promoting exchange among us 🎉.

Tech Stack Updates

1. Logical Properties
2. ITCSS
3. PNPM
4. Recap
5. Uncle Bob

Logical Properties

CSS Logical Properties - Introduction

1. Definition: New method to declare properties like width, height, padding, margin, and more based on text direction rather than screen dimensions.
2. Traditional vs Logical:
   • Physical: (left, right, top, bottom)
   • Logical: (block-start, block-end, inline-start, inline-end).

Importance of Logical Properties

Internationalization: Adapt layouts easily for different writing directions (LTR, RTL, vertical).

Example:

.avatar { margin-right: 1rem; }
html[dir="rtl"] .avatar { margin-right: 0; margin-left: 1rem; }

.avatar { margin-inline-end: 1rem; }

Benefits of Logical Properties

1. Internationalization: Seamlessly adjust to different text directions.
2. Maintainability: Reduce the complexity and need for multiple CSS files.
3. Flexibility: Increase reusability and adaptability of stylesheets.
4. Future-Proofing: Align with modern web standards for better compatibility.

Logical vs Physical Properties

Introduction to Our CSS Structure

The CSS structure of the Gewinnspiel project

@use '../settings/bootstrap';
@use '../settings/components';

body {
  min-block-size: 37.5rem;
  overflow-x: hidden;
  overscroll-behavior: none;
  padding-block-start: components.$c-main-header-height;
  position: relative;

  @include bootstrap.media-breakpoint-up(xl) {
    padding-block-start: components.$c-main-header-height-xl;
  }

   &.layout-transparent-header {
      @include bootstrap.media-breakpoint-up(xl) {
         padding-block-start: 0;
      }
   }
   &.mobile-nav-active {
    overflow: hidden;
   }
}

// components/_alert-dialog.scss

@use '../settings/components';

.modal.c-alert-dialog {
    modal-footer {
        border-block-start: 0;
        padding: 1.5rem 2rem;
    }
};

// components/_index.scss

@import 'alert-dialog';

// style.scss

@import 'components';

note

Bootstrap does not currently support @use rules, therefore we use @import here. However, you should avoid using @import and use @forward instead as @import is discouraged and will be eventually removed from Sass entirely.

Read Sass' docs for more info

ITCSS

What is ITCSS?

1. ITCSS stands for Inverted Triangle CSS.
2. It helps organize your project CSS files to better deal with global namespace, cascade, and selectors specificity.
3. ITCSS can be used with or without preprocessors and is compatible with CSS methodologies like BEM, SMACSS, or OOCSS.

ITCSS Layers

Those layers are:

• Settings: Variables for fonts, colors, etc.
• Tools: Global mixins and functions (no CSS output).
• Generic: Reset/normalize styles, box-sizing.
• Elements: Styling for basic HTML elements.
• Objects: Undecorated design patterns (e.g., media object).
• Components: Specific UI components.
• Utilities: Helper classes with high specificity.

Benefits of ITCSS

1. Organization: Clear separation of concerns. 2Scalability: Manage large codebases effectively. 3Maintainability: Avoid specificity wars, maintain a healthy specificity graph.

Tips on Using ITCSS

• Adjust ITCSS to your needs (You can choose the layers you need and their order).

• Use BEMIT naming convention (Use Namespaces (.c-user, c-user--premium .o-media, etc).

• Organize layers into subfolders using preprocessors

• Use one file per component (Store each component in its own file).

• Limit Nesting (Limit nesting to 2 levels).

• Avoid overusing objects or omit them completely.

• Separate spacing system from components to avoid conflicts.

• Don’t worry about styles repetition (Component-based architecture might lead to style repetition).

ITCSS Folder Structure

Example from GEWINNSPAREN Projekt

── Stylesheet/
    ├── components/
    │   └── alert-dialog.scss
    │   └── _index.scss
    ├── elements/
    │   └── _mixins.scss
    │   └── _index.scss
    ├── generic/
    │   ├── _box-sizing.scss
    │   └── _index.scss
    ├── objects/
    │   └── _typography.scss
    │   └── _index.scss
    ├── settings/
    │   └── _colors.scss
    ├── tools/
    │   ├── _fa-icons.scss
    │   └── _index.scss
    ├── trumps/
    │   └── _fullhaus-content-elements.scss
    │   └── _index.scss
    ├── utilities/
    │   └── _background.scss
    │   └── _index.scss
    └── style.scss

PNPM

[10:54 AM] David Bonhagen
Markus, wo verwenden wir überall schon pnpm?

[10:54 AM] David Bonhagen
Und warum?

[2:12 PM] Markus Sommer
In sehr vielen Projekten. Diese änderung kam von Binary.

[2:13 PM] Markus Sommer
pnpm ist resourcen schonender

Dungeon Recap

• DDEV ✅
• Pull Requests ✅
• GitHub Actions ✅
• Accessibility Task Force ❌

Uncle Bob's Advise

Boy Scout rule: Always leave the campground cleaner than you found it. If you find a mess on the ground, clean it up regardless of who might have made the mess. Every time you are in an area of the code doing work, always leave the code a little cleaner, not a little messier, than you found it.

Friendly reminder: Commit Message Format