Framework or CSS Grid?

I need to make a decision (fast) so I’m asking for opinions of the community.

I’m a designer and new to pinegrow - what an incredible tool!
I have a developer doing most of the backend code (nodejs) and I get help with the CSS.

We’re building a simple but highly customised e-commerce site and I don’t know whether to ditch the idea of using a framework and just going with HTML and CSS grid.

The front end of the site is highly customised and I have been finding myself overriding all of the bootstrap styles anyway - for example, buttons and their behaviour, the form fields with animation. Most of the framework components seem to need modification.
I also want the site to be lightning fast and a quick check in google pagespeed insights tells me there is a lot of overhead with the bootstrap theme (jquery and the bootstrap files)

So, I am thinking of scrapping the idea of using frameworks in favour of doing everything with CSS grid and plain old HTML essentially building our own framework I guess.

But my hesitation is the following:

This is an e-commerce subscription site so the backend will need reporting and dashboards a little like Shopify. Am I going to need to get a framework or is there a library of components I could use with the CSS grid? Is it easy to build reports etc without a framework? Does anyone have any good resource links?

If I add the framework later, will it mess up our custom vanilla HTML?
Am I making a mistake by ditching bootstrap or (or similar)?

Any insights or experiences appreciated.

Thanks in advance!

Sounds like a pretty huge task that is deserving of some good pre-planning. It sounds a little like you are mixing front-end and back-end concerns. Do you just need to make it look good, or do you have to make it work?
At any point, either way can work just fine for your front-end needs. Frameworks CAN help you build faster, if the design aesthetics they have built-in are right for your project. There are plenty of tools to minify CSS and JS. On the other hand, if you know and understand grid, it can put together a structured page rather quickly. You could even look into using some smaller framework to help get some of the styling laid down quickly - like Bulma
With regards to one of your last points. If this is a fairly large project you should decide on an approach from the start. If you add in a major framework like Bootstrap later you will be re-inventing and re-doing the whole project, IMO.

1 Like

Check out UIkit.

There is nice paid plugin for PG.

1 Like

Plain ol CSS and html (with grid) can get you pretty far now.

You’ll have all the layout control you would need, but the elements you place on the grid will still need to be created from scratch. If that task does not bother you, then you can make it look the way you want without the overhead of a framework. You can even have a great deal of interaction (menus, modals, etc) without needing javascript.

Some of the lighter weight frameworks mentioned can be good compromise if they have the look you’re after, but again they’re customization are limited and it ended up building my own from scratch.

The e-commerce question I have no experience with, all I’ve done is some light php database keeping.

if you go down the grid route, there is a limitation when it comes to sub-grid (aligning things on a grid within a grid). The next major release of the standard is expected to incorporate sub-grid tools and all the major browsers say they are ready to support it (except wEdge, probably).

1 Like