Unless you are a decently sized company who can employ graphic designers and can train people inhouse on your design system, the odds are you use a css framework of some sort or another. At Fulcrum, we largely defaulted to Bootstrap as a vast majority of our products were business systems targetted internally, using MVC/.Net. One of the common complaints of Bootstrap is that the sites all look the ‘same’, but this isn’t a problem for internal applications, and the fact we could leverage tht knowledge accross all our clients was good for us, and for them.

Yes, you can look at 90% of all Bootstrap sites and say, “That was made with Bootstrap.” Back when I started making apps for Windows, you could tell when a program had been written in PowerBuilder, Turbo C++, or even Visual Basic. (Particularly, Broderbund’s Turbo C++ as it had the default green check “OK” and red cross “Cancel” buttons.) The same thing was true then that is true now: most developers aren’t UI designers. Frameworks help us with the scaffolding so we turn our more consistent product with a clean look and unified affordances.

The need for frameworks today is decreasing. Much like the DOM has diminished (or completely removed) the need for jQuery, CSSGrid and Flexbox are eliminating the need for much of the Layout parts of a Framework. Responsive design, animation and rich controls pull you back into them. What you want from a framework is changing.

On BoxTurtle, I’m currently using MaterialUI, a set of React components that mimic the Material Design by Google. The development branch uses Grommet, as does this site. (Another React framework worth looking at, I think, is Ant Design, which would be good for internal webapps and business software.) I originally was exposed to Grommet through GatsbyJs, the tool I’m using to build this site.

MaterialUI, arguably the most populare React framework and Grommet sit at two ends of a spectrum. Material, by Google’s design, is prescriptive about how it is used, and tries to enforce a particlar UX aesthetic — the one Google wants for their apps and Android. It’s mobile-first, which is good, but it’s petty much only mobile friendly. I found myself fighting against it a lot on BoxTurtle — which might be an issue with my designs, and how I thought it should work, but might just have been that it was a poor fit. Admittedly, I’ve not though enough about how BoxTurtle should work on mobile; it’s not particularly meant to be.

The styling in Material is using a css in js solution that’s very different than the one I am used to using, which is styled-components. I like styled componets, because it really just uses classic CSS with some dyanmic choices through JS’s template strings. It reads like CSS, and I don’t have to constantly camel case all my properties, or worry about odd object syntax. You can wrap MaterialUI components in styled, and gain some of the use, but then you’re using two methods.

Grommet uses styled components, and I found that I was able to rebuild the site with no specialty styled components at all. Grommet was already exposing everything I was using (largely, CSSGrid). It has responsive features as well, so it’s time to start digging into them, and thinking about how this site, and BoxTurtle can work on mobile.

This site, as it exists today, is pretty much an out-of-the-box gatsby starter. (There was some styling on the blog posts that was bad, which I fixed.) I want this to be more than a blog — it needs to house my resume and portfolio, and I want to link to some of the smaller experiments I’v done with React and so forth. So I’m polishing off the Adobe XD skills (or learning them!) and I’ll be producing some designs over the next several days, and then re-implementing this site with Grommet and the real look and feel I want from this, as a mobile-first site.