Bootstrap and theme styling rule

[vmihailenco]

One of the reasons I like this theme is Bootstrap. It allows to use existing Bootstrap components without creating another CSS framework.

But then you also need to add some CSS for the theme and inevitably break/change Bootstrap CSS. Which is not nice because it is not Bootstrap any more.

I think we could minimize the damage by agreeing to not change global CSS rules, e.g. this is not okay

h1,
h2,
h3,
h4,
h5 {
  margin: 1rem 0 1.5rem;
  clear: both;
}

And instead it should be:

.header {}
.main {
  h1,
  h2,
  h3,
  h4,
  h5 {
    margin: 1rem 0 1.5rem;
    clear: both;
  }
}
.sidebar {}
.footer {}

That requires repeating some rules for different sections, but then we can change CSS for different sections without affecting other sections (and keep Bootstrap unaffected). What do you think?

[razonyang]

Sounds good. Are you willing to submit a PR?

[vmihailenco]

Yes, I would like to try but the problem is that it is a big change and it would be nice if I can experiment with a more minimalistic approach to design while I am re-organizing the CSS. Conceptually, what do you think about this:

Basically it just resets the Bootstrap card to defaults and removes border with border-0...

[razonyang]

It looks much cleaner. But I prefer to use the previous style that contains border and shadow, which makes it looks like material design.

[vmihailenco]

Well, I am not a designer, but I've noticed that borders make sense when you have many different elements on the page and page looks like a mess. So you create some order by grouping elements in containers.

Shadows are used to elevate some elements so they stand out and some elements / parts of the page look more important than others. Having the same shadow on all elements does not have any purpose except just having a shadow :)

But I guess it is not a big deal and we can keep shadows...