A New Theme for CSS Bundle
So it seems that this bootstrap theme is a bit tired. It does the job, but its not very neat. It seems quite messy to me, and i would like something cleaner and more precise.
Maybe ill look back fondly one day and go, ah bootstrap with dark mode...
Or not...
I was thinking something a bit more like this:
This one is a tailwind based design, i was thinking something like this but not using tailwind. Cleopatra Theme on Github.
If i manually code the design, it may take me a while to get it working, but at least i will know whats in it.
I like the idea of everything being in a card format, but maybe the cards could be a bit more subtle.
How do you start a reskin like this?
Probably start by removing the bootstrap themee files, and see what is broken, and fix it from there....
Tricky Bits
Drop Down Menu's
I might remove these, and have one nav on the left hand side for the main items.
Mobile Menu
Not sure how i will handle this one either
Removal of Bootstrap
It works but its ugly! Quite daunting actually.
This is also quite a nice theme, neat and simple.
Then on mobile the left nav switches to a toggle, which seems quite straighforward.
Nice code areas with a copy button.
Each code part should be able to be downloaded as well as the bundle.
Download CSS, Download HTML, Download Javascript, or Download Package which will be all files in a zip.
Bug : File not found, for the embedded demos.
I think this is caused due to the source code movement. Might be a path issue i think.
Update: bug caused by permission error on the bundle directory.
Lets start again
Its kind of nice to start from scratch.
No framework, see how it goes.
I think its just too bright, i like darker themes, so will have to switch out the white for something less blinding.
You can view the white index here:
11 May 2022
Bit of work done today converting everything over from bootstrap to non-bootstrap, so things are still broken, but it forces me to get the work done so sticking with the new theme.
Almost gave up on this as its a bit of a project!
Work so far.
Mobile / responsive is not working yet.
A Few more little changes and fixes to make it look decent.
Also tested page speed and its scoring 97 on desktop. On mobile its a bit worse due to the animated gif's.
Google Page Speed Score 97
Not a bad score considering this is running on a docker container on one of the smallest vm's that is available on rack nerd.
After playing around with the grid a bit, i have made it look ok on mobile, its not perfect yet, but it works.