Thanks for the Bootstrap blocks!

General Questions
#1

Hi,

Thank you for the very useful Bootstrap blocks! Beautiful by it’s minimalism and simplicity! Nice work!

Is there a reason to use inline svg? Would be possible to change it in external links in the future?

The first Hero block contains two errors! It spits out double <section> a normal one and a nested <section> container!? The display-3 class is causing problems on the mobile phone in portrait mode.
You are aware about the fact that you could use the responsive font system of Bootstrap 4?

When I have some time I will test them all.

Regards,

David

2 Likes
#2

Hi @AllMediaLab,
Thanks for the feedback! With regards to the RFS, Bootstrap 4 has that turned off by default. If you choose, it is easily turned on in Pinegrow.

  1. Go to the “Page” menu and select "Customize & update Bootstrap Theme to converst your project to using SASS
  2. In the Styles panel click the Stylesheets caret and select the “_variables.scss” file
    image
    image776×484 36.3 KB
  3. Scroll down to the “$enable-responsive-font-sizes” variable
    image
    image782×408 42.7 KB
  4. RIght-click the false value and change the dropdown for “Customize in …” to "custom.scss. Then click it to copy the variable.
    image
    image782×552 64.3 KB
  5. In your custom.scss sheet, change the value to true and save the files.
    Cheers,
    Bob
#3

I did not ask anything! I know how it works! It was a suggestion.

Tested all hero blocks and they all have the same problem you should have used “display-4” instead of
“display-3” to make it work OK on mobile phone in portrait mode, but they look wonderful!!! :wink:

#4

Ho Ho Ho!
what a happy festive response there :wink:

Well, I didn’t know about it @RobM so cheers for the explanation, but blinking heck,
Easy?

not terribly intuitive BUT I never even knew about the option …
at
…a!!

so cheers!

Ive just connected via my phone, hotspot… Internet for the first time in a very long time!
:slight_smile:here goes.

And just got on, on the day of a new PG release!

woo hoo

1 Like
#5

@schpengle - Welcome back! I thought the Romani had gotten you and your horse for sure.
Glad I could help with the “easy” tip.
Cheers,
Bob

1 Like
#6

Thanks @AllMediaLab, @RobM. I’ll check the Hero blocks.

Re inline SVGs: you’re talking about the icons, right? They are simple to support and manipulate. We are open to other options.

#7

We use the Free icomoon service app with a collection of purchased fonts and the free fonts that are available. You could consider implementing Icomoon or create your own icon app within Pinegrow. The advantage of the app is that you pick out the fonts you want and download them in a folder. Later when you want to add some more fonts you can use the JSON file that came with te last downloaded fonts and remembers the previous picked font set. With the use of inline svg your HTML becomes very unclear!

To edit color and shap(es) in a SVG (all webdesigners I work with and know) use Illustrator or I use Affinity Designer/Photo (that cost peanuts) and makes it much more easy to manipulate SVG’s then I put the SVG in a external file and tread it just like a image in the HTML. I think that’s the way to go. The inline stuff will make it much more difficult for beginners to understand (I don’t like it as well) the HTML when it’s cluttered with *SVG code and *inline CSS. It makes it also more difficult to manipulate the web page outside Pinegrow in a editor compare to plain CSS in a proper external file. (*It reminds me of years ago!) :wink:

And finally you have to take in account that when you add Interactions inline code to your web page together with inline SVG’s and icons too it becomes a HTML jungle/labyrint.