The new folder structure resembles ITCSS for all modules, keeping everything self-contained for being mantainable and scalable over time.
The Inverted Triangle CSS looks as follows:
- SETTINGS - variables and definitions
- TOOLS - mixins and functions
- GENERIC - resets/3rd party
- ELEMENTS - bare elements like H1, A, Sections etc.
- OBJECTS - class-based selectors
- COMPONENTS - specific UI components
- UTILITIES - utilities and helpers
Within the ITCSS, components have another classification following the GE Predix Design System including these categories:
- Principles - grid, content alignment
- Basics - buttons, links, tags
- Components - individual, self-contained UI elements
- Templates - header, footer, sidebars
- Features - capabilities and functionalities
- Applications - entry point for the user