Lean framework for Hugo sites

Hello,

I’ve a need to build/migrate few small-medium sites to Hugo and wonder about which CSS framework to use to style them.

Considering that most of the themes are built with Bootstrap, it looks as natural first choice, but I consider it too big/bloated with the problem that too many sites are looking too similar.

Other choices are frameworks like Semantic-UI, Foundation etc., but I’m curious if Hugo users have experience with some ‘alternative’ and leaner frameworks like Skeleton, PureCSS, UIkit…?

Are there some features in Hugo which are tied to Bootstrap or is it fully framework-agnostic?

1 Like

Interesting question as I’ve been looking at different frameworks myself (for similar reasons re. Bootstrap and Foundation, not bloated but just far more than I’ll ever want).

Yes, like popular CMS systems, there is a look to these frameworks which a lot of people don’t change (but good designers do).

I would say Hugo is the ideal choice for adding different frameworks because it is not dictating any base layout.

I’m currently looking at Skeleton and PureCSS, and particular like the no JS approach to template responsiveness. I might be wrong, but UIKit looks too much like it’s following the same convention as Bootstrap and Foundation and not sure I see the need for another of those.

1 Like

You’re right. After taking closer look, it seems it’s not so lean as I thought in the beginning…

What I like about Skeleton and Pure is that they exist as a real lighter alternative to BS and Foundation. Most others I’ve seen are either more focused on CSS preprocessing, grids or just being in the same space as the big two.

I saw that before. Didn’t know it was being negleted again. Shame as it has it’s own niche (as a non-modular framework).

I used PureCSS for my personal site, and the thing that concerned me, although it is working fairly well as is, was the seeming lack of any dev movement (and indeed, some just get shut down, like Gumby did). The big ones like Foundation and Bootstrap, have active development on their side.

This one is for typography only, but seems to be well done:
http://typeplate.com/

It should be able to be used in combination with a grid.

In addition, I’d also say to look into the recommendations and tricks found in HTML5 boilerplate. It’s something you would incorporate in your Hugo head template.

https://html5boilerplate.com/

Had to check my bookmarks but, Semantic-UI is also interesting.

http://semantic-ui.com/

I must admit that:

50+ UI elements
3000 + CSS variables etc.

is a bit too much for my taste/needs and in that case even UIkit looks light. :slight_smile:

I’ve worked extensively with Bootstrap, Foundation and briefly with Skeleton. It’s a shame to see Skeleton development has pretty much stopped, but even with that being the case it should still be a great choice for a lean framework that will give you the essentials and let you add the rest.

On Uto, 2015-11-03 at 05:26 +0000, groove wrote:

Bourbon/Neat is a lightweight alternative - it’s structured so that you only use what you need. I’ve been using it for years. It’s actively maintained, the grid is great and there’s a set of ui components that are given with design or naked. http://bourbon.io/

1 Like

I personally use corysimmons (now peterramsing) lost grid and postcss .

1 Like

@gour, I have to agree, looking into that framework more. It’s over the top.

@budparr, thanks for the tip on bourbon.io. Looks really nice.

(update: yeah, I like http://bourbon.io so much I’m using it and its various sister packages like neat & bitters to learn sass and incorporate it into my site. Thanks a ton @budparr)

+1 for Bourbon and Neat. Basically allows you to roll your own. S the documentation is solid. If you’re looking for the least amount of overhead, I agree with @budparr on this one for sure.

The theme “blackburn” from Hugo is using PureCSS and is therefore quite lean and still responsive.

Using bourbon.io sent me down a path that ended up with me scrapping it for a postcss/cssnext workflow in node to build css bundles, using basscss as the foundation. Basscss is light and minimal.

1 Like

I’d scrap bourbon.io for using Autoprefixer with postCSS. That said, @RickCogley I still think the juice is worth the squeeze for neat, the semantic grid sibling to bourbon. Keeps your code extra clean.

The “juice is worth the squeeze”. @rdwatters, what a cool turn of phrase!

I agree on Neat. It’s really good and keeps your HTML clean.

1 Like

I just stumbled upon Gutenberg https://matejlatin.github.io/Gutenberg/

Does anyone use this with Hugo?