Welcome

Tim Kleintim@page-elements.com

Making websites with SilverStripe in no time

Web Design

Web design

● Most designs are based on a grid● Grid designs have been around for a long time● Eg: Newspapers use them

● Common grids are 12 or 16 columns

CSS Frameworks

CSS Frameworks

● CSS Framework != CSS Framework● Many different types address many different

problems:● Mainly: Saving Your Time!

Reset.css

● Resets all major browsers to a consistent default style

● YUI Reset CSS is one of the most popular● http://developer.yahoo.com/yui/reset/

● Strongly recommend the usage!

Grid Frameworks

● Help to 'layout' the content on a site● Can be fixed width or fluid● Many around:

● Blueprint - http://blueprintcss.org/● YAML - http://www.yaml.de/en/

● My favourite: ● 960.gs – http://960.gs/

960gs

960gs

<div class=”container_12”>

<div class=”grid_12”>

Header

</div>

<div class=”clear”></div>

<div class=”grid_8 suffix_1”>

Main content

</div>

<div class=”grid_3”>

Sidebar

</div>

<div class=”clear”></div>

</div>

Header

Main content Sidebar

Style Languages / Interpreters

● Add functionality to CSS● Need server side interpreter or Javascript

(LESS)● SASS (Syntactically Awesome Stylesheets)

● Comes with HAML for Ruby● Plugins available for most editors● Phamlp is a port to PHP:

http://code.google.com/p/phamlp/

SASS Example

$blue: #3bbfce;

$margin: 16px;

.content-navigation {

border-color: $blue;

color: darken($blue, 9%);

}

.border {

padding: $margin / 2;

margin: $margin / 2;

border-color: $blue;

}

Designs and Reality

Grid Designs and CMS'

● Most CMS' offer these content fields:● A title● Wysiwyg content

Logo

Navigation

HeadingLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eufugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Footer

Sidebar

Grid Designs and CMS'

● While designs often require more:● Content blocks● Dynamic areas● Interactive content

Logo

Navigation

HeadingLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Footer

Search

Sub navigation

Slideshow

IntrotextLorem ipsum dolor sit Amet, consectetur adipisicing elit,sed do eiusmod tempor

A Video

DescriptionBla

Latest News● One Article● Another Article● ...● ...

Follow us on twitter

Read our RSS Feed

Become a friend on facebook

Bookmark us

Copyright

Special

Slogan

Tagline

Page Elements

● My requirements● Easy to use● Seemless integration into SilverStripe● Easy to extend● xhtml compliant● Lightweight● Quick and easy layout creation● No PHP knowledge required

● Insert placeholders in the template file● Eg: $Slot(Header)

● Populate these areas through the CMS● Elements are decendants of DataObject● Can store / output anything you like

More info

http://www.page-elements.com/

Page Elements

Step by step

Step by step

● Setting up bug tracker and SVN Repository● We use Redmine

● http://www.redmine.org/

Step by step

Step by step

Step by step

● Set up ● SilverStripe

– Page Elements externals● Database● New theme directory

● Open new site in Editor

Step by step

● Analysing the design visuals for● Functionality● Layout

Step by step

Step by step

Step by step

Grid_4Left

Grid_12Header

Grid_4Right

Grid_4Middle

Step by step

Step by step

Step by step

Step by step

Step by step

Step by step

Step by step

● Commiting to svn● Site set up on server● Tweaks / fixes● Sign Off

Step by step

Questions?

Thank you!

tim@page-elements.com