I have observed that when clicking on generate CSS the program rescues the base component, initial example I read, completely ignoring the element classes.
Today I noticed a functionality of the program when styling a component, it creates the style for the element and it is possible to transfer this style to the project’s CSS file, well, when doing this the system does not do the correct process, I will present an error which I verified by doing the process.
I styled the Navbar Toggle, it was perfect, but when I clicked on the 3 points of the style and sent it to styles.css, it used a button class, when in fact it should use the .navbar-toggler class.
As far as links go, these are bad for styling, as they all use class a, again ignoring the element class, eg.
“nav-link”, when creating a style it creates the class “a” this interferes in all styles of links, if you want to style the links, “a”, and make other styles for the “nav-links” is a extremely laborious process.
This could be fixed in a future update.
I’ll print some screens for visual example.
Styling the Element!
I export the style.
Style exported to styles.css
When it should use the navbar-toggler class, BSS used the button class.
Thank you for the suggestion! We will improve the generated selector in our next updates.
Hello @martin , I don’t know if this is the behavior that should occur, or if it’s some feature that I didn’t know, but when creating the css for the container I realized that using the different options to do this the result is different, just follow the arrows of the image, the same result is obtained for other components, elements and classes, but some no longer generate this result.
I also noticed that in the lines, it has a left and right margin with -12px, which generates an indentation beyond the space available for the XS.
In fact this button to create performs 3 different functions.
Create css for the element, for example a div;
Create css for the class, example a line;
Create a comment.
I don’t know if this was really his function, I can easily adapt to using the button in this way, but do all program users know this? I discovered this today.
Line in the bootstrap.min.css code.
This is strange, doing a calculation with a negative number, especially for the top where -1 is multiplied by 0.
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-0.5 * var(--bs-gutter-x));
margin-left: calc(-0.5 * var(--bs-gutter-x));