In ITCSS what approach would you use to style a 2 and 3 column layout?

Question

I have a medium sized web project that's growing. Here's what my ITCSS architecture looks like:

1. Settings ...... global vars, config switches, brand colors.
2. Tools ......... default mixins and functions, 3rd party tools.
3. Generic ....... ground-zero styles (Normalize, resets, box-sizing).
4. Elements ...... unclassed HTML elements (type selectors).
5. Objects ....... cosmetic-free design patterns, agnostically named (wrappers, layouts, media).
6. Components .... designed components, chunks of UI, group of objects.
7. Themes ........ thematic styles, like seasonal or admin section.
8. Force ......... Overrides, helpers, !important styles.

Where would you create the Layout related files?

• Objects/o-3-column-layout.scss
• Components/c-3-column-layout.scss

Answer 1

The ITCSS (and even your own description of the ITCSS levels above) recommends putting layout-related files under Objects.

Layout-related CSS are 'class-based selectors which define undecorated design patterns' - rows, columns, spacers, pushes/pullers, etc.