New default theme 'Bootstrap 4', Part 2

[juek]

Continuing this issue in a new thread

[juek]

It would be great to have an export/import to save work before experiments and reload after fail.

Any ideas for the UI for that?

[mahotilo]

Any ideas for the UI for that?

Minimalistic UI such as for file attachment to email. 3 buttons: select local file name, export, import

EDIT
Actually 2 buttons: export, import
Export could act as TS Export. Some processing first and then request for a download.

EDIT2
I do not think that we need some storage on server side.

EDIT3
Or could such way cause security problems?

[juek]

Or could such way cause security problems?

Anything that can upload executable code (like config.php) is a no-go. But using JSON would be an option.

[gtbu]

I j ust had a look at the momentary master. The "offcanvas nav" is 100 % broad - and so the seek-mask is too broad and also the right side. It is full open at first level and overshadows the content too much. In the bootstrap 4.5 examples is an offcanvas , at which i can set .offcanvas-collapse.open to width: 50% to solve that. Here it is different (media width and header class="main-header ). (( Though i still prefer https://codepen.io/Mineslu/pen/MzGagm or https://codepen.io/vmitsaras/pen/gwGwJE or https://codepen.io/vmitsaras/pen/pWNrEy and https://github.com/vmitsaras/js-offcanvas - which is the probably future)).

[juek]

The "offcanvas nav" is 100 % broad

Hm, but I haven't yet pushed anything from the alternative mobile menu styles, but it's in the works. So all we currently have in the master is the default pulldown nav.

https://github.com/vmitsaras/js-offcanvas

Yes, that's basically what will be selectable.

[juek]

https://getbootstrap.com/docs/4.5/examples/offcanvas

This variant will be called 'Slide Over' in our theme. 'Off Canvas' will be similar but 'push' the rest of the page off the viewport.

[gtbu]

I see i was in too much of a hurry. In my (coming) BT5biz - Template the offcanvas destroys the sticky nav. There must be some incompatible code in the css(needs restyling and evtl some js-code) . Thats why i prefer the js-offcanvas, which needs jquery (or i wait and have a look at Your solution...).
PS. The dropwdowns have still a for my taste a to too big white border - though probably a bootstrap-style which can be changed in the custom.css ( https://behigh.github.io/bootstrap_dropdowns_enhancement/#submenu - for what i mean)

[juek]

In my (coming) BT5biz - Template the offcanvas destroys the sticky nav. There must be some incompatible code in the css(needs restyling and evtl some js-code)

Sounds like you have to take care not to load any js or css assets unrelated to the current theme/layout.

Thats why i prefer the js-offcanvas, which needs jquery

Typesetter will continue to use jQuery for an indefinite period – so it is there even with your Bootstrap 5 theme.
You don't have to worry about that.

[juek]

The dropwdowns have still a for my taste a to too big white border

Can be adjusted in variables.scss or via the Scss tab in Layout Editor. Find and change…

$dropdown-padding-y: 0.5rem;
$dropdown-item-padding-y: 0.25rem;
$dropdown-item-padding-x: 1.5rem;

[juek]

the offcanvas destroys the sticky nav. There must be some incompatible code in the css

FYI: as noted earlier position:sticky does not work in overflow:hidden context. Most off-canvas solutions apply overflow:hidden to the body element.
Another little known fact is that fixed positioning will not work inside transform context (:sticky does). We may transform fixed elements themselves but they may not be inside transformed elements. All off-canvas solutions I know out there use transform:translate on the html/body elements. We cannot do it like that.

That's the main reason why I'm still working on the different menu styles – quite tricky to get them to work with all possible settings. But I'm almost done.

[juek]

Here come the 'Hamburger Menu Styles' with bba14f4

First, there are a few other changes too…

• added font 'Source Serif Pro' to customizer
• added JS breakpoint detection which fires custom events 'breakpoint_change', 'navbar_expanded' and 'navbar_collapsed'. You can also check out the 'Theme_Bootstrap4' JS object in custom scripts. The <html> element now receives additional CSS classes dynamically assigned via JS – look for stuff like 'breakpoint-xs' and 'navbar-expanded' when changing the viewport width.

For the mobile menu styles:

They certainly still need some tweaks. I haven't yet tested all relevant customizer combinations. I'll probably also add a thumb-friendly 'Slide Up' style, which is currently trending and makes sense.

The animated hamburger is a bit playful and maybe not to everyone's taste. Although there is already a Scss variable, I haven't added it to customizer yet. Shall we add it? Tell me what you think.

[juek]

Important!

I forgot to mention that 'Off Canvas' and 'Slide Over' menus can be swiped away, but that requires jquery-touch which is only available since this commit

You will see JS errors and non-working menus without it!

[mahotilo]

It seems only to work for footer. Could you check it, please.

P.S.
footer looks cool. Animation timing is good as for me.

[mahotilo]

Slide Over appears and hides on window resize, e.g. on screen rotation.

UPD
Same for Off-Canvas

[juek]

It seems only to work for footer. Could you check it, please.

Yep, fix is here 5b76151

[juek]

Slide Over/Off-Canvas appears and hides on window resize, e.g. on screen rotation.

Yep, that definitely still needs some tweaking.

EDIT: LOL, that's why I started the JS breakpoint detection stuff. Once it worked I couldn't remember what I made it for :)

[juek]

Yep, that definitely still needs some tweaking.

I should trust the DONT-YOU-WRITE-INLINE-CSS bell ringing. What a whole lotta mess. This is JS event fireworks! m(

Seems like I fixed it

EDIT: Beware, small artifacts ahead. When the navbar expands in open-menu-state, original Bootstrap transitions chime back in and cause some naughty little blinking. But nothin' serious :)

[gtbu]

Great - But maybe i overlooked it : Is the position of the main menu fix attached to the searchfield und not (yet) adjustable in the middle ? (like d-flex justify-content-between )

The searchfunction may look a bit more stylish as in https://codepen.io/gungorbudak/pen/ooKNpz (1st line) and is rather high...

The Login and sitemap may have an icon instead .

[juek]

… main menu … (yet) adjustable in the middle?

No. At least not yet. Currently we need to change this line in template.php

… searchfunction may look a bit more stylish … The Login and sitemap may have an icon instead

Lots of things could be more stylish, but it depends on what different people think is stylish.
I'm just trying to stick as close to the bootstrap defaults as possible. At least that was the original goal.

[juek]

… main menu … (yet) adjustable in the middle?
No. At least not yet. Currently we need to change this line in template.php

It's really easy to implement - so yeah, let's do it.

[juek]

… main menu adjustable in the middle?

Done with 3021cc6

[juek]

The searchfunction may look a bit more stylish …

I would allow myself to be persuaded to do this:

Thumbs please

UPD: the css

.main-nav .gpArea_Search input.text,
.main-nav .gpArea_Search-Gadget input.text {
  height: auto;
  padding: 0.125rem 0.5rem;
}

[juek]

I ended up with this d1be675

But we can still discuss everything.
Overall, the functional part of the theme is almost done and I want to start customizer tests to see how it works in practice. And how far we can actually get with it.

While I like the current dark header colors, fresher, friendlier colors might make better default settings.
It really depends on the content and the CI / logo etc. in the end.

I would love to see some great examples from you guys!

[juek]

OMG

Using @extend can add insane overhead. This is ~150 KB too much CSS. ––––––––––––––––∆

[mahotilo]

While I like the current dark header colors, fresher, friendlier colors might make better default settings.
It really depends on the content and the CI / logo etc. in the end.

I like them too. And this black theme appears to perfectly fit one abandoned project about industrial rubber that I use as a playground:)
I can only suggest adding the theme's BS4 logo as the default Brand Logo value.

And we have a warning from Lighthous about admin links default colors and white background.

[mahotilo]

I ended up with this d1be675
But we can still discuss everything.

I dare to propose one more search setting "Size". First option - big, the other - compact. Because for mobile first sites, BS's default large fields fit better.

[gtbu]

Well - if You look for a big navbar - You can try https://bootsnipp.com/snippets/a6aV0

[juek]

And we have a warning from Lighthous about admin links default colors and white background.

I assume they simply take CIELab L50 (psychometric lightness) as a threshold – which is not all bad.

If so, they just barely passed their own test :)
However, If that's a ranking factor, we should actually make it that (unrecognizable) tad darker ;)

[mahotilo]

I have found a conflicting pair

[juek]

I have found a conflicting pair

Can't confirm. Scss compilation must have gone wrong. Please clear CMS chache and try again

UPD: Ok, it's the starter layout.... I check it

[juek]

I have found a conflicting pair

Fixed with 5ff7aa1

[gtbu]

• After playing around i was not able to influence the hover color of the menu (Bootstrap 4 - footer,starter)
  

• Will You still add a menu hover function ?

[juek]

Will You still add a menu hover function ?

Yes, I'm afraid that we also need dropdown colors customizable.
IMO, Customizer slowly gets bloated and loses the advantages it has over the scss editor.

[gtbu]

I can understand the work for You that is behind it , but i thinkcustomizer is quite comfortable for users. In this case the menucolors and the dropdown-colors may differ in opacity 0.8 or similar. Only some bugs may need a quick fix and this is a RC - so never mind (...or take refuge...). I hope the 5.2 is coming soon.

P.S. The sumenu-li's are blue and not like the color of the toplevel - lis's. (dropdown colors customizable. is not really necessary)

[mahotilo]

IMO, Customizer slowly gets bloated and loses the advantages it has over the scss editor.

In my opinion, the power of this template is not in its full customization, but in a balanced list of options allowing beginners to get dozens of cool and almost unique designs.
I guess, the current options list is nearing its logical end, and the goal is almost achieved.

[gtbu]

The SCSS - problem may be solved, but the problem that the submenu has a blue li while the top li is black(or another color) is still unsolved. Something like
.dropdown-menu .dropdown-item, .dropdown-menu .dropdown-item:active {background:yellow !important;} helps here

[juek]

@gtbu take it easy, several things are not yet finished

[juek]

OMG, using @extend can add insane overhead. This is ~150 KB too much CSS.

latest commits (Sep 18th) saved us some 120 KB

Before

After

[juek]

I can only suggest adding the theme's BS4 logo as the default Brad Logo value.

Well it turned out to be this 7927bd0 65297c6

[mahotilo]

A new "t"? Rebranding or just a theme logo?
EDIT:

UPD:
And WOW. It is in SVG and CSS :O

UPD2:
It seems too thin to me and my display

[juek]

It seems too thin to me and my display

It's meant to be thin or better call it 'light'.

Rebranding or just a theme logo?

Well, we do not actually have a real logo or 'trademark'. Nobody would pay the protection fees.
The current square black logotype looks too traditional to me, and, well, too black. So here is a new one. A (t) in a circle. Nothing we haven't already seen a thousand times.
Bootstrap is a [B] in a square, pretty similar stuff. Nothing to build a philosophical way of thinking about. And hard to argue about.

[juek]

It is in SVG and CSS

In fact, not yet tested.

[mahotilo]

It's meant to be thin or better call it 'light'.

I am not talking about design itself but about output. I just want to say, that this svg logo looks stepped and not smooth. Maybe it is my Opera or my display or graphics. But a thicker line usually helps me :)

UPD:
Hm
This is how I see the logo after creating a new site.

And this is after editing the layout (simply change logo and turn it back)

Maybe some CSS issues?

[juek]

Maybe some CSS issues?

Looks OK here on Opera

Default size fixed with 158f4bb

[mahotilo]

Looks OK here on Opera

I have 125% scale in Win7. Maybe it somehow affects svg rendering. I don't know. Anyway, with the last fix, the logo looks better to me.

[juek]

Will You still add a menu hover function ?

Dropdown menu customization added with 9348998

With that amount of color settings, it should be possible to define – let's say 6 – basic colors and show them as swatches next to every color picker field.
But, maybe in an update. I've already had enough!

[mahotilo]

We have some conflict with modal dialog.

What was the purpose for this?

Typesetter/themes/Bootstrap4/_common/customizer_common_headers.scss

Line 194 in 11f9882

z-index: 2001;

[mahotilo]

One more note. There is no padding in the drop-down list of classes.

[juek]

What was the purpose for this?

That's so that the content doesn't scroll over the headers. I changed it to use the Bootstrap variables. That's what we have them for ;)

[juek]

There is no padding in the drop-down list of classes.

Never was. The actual dropdown only starts next to the checkbox.

[mahotilo]

Never was.

Yep. My bad

[mahotilo]

That's so that the content doesn't scroll over the headers. I changed it to use the Bootstrap variables.

Yes, this helps.

[mahotilo]

I can't catch the moment, but sometimes some changes in layout cause the complementary header to change its state from show: never to show: always. Have you ever faced this issue?

UPD
It happens when Header background color is changed

[Sestowner]

...sometimes some changes in layout cause the complementary header to change its state from show: never to show: always.

Should be fixed with this PR #682.