Theme: CSS framework tech discussion

[sacarney]

I use 'framework' here as a general term for a component/design system, not that we'd necessarily want to use a pre-made one like Bootstrap.

I suppose I should just open the floor? What are pros and cons of different options? This is an opportunity to try something new, too. Anything we want to try? What are considerations for choosing a way to approach this?

[sacarney]

My input:

• I like the idea of stretching our legs and creating a layout framework based on CSS Grid.
• I enjoy Bootstrap 4, but it's quite big.
• I'm quite the fan of bulma.io ...

I like pre-made frameworks because it handles a lot of styling I find boring (like form fields). I dislike pre-made frameworks because good luck re-styling them.

[NickDickinsonWilde]

Note that CSS grid isn't yet supported by all browsers (mostly due to the abysmal speed that too many people update their browsers). So even if a CSS grid based solution is chosen, it will need fallbacks

[keltique]

What I've been able to find on a quick search : https://caniuse.com/css-grid/embed https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement

Apologies if this is all known and super obvious.

[NickDickinsonWilde]

Yeah, that's what I meant about fallback; fallback sorta equals progressive enhancement. That link however, explains it way clearer than I could. 👍

[RainbowArray]

CSS Grid actually has excellent browser support because of the work done coordinating that. Safari, Chrome and Firefox all released support around the same time. Edge is scheduled to release support soon. It's totally doable to use CSS Grid now and provide some lightweight fallbacks to take advantage of progressive enhancement.

CSS frameworks like Bootstrap have their place, but the future is definitely Grid, Flexbox and other layout tools still coming down the pike (regions and exclusions in particular). There was a lot of interest in making use of CSS Grid in the meeting, and I think that sounds like an exciting way to go.

[LauraRocks]

I'm a little bit unsure about my opinion about this. For sure I would like to go with "the future" and not make another framework-based theme, but then on the other hand I just made a custom theme without Bootstrap (first in three years) and realised how much you actually have to design and write css apart from just the grid system (and also how little I had thought about the fact...). But I also think in the meeting there was clear interest in going with CSS grid.

[sacarney]

I do like pre-made frameworks because I don't have to style all things I don't like styling like forms and inputs. Ha.

It may not be mutually exclusive. We can make our own CSS Grid layout framework, and take advantage of pre-built framework pieces we like.

[LauraRocks]

I don't know if this is any use, but I just went through all the D8 themes that have a stable release (I have never actually looked what themes there are) and looked for any non-bootstrap themes which are lightweight and has a modern frontend stack or tools and collected this list (I'm sure I missed some, I just looked at the teaser texts and then clicked if it looked promising):

https://www.drupal.org/project/basic https://www.drupal.org/project/fortytwo https://www.drupal.org/project/cog https://www.drupal.org/project/radix https://www.drupal.org/project/twentyseventeen

Pattern Lab themes: https://www.drupal.org/project/bear_skin https://www.drupal.org/project/patternlab https://www.drupal.org/project/emulsify https://www.drupal.org/project/kashmir

[cboyden]

Radix is Bootstrap-based. My team uses the D7 version as a base theme, but I'm not sure how much we've ripped out or added.

[laughnan]

⚠️ Looking to getting this ported to https://www.drupal.org/project/ddi_contrib in the near future

[laughnan]

Going to close this. We're moving all issues onto Drupal.org: https://www.drupal.org/project/issues/ddi_contrib