New Release: Pinegrow 5.992 with Bootstrap 5 Beta

Hi!

The latest Pinegrow Web Editor release is available for download.

Pinegrow 5.992 (don’t mind the version number, we ran out of 5.x numbers) comes with:

  • Bootstrap 5 Beta
  • Improved text editing tool
  • More WordPress custom image sizes
  • Bug fixes

And in case you missed our previous email, Pinegrow Library was recently updated with new templates and blocks for Tailwind CSS and Bootstrap 4.

Learn more and download »

Have a good day,
Matjaz & the Pinegrow Team

7 Likes

Hi Emmanuel,

Thanks for the Bootstrap 5 Beta update! Glad it’s there!

The fonts example in custom.scss looks like it’s missing the native font stack info.

This is how it looks in Bootstrap 5 including the native font stack:
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",monospace;`

I honesty don’t have a clue if this has to come from reboot or from the custom.scss

But the example now spits out this:
--bs-font-sans-serif: "Lato", sans-serif;
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

Please some info because I like to know this as well! What is the proper way to change fonts in Bootstrap5? It’s missing in the online BS documentation.

Still see the bootstrap.css as untouched and the bootstrap.min.css as compiled but not minified?

Regards & Thanks :heart_eyes:,

David

Hi @Emmanuel,

I asked you a question :grinning:20 day’s ago and still looking for the answer.

Regards,

David

Well, It’s probably because I don’t know the answer at the moment. I never needed to deal with this point yet but I will have a look on the web to see if the BS5 documentation has evolved on this particular topic.

I asked the same question on the Github Bootstrap page. The docs are not so clear about it and there are no hands on examples. Let’s see what comes out there. I will post the results.

Hi @Emmanuel,

Got a reply from one of the authors of Bootstrap 5 Gaël Poupard.

Each font-stack has its own variable, and each variable is the entire stack. So it’s up to you to either drop the stack or simply add a custom font on top of it. In your example, you could set $font-family-sans-serif: Catamaran, sans-serif; and it’d work similarly (as long as your font is loaded obviously).

The only difference between v4 and v5 regarding native sans-serif font stack is the addition of system-ui keyword, only because of browser support: see system-ui support.

In short it means that not much is changed compare to BS4 except for the addition of system-ui keyword in the font stack. (the difference I was talking about earlier on in this topic.)

This is how it could look in BS 5 with the Catamaran font added:
bs-font-sans-serif: Catamaran, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

Regards,

David

Thanks for the information :slight_smile: