Site Details

At Loconut I implemented the design and CSS stylings for the Loconut social website as well as other contracted websites. The pre-existing style sheets had to be completely overhauled to suit a new design direction that was being undertaken and created to suit a new underlying back end system. The new back end system was a more object-orientated focused CMS system with plug-in .Net code modules, which provided a more flexible design and development architecture.

I created a new CSS framework that would ensure that styles were easily adaptable for the new plugin widget structure. This structure was designed to be user friendly, allow freedom with any direction the site may take in the future and, most importantly, reused to quickly styled contracted websites.

Concept

Loconut already had an existing design style that was created by the previous Web Designer. The major problem was the implementation: the previous designer had only one CSS file that covered the entire site and all it's components; over 5000 lines of CSS code in a file megabytes in size.

The company agreed to a complete rewrite of the CSS with the requirement that the existing style was maintained. The CSS was written to comply with W3C standards and great readability for the ease of future designers. By breaking down the style sheets into component specific files, I ensure that a user only loaded styles that were needed and the applied styles could be easily located when needed. Along with the benefits of speed and decreased resources, this new object orientated approach to design and code was a crucial element to the modular approach Loconut was taking with it's site elements.

The next step I took was to develop a Loconut specific format to the CSS structure allowing for rapid component implementation. I would take raw backend code, written in .Net, and integrate this into the site quickly by coding HTML using standard hooks I created to use the default Loconut style theme. The individual CSS for that component was then tweaked to suit the specifics of what was desired.

My creation provided a quickly implemented, standards compliant, perfectly extensible and carefully suited HTML and CSS system.

Technology Used

The backend code is written in .Net 3.5 whilst all frontend code is HTML and Javascript. Designs were made using Adobe Photoshop and Fireworks and implemented using CSS 2. The project was written and maintained in a team of four people using Microsoft Visual Studio 2008 and SVN.

• .Net 3.5
• Javascript
• HTML
• CSS 2
• Photoshop CS3
• Fireworks CS3
• Visual Studio 2008
• SVN