Remove Bootstrap

[talha131]

• [ ] Remove bootstrap search box
  • [ ] Add space between Archive and Search field
• [ ] Remove bootstrap top menu bar
• [ ] Replace bootstrap accordion with CSS accordion
  • [ ] comments
  • [ ] categories
• [ ] Remove Boootstrap grids. Use CSS grid or flexbox CSS grid will not work in old browsers
• [ ] Move typography from Bootstrap to elegant CSS files

[astraindev]

Not sure if this will help but attached is a diff (against master) to use CSS only for the comments and categories.

custom.css.txt css_categories.diff.txt css_comments.diff.txt

[talha131]

Thank you @andrewdstrain

About two weeks ago I tried to use radio box for accordion. It worked but the look and feel was very different. Clearly, it was more work than I expected. I pushed it down on my to do list.

It's good to see you took this task up. Thank you. Personally, I can't wait to get rid of Bootstrap.

Is it possible for you to open a PR? Our PR process has preview feature, which means anyone can see what the end result of a PR looks like. It also enables others to critic the code. Let me know if you have any issues or reservations.

We have a feature that if user directly links to a Disqus comment, we automatically open the comment accordion. The JS for it will have to be changed once we move away from Bootstrap.

[astraindev]

These files are much better - instead of using the "tag*" classes, they use the CSS that's already there. The main difference is the a to input/label tags. But the JavaScript might be much easier to adjust. I'll try to open a PR.

css_base.diff.txt css_categories.diff.txt css_comments.diff.txt custom.css.txt

[astraindev]

I did the PR.

As you can tell, the bootstrap.min.css is still in use. Only bootstrap.min.js has gone away.

And, of course, you don't have to get rid of JavaScript for menus and accordions. I'm just throwing this out there... you can do whatever you want.

[talha131]

Thank you @andrewdstrain. It is definitely useful and the right step towards removing Bootstrap.

[azzamsa]

@talha131 I can't find the reason here why we want to remove bootstrap. it this a step towards making elengant more slim?

• bootstrap accordion -> CSS accordion
• Boootstrap grids -> CSS grid or flexbox

[talha131]

For a number of reasons.

1. We use Bootstrap 2.*. It is very old. We cant upgrade to the latest because it has a different look and defaults. The migration process is also non-trivial.
2. The web has moved forward so much. We do not need Bootstrap or even jquery. Vanilla CSS and JS is enough for our needs.
3. Because of Bootstrap, we are stuck in limbo. We can't upgrade Bootstrap to get bug fixes and we can't use new CSS and JS features.
4. Boostrap is overkill for us.
5. Upgrading Bootstrap was the issue this project stayed inactive for so long. I couldn't do it.
6. In other progress, I have used PostCSS or SCSS. The experience is great and dev is faster.
7. With PostCSS and SCSS, we can define a few variables and then make all components use it. For example, we can define a radius, then make all tables, code blocks, and boxes to use it. A bit more discussion is here.

[azzamsa]

Thank you for detailed explanation.

The web has moved forward so much. We do not need Bootstrap or even jquery. Vanilla CSS and JS is enough for our needs.

Yes, I also up vote this. This enhance our flexibility.

Hope we can get rid of it soon.

[silverhook]

Would this help? It seems simple, yet featureful enough(?)

https://simplecss.org/

[azzamsa]

This is better https://open-props.style/

[silverhook]

This is better https://open-props.style/

As long as we don’t fall into the same trap as with Bootstrap, I’m fine with anything :)