Creating Code for Australia (front end finished)
Code for Australia's website is finished! Right now it's only front-end with no back-end code. Well there wasn't any need for backend code, although I was playing around with Laravel...
Code for Australia's two main programs are the Cross Disciplinary Innovation Track and Professional Developer Track. The fellows that are part of Code for America and Code for Europe fall into the Professional Developer Track. The reason that Code for Australia includes a different kind of program is because of the synergy between an educational institution (such as Polycademy) and the outcomes that Code for X programs try to achieve. This synergy is essentially the ability to acquire cross disciplinary innovation. Throughout my life, I've always noticed that blue skies innovation comes from a mixing of different ideas and fields, whereas process innovation (like marginal efficiency gains) comes from specialisation in one field. This is echoed by the "Medici Effect" book, you can find it here. Therefore in order to tap into blue skies innovation, Code for Australia's Cross Disciplinary Innovation Track will bring in people who want to technologically innovate the public service(s), with backgrounds outside of software development, and get them to understand web application development through Polycademy. We then go to Government institutions and say that we could provide them with Professional Developer volunteers or Cross Disciplinary Innovators (which could come from their organisation as a training package or externally).
Both of these tracks will achieve Code for Australia's goal of open source governance, but they will do it differently and perhaps with interesting differing results. While Professional Developers may be able to produce applications quickly, these are only marginal improvements to open source governance. In order to truly integrate digital democracy, we need people outside of software development to understand the ramifications of the digital revolution.
Now, onto some code. You may notice that there are some changes compared to the Photoshop mockup. The final website layout will not always look like the Photoshop mockup. This is true primarily because Photoshop mockups are static layouts and there isn't any interactivity that can be coded in. Therefore when it comes to producing via html/css/js, things will look a little different. The Photoshop mockup is just there as a guideline and also to help with image graphic slicing.
I unfortunately did not get a chance to record my progress, I'm currently working on a slow laptop. However there were a couple things that I discovered while creating this layout. Perhaps they will help others who are trying to figure out the same problem.
CSS Negative Margin Overlap Trick
On the photoshop file you may have seen numbers trying to overlap the backgrounds of their own container and the parent container. I knew this was possible in CSS with negative margins, so I scoured the internet for a solution. I couldn't find one, so I did a small test using jsfiddle.
I wanted to have the numbers to be contained within the sections that they were denoting. In order to have extend and overlap onto the parent container, there needed to be a negative margin-top for the 1. The trick was to have the section container to also have a negative margin-top and a positive padding-top to push up the background colour underneath the 1. No need for z-index!
In order to implement it in Twitter Bootstrap with the sections being in rows was a bit more difficult. This was because the Bootstrap's rows were interfering with the negative margins, and we needed them to behave like stacked rows. In order to solve this issue, an even simpler and more cross-browser css solution was needed.
And there it is, all you need is to make the number float:left or right. By making the number float, the browser ignores its size when setting out the flow of the content, and simply assumes it doesn't exist when putting up the section's background. You still a need a negative margin for the number, but the section no longer requires negative margin because the floated element is not counted. I used an inline element as the numbers, but this should work for other applications when you need tag or label for any sectional content. You could even design dates for blog articles to work like this.
Twitter Bootstrap's Row Based Vertical Centering
Twitter's bootstrap is an amazing HTML/CSS/JS framework. It really speeds up the development of the website frontend. However its framework can have confusing results because of all the magic under the hood. So on Photoshop, I wanted to vertically center (and horizontally center) this multilined content in the second section box.
What I was trying to do was vertically center some content inside Bootstrap's row. There are many ways of doing this in CSS and every one of them feels like a hack. Anyhow, I used the table method because it was the most obvious and simple. Here's some pseudo code.
.parent_container {
display:table;
}
.vertically_centered_content {
display:table-cell;
vertical-align:middle;
}
This ends up not working if you use Twitter Bootstrap's row functionality. Basically if you look at the site, the multilined text is in a row with the image of a ballot box to the right. I was using the row functionality in order to make them behave as a row in a big browser and in a small browser they would stack up vertically.
Unfortunately the table method of vertical alignment doesn't work with the rows. Which is sad because sometimes when people want elements aligned up in a row, they also want them to be aligned up vertically.
In order to solve this issue, I had to abandon the row functionality completely. Incidentally the same method that allows vertical align, when combined a few percentages will create a row like functionality anyway.
So there you have an alternative to Twitter Bootstrap's row functionality that allows vertical centering. It even works cross-browser.* You can't see it in the jsfiddle example, but if there is a real image with proper widths and heights and display:block, it will even stack vertically when the screen gets too small.
*(I don't support < IE8.)
Bootstrap Span Centering
If you are using Bootstrap's span to create a responsive width, and you want to center it. Just add this to the container:
.container_with_bootstrap_span_centered{
float: none;
margin: 50px auto;
display: table;
}
Ok I'm done. Next project, more Polyhack events in Canberra and perhaps a Codecademy for PHP.