django + less setup

While working on the front-end for hyperkitty, I was running into a lot of repetitive css. Now, I don't mind being a bit quick and dirty just to get things working quickly, but for long-term maintanance I thought it would be better to look into some stylesheet languages. Since hyperkitty is using Bootstrap, I naturally looked towards LESS. LESS has features like variables, extension, and nested rules, which makes CSS stylesheets look much more readable (and will hopefully mean it'll be easier to maintain moving forward). To get LESS working with hyperkitty's development…Read more …

maintaining a clean test environment

One of the tricky things I'm discovering is keeping up with all the changes when you're working on large project. Case in point, recently I was testing out some of my frontend stuff on my local web server. I sometimes worry I've mucked around my dev box too much, so I like to have a separate box that I use as a clean test environment. When I'm using that box, I usually only pull sources down to keep everything up-to-date, but recently when I tried to do that, I ran into several problems:…Read more …

mobile layouts

Recently I've been trying to figure out the best mobile layouts for some of the hyperkitty pages. The challenge has been that there is often a lot of content on these pages, so figuring out a clean way to display that on a small screen can be tricky. The screenshots below give you a sense of what I've been playing around with. These are for 3 different screen widths of the overview page: 320px screen width: 640px screen width: 768px screen width: The 320px is for the smallest Android screens, 640px is a…Read more …

breadcrumbs in navbar

As I was looking through some of the Hyperkitty redesigns, I noticed that there were different versions of the breadcrumbs in the navbar. One version looks like this: Another version looks like this: In my working branch, I've modified the latter version to look like this: The change was partially because due to the fact that on some screens, the breadcrumbs can be extremely long. For example, see this page: My thought was by aligning the breadcrumbs on the left margin, we'd get more space for potentially long strings. Of course, it's still…Read more …

first pull request!

I'm a bit late to posting this, but I recently joined the latest group of OPW interns. I'm excited to be part of the OSS community and am looking forward to do my part to contribute! My OPW project is to work on front-end design and development for Hyperkitty. One of the interesting things about the OPW application process is that you have to make an initial contribution to the project that you want to work on. After chatting with Máirín, I learned that Hyperkitty's front-end is based on Twitter's Bootstrap. We decided…Read more …
← Newer Posts
Older Posts →