Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove Bootstrap #429

Open
8 tasks
talha131 opened this issue Jul 5, 2019 · 11 comments
Open
8 tasks

Remove Bootstrap #429

talha131 opened this issue Jul 5, 2019 · 11 comments
Milestone
2020 - Q2

Comments

@talha131
Copy link
Member

talha131 commented Jul 5, 2019 •
edited
Loading

  • 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
@talha131 talha131 added this to the Roadmap milestone Jul 5, 2019
This was referenced Jul 5, 2019
Closed
Closed
Closed
Closed
Closed
Closed
@astraindev
Copy link

astraindev commented Aug 18, 2019 •
edited
Loading

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
Copy link
Member Author

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
Copy link

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
Copy link

astraindev commented Aug 22, 2019 •
edited
Loading

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
Copy link
Member Author

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

@azzamsa
Copy link
Contributor

azzamsa commented Sep 28, 2019

@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
Copy link
Member Author

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.

@talha131 talha131 mentioned this issue Sep 29, 2019
Closed
@azzamsa
Copy link
Contributor

azzamsa commented Sep 30, 2019

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.

talha131 added a commit that referenced this issue Feb 2, 2020
@talha131
fix(bootstrap): WIP. add Bootstrapv2.3.2 sources file to the project
43ee8eb 
This way we can alter them directly, remove what we don't need, and move
the relevant code to our CSS files.

I downloaded the source from here

https://getbootstrap.com/2.3.2/getting-started.html

I tried to use gulp-less, but it could not compile the Bootstrap files
and generated an error. I used the tool they used in their Makefile.

https://github.com/twitter/recess

Update #429
talha131 added a commit that referenced this issue Feb 2, 2020
@talha131
feat(typography): use consistent fonts
8b7a8bd 
It also removes code that we do not need from bootstrap source files.

Update #429
talha131 added a commit that referenced this issue Feb 2, 2020
@talha131
fix(typography): override Bootstrap base font
f6a83a6 
Update #429
talha131 pushed a commit that referenced this issue Feb 3, 2020
@semantic-release-bot
chore(release): 5.2.0 [skip ci]
f57da89 
# [5.2.0](V5.1.0...V5.2.0) (2020-02-03)

### Bug Fixes

* regression introduced due to cache busting ([b953a38](b953a38))
* **archives:** at smaller screen layout does not make the best use of available space ([a289e9d](a289e9d))
* **syntax:** code blocks with line numbers do not have the correct border radius ([3a34a3e](3a34a3e))
* **syntax:** improve the font size and height of download button ([07595b3](07595b3))
* **typography:** fix font size and style of TOC ([2d597ab](2d597ab)), closes [#509](#509)
* Categories and Tags pages do not have space below the header ([d78f4e5](d78f4e5))
* remove invalid CSS rule ([368cb2c](368cb2c))
* use consistent color for border ([c85b7b8](c85b7b8))
* use darker color for the site name ([19f37ca](19f37ca))
* **article:** use loclate_date attribute instead of hardcoding the date format ([1da552c](1da552c)), closes [#552](#552)
* **bootstrap:** WIP. add Bootstrapv2.3.2 sources file to the project ([43ee8eb](43ee8eb)), closes [#429](#429)
* **seo:** regression introduced in PR [#556](#556) ([28bcb85](28bcb85)), closes [#505](#505)
* **typography:** about me and my projects heading is not on one line ([6a7989c](6a7989c))
* **typography:** font size of superscript number in categories and tags page ([d0a7162](d0a7162))
* **typography:** override Bootstrap base font ([f6a83a6](f6a83a6)), closes [#429](#429)
* **typography:** top menu bar does not have correct height ([d30ce82](d30ce82))
* **typography:** use consistent font and color for project list ([477a467](477a467))
* **typography:** use consistent font in the footer ([eeb0e30](eeb0e30))

### Features

* add support cache busting ([cde0dc5](cde0dc5))
* **categories:** change background color of uncollapsed Category ([6cc11b8](6cc11b8))
* **gallery:** add support for PhotoSwipe image gallery using raw HTML ([ad1bcea](ad1bcea)), closes [#567](#567)
* **js:** combine and minify all JS files into one to improve load speed ([f5047d4](f5047d4))
* **search:** improve search results page look ([73fa743](73fa743)), closes [#573](#573) [#275](#275)
* **search:** replace tipue_search with lunr.js ([9d60af1](9d60af1)), closes [#275](#275)
* **SEO:** Add header and documentation for Claiming Website on Yandex ([2bb691d](2bb691d))
* **SEO:** add SEO and SMO meta keywords in site's home page ([c5be0eb](c5be0eb))
* **sharing:** Enable customizing the sharing links ([f3e262f](f3e262f))
* **syntax:** add copy to clipboard button for every code snippet ([6f73317](6f73317)), closes [#574](#574) [#525](#525)
* **syntax:** add support for highlighting lines in code snippets ([ba2de8c](ba2de8c)), closes [#520](#520)
* **syntax:** add support for liquid_tags.include_code plugin ([0550a3a](0550a3a)), closes [#518](#518)
* **syntax:** use Gruvbox syntax highlighting theme ([0b50ab1](0b50ab1))
* **typography:** use consistent fonts ([8b7a8bd](8b7a8bd)), closes [#429](#429)
* **typography:** use consistent style for timestamps in tags, categories and archives pages ([a421dcd](a421dcd))
* **typography:** use dns-prefetch and preconnect to improve font load time ([e4bd582](e4bd582))
* **typography:** use responsive fonts ([39acdbf](39acdbf))
@talha131 talha131 modified the milestones: Roadmap, 2020 - Q2 Feb 3, 2020
@hno2 hno2 mentioned this issue Aug 11, 2020
Open
5 tasks
This was referenced Dec 26, 2021
Open
Open
@silverhook
Copy link
Member

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

https://simplecss.org/

@azzamsa
Copy link
Contributor

azzamsa commented Aug 17, 2024

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

@silverhook
Copy link
Member

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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
2020 - Q2
Development

No branches or pull requests
4 participants
@talha131 @silverhook @azzamsa @astraindev