News:

Server migration complete, Welcome to version 2.1.1

+-+-

+-User

Welcome, Guest.
Please login or register.
 
 
 
Forgot your password?

+-Site Stats

Members
Total Members: 16424
Latest: Humpiedump
New This Month: 17
New This Week: 2
New Today: 0
Stats
Total Posts: 132322
Total Topics: 16403
Most Online Today: 114
Most Online Ever: 7634
(January 21, 2020, 02:14:03 AM)
Users Online
Members: 0
Guests: 65
Total: 65

Why a custom/minimized bootstrap implementation in fpp?

Started by jcross, February 07, 2024, 10:17:26 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

jcross

I started working on modernizing one of my plugins and actually building a UI for another one (remote donation box/push to hear music system) I've been playing with for the last few years and noticed several standard bootstrap classes are not working (like d-none).

I noticed that we aren't running a full bootstrap implementation and I'm just curious what the reasons are?

I was able to add in the specific classes with media breakpoints I need but it just doesn't feel right to have to do that.

Thanks :)

Jason

CaptainMurdoch

This one might require some input from some of the guys who worked on the UI redesign a few major FPP versions ago.  During the redesign, one of our requests was to keep things simpler, we didn't want to have to learn multiple frameworks or a single complex framework in order to be able to go in and make simple UI changes.  That could have been part of the reason behind using a slimmed down version.  If there are things that make sense to add and they don't balloon up the code base or effort involved to maintain the UI and they don't break anything, then I don't think we are opposed to adding any missing bits to get desired functionality.
-
Chris

jcross

yeah that makes sense.  I did play around a bit adding in the full bootstrap library to my dev instance but yeah it broke everything, which was expected.

It would be nice to add in the media breakpoint classes, but since I believe that is the core of boostrap it may not be possible.

Specifically for my purposes I added the following into the plugins main script file and it does what I'm needing it to.
<style scoped>
  @media screen and (min-width: 0px) {
    .d-none { display: none!important; }
    .d-inline { display: inline; }
    .d-block { display: block; }
    .d-table-cell { display: table-cell!important; }
  }

  @media screen and (min-width: 992px) {
    .d-none { display: none!important; }
    .d-inline { display: inline; }
    .d-block { display: block; }
    .d-table-cell { display: table-cell!important; }
    .d-lg-none { display: none!important;}
    .d-lg-inline { display: inline; }
    .d-lg-block { display: block; }
    .d-lg-table-cell { display: table-cell!important; }
  }
</style>

Support FPP

+- Recent Topics

Powered by EzPortal
Powered by SMFPacks Menu Editor Mod