Thoughts with de-coupling framework foundation with barebones theme

[enkota]

Apologies if this is the wrong area but thought I would start some discussion.

We have found each new store theme we create is bound to an out-dated framework "Foundation". It would be great to offer barebone versions of cornerstone that allows developers to swap out different CSS frameworks (e.g - Tailwind CSS/Bootstrap).

What we end up doing is adding function for Bootstrap on top of the cornerstone, but this adds unnecessary bloat to page load and backward hacking to ensure compatibility between both frameworks.

As an example, Shopify offer a Slate base theme which can be compiled from the CLI and only includes necessary function files with no styling.

Giving designers/developers less hassle at starting Stencil themes for clients would be a huge step in the right direction to speed up the build and maintainability process.

Interested to hear some thoughts from the community about this and moving forward with new BC features such as the drag-drop builder shown at the recent town halls!

[fthobe]

+1

[P4ulJC]

I'm about to create a new theme based off Cornerstone and I too would really would like to incorporate TailwindCSS but it doesn't look doable in a clean and sensible manner. So I totally agree that it would be good to have the option to conveniently manage the CSS side of a theme in a separate and easy to manage fashion (decoupled). I think it looks all too problematic to use TailwindCSS so I'll probably stick to the default Cornerstone Sass approach. Quite disappointing because TailwindCSS is one of my must-use tools these days.

[enkota]

I'm about to create a new theme based off Cornerstone and I too would really would like to incorporate TailwindCSS but it doesn't look doable in a clean and sensible manner. So I totally agree that it would be good to have the option to conveniently manage the CSS side of a theme in a separate and easy to manage fashion (decoupled). I think it looks all too problematic to use TailwindCSS so I'll probably stick to the default Cornerstone Sass approach. Quite disappointing because TailwindCSS is one of my must-use tools these days.

Indeed. It's such a sore point developing these days on BC. We've tried in the past to start from scratch, but there's so many dependancies to foundation and citadel that it makes it almost impossible from a logistical standpoint.

Wonder if anyone from BC on here has thoughts on the matter in 2020?

[Ben5874]

We have been considering this too. With other well known frameworks and cms, there have always been the Default theme which is designed to look functional but also a theme which is bare-bones to allow developers to work on cleanly without needing to override, which also leads to conflicts. A 'stark', 'clean' or similar base theme for BigCommerce would assist developers greatly. I wonder how many high-end BC stores ever actually use vanilla Cornerstone? The majority of theme all build on top of it into something different, therefore it seems advantageous and sensible to have an official base theme which can also receive the BC updates which developers can more easily create from.

[ikoruk]

That would be great! Because of the conflicts it is indeed really difficult to update to the newest fixes. And the CSS becomes quite bloated and a mess when not needing to use any Foundation classes or features.

[arosesiejdev]

Hi, bumping this discussion to see if anyone had an viable solution or a stripped-down Cornerstone theme now in 2022. Looking to move away from Foundation/Citadel and use Tailwind or Bootstrap as a CSS framework.

[P4ulJC]

I dropped Tailwind pretty quickly and now use plain CSS in non BigCommerce projects. See Jason Knight's rants on Medium about Tailwind. I came to exactly his conclusion before I discovered his critiques about it. With custom properties and the added extras you now get in CSS I don't feel the need for Sass either in personal projects.

I've only created one new BC theme in 2022 so I haven't had many opportunities to try to rethink how the CSS is created. But I think the best approach is to go with the default Cornerstone sass but exclude some of the sass files and replace files/code with your own and gradually strip it down as you go. For instance, I get rid of the grid mixins and use native CSS grid instead - basically drop the antiquated stuff that's well supported natively these days. Generally the BigCommerce stencil toolkit is a pleasure to work with once you know your way around. The Javascript side of it is good in my opinion. But for CSS it would be good if they dropped Foundation I think. It adds so many extra bits and pieces you need to dig through when changing simple little parts of the design.

[enkota]

I've been slowly working on our own theme in-house. I've hacked together Tailwind into it as that's what I use. However, the complier the BC dashboard uses when you make changes/upload a theme is still using a really outdated saas compiler, this causes it to fail on things that Tailwind generates (rgba(0,0,0,0) for example)...

Starting from scratch has let me completely remove the need for Citadel/Foundation that is incredibly outdated at this point.

Hoping to continue powering though. There is a lot of codework involved to get the basics sorted.

[ikoruk]

Just to say that this and the unmaintainability of Cornerstone code is the primary reason I left BC for a competitor.