Migrating my blog to use Bootstrap 4
In the previous article, I mentioned the blog was migrated to Pelican. After that I customized it and add some new features. I found Bootstrap 3 was released for a few years and there would be no update. I tried to update the theme to Bootstrap 4.5. Let's talk about what is the lesson learned.
First of all, I am not a web developer. Creating or customizing the small themes make me learn a bit about CSS, reactive design, SEO, JSON-LD and so on.
Status of Bootstrap 3
When it comes to web frontend UI framework, Bootstrap by Facebook is the market leader. Another big player is Foundation by Zurb and React. There are also lots of smaller frameworks available in the market.
Bootstrap 3 was released for a few years and there would be no update. There are still many websites and products that still uses Bootstrap 3, like:
- IP and access management software Netbox
- MantisBT bug management software
- IDP software Keycloak version 9, with file name
- /node_modules/bootstrap/dist/js/bootstrap.min.js
How about the theme pelican-bootstrap3? After exploring the theme, I would say it is a very generic theme. It supports lots of standard features for a blog system. Like:
- Breadcrumb
- Sidebar support, displaying links, social contact
- Displaying categories and tags
- Archives
- Pagination for list of articles
- Integration with comment systems, Google analytics
All these are written in Jinja2 templates and most feature could be enabled or disabled by a parameter. I would suggest using this theme and make your own customization to make a new theme.
Moving to Bootstrap 4
I would like to make a more customized theme and before that, I check out Bootstrap 4. There are lots of difference between Bootstrap 3 and 4. The official website listed all the related changes. There are lots of components that are changed, like navigation bar, pagination, cards and there are no more 'wells' layout component. The grid layout system is changed to d-flex.
The logics of the old theme was well written in Jinja2 templates, migrating my small blog does not need a lot effort. But I did not aim to fully migrate all the features of pelican-bootstrap3 to become pelican-bootstrap4.
Other components and problems
Font Awesome version 4.7 was released with the old theme. The class name in the newest version (version 5) is totally different from version 4.7. So you either update all the class names or you can use the shim without code changes.
I think I was using my custom CSS in a wrong way. Currently, I was using the bootstrap slate theme and add a custom css. I think I should take the slate theme and edit it to make a new theme. It is because there are already lots of rules (the theme size is over 120KB) in the slate theme. Customizing with the custom css file is very tedious and error prone. The slate theme had set some margins and padding to some classes and the location of the UI components could be off for a small distance.
As I said am not a web developer, lots of these are new to me. I am not fully understand the new d-flex system. But during the upgrade process, it is fun.
What's next?
The new theme is in here. It may be useful to someone. For me, I would like to improve the location of the top navigation bar and the sidebar. I would fork the current theme for my own use. So that I can focus on the UI and do not need to migrate all the features of the old theme.