I've been using the Genesis Framework to build custom themes along with Visual Builder tools like WPBakery Page Builder. The more I learn about file size and website performance, the less I want to rely on these tools. They seem bloated and opinionated.

Personally, I would like to build light-weight, highly effective websites using some kind of CSS framework along with a bare bones WP theme. The problem is, I don't really know where to begin. With the goal of building fast, light-weight and highly customizable websites, which CSS framework and "base" theme would you recommend?

  • This notion of "highly effective" websites is very badly understood. People have this idea (wrong) that page builders add bloat / make page-views harder. With Visual Composer, yes, it is the case, but Elementor is much lighter and provides much of the same functionality. You have to understand that Genesis Framework is generally for smaller websites and that it's just a collection of hooks. I'd say you should start exploring Elementor and what it does, as it's absolutely no hit for the speed of a page, especially the render time. – coolpasta Jul 24 '18 at 18:34

Starter Theme:

Check Underscores or Sage for starter theme.

Underscores is pretty basic, but a very good starting point. On the other hand, Sage has more options compared to Underscores, but you may need a bit more time to get used to with all the dev tools (if you are not already familiar with modern dev tools).

CSS Framework:

For CSS framework, try Twitter Bootstrap.

Theme Development Guide:

Follow The Official WordPress Theme development guide for customizing a starter theme or creating a new theme from scratch. You may also check the Old, but useful Codex document on WordPress theme development.

Also, there are some q&a gold mines here on WPSE as well.

Gutenberg: As WordPress core team is set to change the default editor to Gutenberg in the near future, it's a good idea to familiarize yourself with Gutenberg as well. This Official Guide can be a good starting point to learn about Gutenberg.
(Thanks WebElaine for reminding this!)

Learning Curve:

I'd suggest you to learn basic theme development with WordPress first, then become familiar with CSS Framework, Gutenberg etc. Otherwise it'll all seem like too much information.

  • 1
    Hey Fayaz, thanks for taking the time to answer my question. I'm curious about Underscores and will look into Sage. Best, -Edward – EDWARD SINGLETON Jul 24 '18 at 20:54

You might also want to look into Gutenberg, if you're willing to learn up-and-coming and non-production-ready technology. WP's new built-in editor - reportedly coming this year - is basically a page builder in and of itself. You can grab the plugin from the WP repo and start experimenting. You'll also need a theme to use with it - Underscores as Fayaz suggested is very lightweight and ready for you to build things out, or you can build your own from scratch, basing it partly on Core's Gutenberg styles.

I would stay away from frameworks at this point. They add that same kind of overhead you're wanting to escape. CSS Grid already has good support across most browsers, and it's easy to add a flexbox or float fallback for those that don't. Grid lets you do many of the same things with just a few lines of CSS that you'd do with Bootstrap or Foundation's rows and columns, which require hundreds of lines of styles.

  • Hey WebElaine, thanks for the insight. It makes sense to avoid using a CSS frameworks as they add the same overhead. Do you use only CSS Grid in your workflow? If you do use a CSS framework which one? Thanks. -Edward – EDWARD SINGLETON Jul 24 '18 at 20:57
  • Used to use Foundation - now moving away from frameworks entirely. I use CSS Grid where it makes sense, and since the sites I work on still have a large enough percentage using browsers that don't support Grid, I include fallbacks. If you're only arranging things in one direction - i.e. a single row - flexbox is still the tool to use, so I still make use of it where appropriate. For things like accordions that are built into some frameworks, I use HTML <details> disclosure elements and they'll handle open/close with no JS. – WebElaine Jul 24 '18 at 21:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.