Introducing picostrap v3: Browser based SASS, Bootstrap 5.3, AI-assisted color palette generation



November 22, 2023

Join our Discord

Today, we're celebrating a significant update within the LiveCanvas ecosystem: a new major release of the picostrap theme — and yes, it's intentionally written with a lowercase 'p'.
True to its name, one of its key goals is to provide a very lightweight base for your websites, while still being packed with an array of useful goodies. Let's first outline the most important additions:

What's hot and new in V3

  1. Upgraded to Bootstrap 5.3.2: Picostrap has been updated to Bootstrap 5.3.2 - which brings loads of new additions, including dark mode support. Moreover, an option in the Customizer allows to add a Dark Mode switch to the menubar.
  2. Enhanced with NinjaBootstrap: a small collection of SCSS utilities that configure and extend Bootstrap 5  in order to add the missing utility classes you really need in order to build great designs. Take some time to read the NinjaBootstrap documentation webpage and the introduction to the project. BTW, we thought that this mini-project is so useful, that we've also packed it as a NPM module, so you can use it also without picostrap, outside  WordPress.
  3. Frontend-Based SASS Compiler: The new version includes a frontend-based SASS compiler, allowing developers to compile SASS in the browser, live​​ - and preview their CSS changes while playing with Bootstrap settings in the Customizer. This of course is priceless - and if you're working locally, on modern CPUs, speed is impressive.
  4. AI-Assisted Color Palette Generation: The theme integrates the HueMint service in the Customizer  for AI-assisted color palette generation, aiding in design consistency​​. It can also build a color palette starting from a given color. This makes a lot of sense when your client provides a single brand color to be used, but you still need to figure out a matching color palette.
  5. Style Guide: in The customizer, you can recall a comprehensive style guide page that helps you visualize how fonts, colors and settings match together showing various examples

Here is a screenshot of Customizer with the color palette generator and the style guide enabled:


Oldies but goldies

More useful  features that were already in the picostrap project, but have been refined / upgraded / maintained

  1. Reduces WordPress Bloat: picostrap focuses on making WordPress lighter by removing unnecessary elements and providing a clean start. It has also a built-in option to disable Gutenberg if you wish, which will take out of the equation another CSS you might not need.
  2. Google Fonts Integration: Picostrap allows easy changes to font families with suggestions from FontPair for ideal combinations​​.
  3. Responsive Typography: The theme supports responsive typography, via the built-in Bootstrap "RFS" module, ensuring text and headings adapt well across devices​​.
  4. Customizer Features: Options in the Customizer include hiding unnecessary tags, disabling comments, and cleaning up the site's head section​​​​​​.
  5. Child Theme for Advanced Customization: A blank child theme is provided for full control over SCSS pipeline and custom functions​​.
  6. Additional Features: Picostrap includes options like sharing buttons, a topbar for important information, Lightbox integration, CSS prefetching for faster load times, and dark mode support​​​​​​​​​​.

Upgrade Notes

Version 3 is quite a big jump, especially on the SCSS department: we recommend using it on new projects.

For existing sites: there's no compulsory reason to upgrade to picostrap v3.

You can perfectly keep picostrap 2.x. It is still maintained and compatible with WordPress 6.4, in the latest v2.11.

If you're running v2, or you are using your own child theme, you can try upgrading the parent theme to v3, as the folder structure is similar - but expect to have some possible problems.

We've seen for example some SCSS discrepancies - essentially - upgrading is generally possible, sometimes it will prove easy, sometimes very hard, so the usual applies: backup first, and consider reverting to v2.x in case things don't fit.

About the new compiler and workflow changes

Version 2 was using SCSSPHP - a PHP - based, unofficial porting of the SASS compiler, which would compile your /sass/ folder on your server.

Version 3 now uses the 100% original DART SASS implementation.

That's the "real" SASS, the canonical implementation - so it's more "precise" on some particular things and compatible with the latest language additions.

It runs on the browser (this is possible since a few weeks!), and especially when running locally, it's pretty fast, we've seen 1.6 seconds to compile the whole theme, on Apple Silicon laptops.

A nice addition is that now, when using the Customizer, you can preview every variable change without having to to hit "publish" anymore.

Version 3 does not offer automatic recompile / livereload - but does it differently, to have a lighter performance footprint on your server.

From an operational point of view, the main difference is that, if you're using a child theme and adding your own SCSS, to trigger compiling, you'll have to click the SASS symbol on the wp admin bar.

Hovering the symbol, you can also choose to "recompile continuously" in case you're missing the old livereload feature.

While compiling, a window with a feedback message is opened, with some Amiga-reminiscent style. At the end, the generated CSS file size is shown, both of the original file, and zipped.

Origins and history of the picostrap theme

Since today is an important date for the project, let's briefly explore the journey of picostrap from its Customstrap origins to its current state-of-the-art version, highlighting the features and enhancements that make Picostrap5 version 3.0 a remarkable upgrade for users and enthusiasts of LiveCanvas.

Tracing its roots back to 2018, the journey of picostrap began with Customstrap, an Understrap child theme, which laid the foundation for what would become a pivotal player in the Bootstrap-based WordPress starter theme space.

At the time, Bootstrap 4 was the latest & greatest - and we made a strong effort to help simplify the SASS & Bootstrap customisation workflow in WordPress. Understrap was the most starred Bootstrap-based WordPress theme, and had a very large following.

In 2020, a strategic decision was made to fork Understrap, giving birth to picostrap. This marked the beginning of a new era, as picostrap emerged as a standalone theme, distinct and innovative, rapidly becoming the recommended starter theme for LiveCanvas.

Moving away from Understrap's "umbrella", we took the courage  to remove jQuery and embrace vanilla JS - even before Bootstrap officially did it, thanks to the BootstrapNative project; we also removed icon fonts and embraced the world of inline SVGs.

When Bootstrap 5 came out, it was an exciting moment - jQuery was officially dropped, by the way. A new version of the theme, called picostrap5, was introduced.

picostrap5, is now at its impressive version 3.0, stands as a testament to the project's dedication to growth, adaptability, and a deep-seated commitment to the needs of the community. Integrating the latest in Bootstrap 5 and SASS, picostrap version 3.0 offers an unparalleled platform for crafting elegant, high-performance WordPress websites.

picostrap5 is an opinionated theme that does not want to jump on the Full Site Editing bandwagon - and stands firmly against website bloat - and does rather aim to deliver SASS to a broader audience, liberating the user from the chains of having a local development environment.

picostrap V3's new website

To celebrate the new release, the picostrap site got a heavy redesign; of course, it's powered by the LiveCanvas plugin and picostrap v3.

Check it out on picostrap.com