![](https://sbsbsb.sbs/images/0522-kobogarden-mobile-view.png)
As tutogarden was already functional on the desktop, I did not pay much attention to the layout; but it was unusable on mobile. And so I rebuilt it from the ground up, and starting from the mobile-view first — from what I understand, this is common development practice for front-end, and it did indeed help.
The biggest struggle was getting a fixed header when scrolling content; it really took me a bit of time on a very unproductive afternoon. Then I realised that (mostly) all CSS is open — which is really nice for web programming, really! — and so I focused on assemblying the shortest possible layout that had a fixed header. Luckily, I had checked Andy Matushack's talk that had been published earlier in that day, and copied most of its layout. You can check it on the side: I'm particularly proud of having the filenames wrap instead of overflowing horizontally (using the break-all
class on each filename), and the trick of using ⇲ before each filename, as not to confuse wrapped filenames with new files.
Later, I prepared Tailwind for production without any major struggles. When developing (and for a brief period in production) I had used its CDN, but this is not optimal. Thus, I followed the installation instructions and the further optimisations; ideally, this would be built in my continuous deployment process, but that shall be done later (remember: 80/20!).
I am exporting the result .css
file in the static
dir of my application (in case this might be of help as future documentation); then, collectstatic
puts them all in the same STATICFILES
dir I specified.
staticfiles
├── admin
│ ├── css
│ │ └── vendor
│ │ └── select2
│ ├── img
│ │ └── gis
│ └── js
│ ├── admin
│ └── vendor
│ ├── jquery
│ ├── select2
│ │ └── i18n
│ └── xregexp
└── throve
(both throve
and admin
have their own .js
, .css
, etc. files, but they do not appear in the output of tree
).