CSS Organisation

[typenweb]

Hello everybody,

I don't used to contribute with git so please apologize me if it's not the good way or place to do it.

I download Bootstrap V4 to know what's new... And I observe the same problem (for me) that V3 : the organisation of the CSS. The actual organisation don't allow to gain time when you want to personalize your website. For example, when I want to change the background color of the navbar, I had to read all the css to find what I have to change. A most strong example is this one (I use notepad++ to code) :

Line 76 to 79 :

h1 {
margin: .67em 0;
font-size: 2em;
}

Line 340 to 344 :

h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: .5rem;
}

Line 513 to 515 :

h1 {
font-size: 2.5rem;
}

I checked before posting and the two alone "h1" are the same, not one for a media query for example or else.

Moreover, I also see some contradictions. In the example above, the first h1 has a margin-top = 0.67 em and after, we ask him to have a margin-top = 0.

Now, I present my request. I would like to help you in this project and also I would like to help bootstrap to become a little accessible for all and to allow everybody to gain time with personalisation. So, if you are interested and if you allow me, I would like to reorganised the css file.

For exemple, we could regroup all the general text selectors as h1 or p in a category, regroup all the navbar elements in an other... And I would like to add comment near to the color code to help people.

Thanks to your consideration and sorry if this post is not appropriate.

[yasinkocak]

Use SASS to customize your css.

[typenweb]

Thank you for your advice. But I think using Sass won't make disappear the conflict between Bootstrap.css and my own css file that I have sometimes (and I am not alone according to forums).

[cvrebert]

Line 76 to 79 :

The code you're referring to here is from our vendored copy of Normalize.css. We intentionally leave it unmodified, at the cost of a few redundant declarations near the start of our generated CSS, in order to make upgrading Normalize.css super-easy.
So please ignore the Normalize.css code for the purposes of reducing redundancies.

regroup all the navbar elements in an other [category]

They're already grouped together in https://github.com/twbs/bootstrap/blob/v4-dev/scss/_navbar.scss , unless I'm misunderstanding you.

And I would like to add comment near to the color code to help people.

What would these comments say?

[jakeingit]

A lot of developers say not to mess with the core bootstrap files, but to just write another .css file to replace what changes you want. Call the .css file right after the bootstrap.min.css file. That may help.

[typenweb]

@cvrebert : Ok I ignore Normalize. For the category, I didn't see your file and what you did, that's why I meant : regroup all the same code in the same place and not one part at the beginning and the other part à the end. I took the navbar element as exemple because it is the first thing I saw. When I had to just personalize the color (change grey into another for example).

@cvrebert : the comments will be "dark grey" or "light grey" (I am sorry if you don't understand, I don't remember how to say the different category of a colour). It's just to help to visualize faster the color, we all know the white and black color codes (basis), but for the other codes, we can just say what color to help visualize. It's just a suggestion.

@jakeingit : thanks for the advice but I already do this. I always call my css after bootstrap. And the probelm is still the same : conflicts between my css and bootstrap when I have to personalize even whent I put a personal "id" or "class" on my elements.

[cvrebert]

Ok I ignore Normalize. For the category, I didn't see your file and what you did, that's why I meant : regroup all the same code in the same place and not one part at the beginning and the other part à the end. I took the navbar element as exemple because it is the first thing I saw.

If you have other examples that don't involve Normalize, feel free to open issues or PRs about them.

the comments will be "dark grey" or "light grey"

Folks should be using sourcemaps, so they should see that these use the $navbar-dark-* variables, which get their values in

bootstrap/scss/_variables.scss

Line 486 in 5073e75

$navbar-dark-color: rgba(255,255,255,.5) !default;

. I guess we could add comments there, but I'm not sure it'd be worth it. Feel free to open a pull request for that if you want though, and we'll consider it.
Perhaps we should add color palette variables for these in #18462...