Is not really lightweight (JS & CSS)

[slavkoja]

Describe the bug I am not sure, if it is intended or not. The project itself is described as lightweight, but it uses the Bootstrap CSS (152 kB) which is not very light. Beside this, it uses three JS files (jQuery 68 kB, Popper 21 kB and Bootstrap 57 kB). From them, only Bootstrap CSS is partially used, then it loads not used 156 kB of JS and mostly not used 152 kB of CSS.

To Reproduce Always

Expected behavior I expect from lightweight system, that it will use only really needed things.

Additional context I try to remove all JSs from status.php template and i do not see any corruption. Then i pickup only used classes from bootstrap (for testing in custom.css 1,2 kB with spaces):

*, ::after, ::before {
    box-sizing: border-box;
}

#header {
    background-color: #0082c9;
}

.text-white {color: #fff !important}
.text-center {text-align: center !important}
.bg-success {background-color: #28a745 !important;}
.bg-warning {background-color:#ffc107!important;color: #900 !important;}
.bg-danger  {background-color:#dc3545!important}

.jumbotron {
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: #e9ecef;
  border-radius: .3rem;
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: .25rem;
  margin: .5rem auto;
}

.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width:576px){.container{max-width:540px}}
@media (min-width:768px){.container{max-width:720px}}
@media (min-width:992px){.container{max-width:960px}}
@media (min-width:1200px){.container{max-width:1140px}}

I did minimal changes in this CSS:

1. i lowered padding of the .jumbotron class
2. i added some margin in .card class

Finally, thanks to .card margin the <br> tag in status_card.php can (have) be removed.

I suggest to remove bootstrap at all, and place these CSS into separate file, to leave the custom.css for customization.

[Matte23]

I was referring to the PHP code when I'we written lightweight, anyway You're right, the whole JS is not used (I've forgot to remove the calls) and the bootstrap CSS code can be minimized

[slavkoja]

I hope, that my CSS pickup will be useful ;-)

[Matte23]

It's useful, I'm only fixing some thing. Anyway I would keep the HTML code compatible with Bootstrap (and thus not changing the margins and padding) to allow people switch seamlessly from the minimal css implementation to Bootstrap, in order to provide the framework to add component as custom bars (for Custom classes, see the wiki) to the code, without messing with lots of overrides.

[slavkoja]

Compatibility with anything is not bad at all and rewriting margins is simple via custom CSS.

But i afraid, if mentioned the <br> tags will not mess with flex layout.

[slavkoja]

BTW, with my changes it looks (original width 1400 px):

[Matte23]

Solved by removing the
tag (which behaviour is not well defined) and by adding the mb-3 class to the status cards. I've pushed the changes into master

[slavkoja]

OK, thanks