The latest project we’ve launched at !frappant is for Swiss Railways – the Schweizerische Bundesbahnen (or SBB for short). The Rail Control System team is responsible for the considerable task of managing the national rail network traffic: 10,000 trains every day which rack up 170 million kilometres per year.

The new microsite at sbbrcs.ch runs using the latest version 7 of TYPO3. Although it’s a simple enough site from a content perspective, there were a few hurdles to overcome, each of which allowed me to extend my knowledge of new techniques for certain aspects of front end development.

The site is built in a modular fashion: each different type of content element comes with its own (Sass-produced) CSS, while some elements load their own JavaScript too. These asset files are linked directly from the individual Fluid template files, so that if a content element type isn’t used, then the relevant CSS or JavaScript file won’t be sent to the browser either. If the client needs a new page content type (like a slider or a thumbnail gallery) at a later date, this can easily be “plugged in” as an additional module without disturbing the remainder of the CSS or JavaScript. This is a technique called modular development, which I’ve been striving to implement in my projects more and more.

The grid layout mixins from the Foundation framework were used to build the main page layout quickly, whilst most of the remaining CSS was my own code. Working with the designer – a colleague at !frappant – allowed us to ensure that the individual page elements followed common principles. For example, a module title looks the same across all modules. This allowed a very simple combination of CSS rules: each module’s header block is formed using exactly the same HTML.

Leave a Reply

Your email address will not be published. Required fields are marked *

For security, use of Google’s reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

This site uses Akismet to reduce spam. Learn how your comment data is processed.