On February 16, 2010, Tim Klein spoke at a SilverStripe meetup in Wellington. These are his slides.

1. Welcome
Making websites with SilverStripe in no time
Tim Klein
tim@page-elements.com

2. Web Design

3. 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

4. CSS Frameworks

5. CSS Frameworks
●
CSS Framework != CSS Framework
●
Many different types address many different
problems:
●
Mainly: Saving Your Time!

6. 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!

7. 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/

8. 960gs

9. 960gs
<div class=”container_12”>
<div class=”grid_12”>
Header Header
</div>
<div class=”clear”></div>
<div class=”grid_8 suffix_1”>
Main content
Main content Sidebar
</div>
<div class=”grid_3”>
Sidebar
</div>
<div class=”clear”></div>
</div>

10. 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/

11. 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;
}

12. Designs and Reality

13. Grid Designs and CMS'
●
Most CMS' offer Logo
these content fields: Navigation
●
A title
Heading
●
Wysiwyg content Lorem 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. Sidebar
Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id
est laborum.
Footer

14. Grid Designs and CMS'
Slogan
Logo Search
●
While designs often Tagline
Navigation
require more: Sub navigation
Special
●
Content blocks Slideshow
●
Dynamic areas Introtext Latest News A Video
Lorem ipsum dolor sit
●
One Article
●
Interactive content Amet, consectetur
adipisicing elit,sed do
●
●
Another Article
...
eiusmod tempor ●
...
Heading
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
Description
incididunt ut labore et dolore magna
aliqua. Bla
Ut enim ad minim veniam
Become a
Follow us on
friend on Bookmark us
Read our
twitter RSS Feed
facebook
Footer Copyright

15. 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

16. Page Elements
●
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/

17. Step by step

18. Step by step
●
Setting up bug tracker and SVN Repository
●
We use Redmine
●
http://www.redmine.org/

19. Step by step

20. Step by step

21. Step by step
●
Set up
●
SilverStripe
– Page Elements externals
●
Database
●
New theme directory
●
Open new site in Editor

22. Step by step
●
Analysing the design visuals for
●
Functionality
●
Layout

23. Step by step

24. Step by step

25. Step by step
Grid_12
Header
Grid_4 Grid_4 Grid_4
Left Middle Right

26. Step by step

27. Step by step

28. Step by step

29. Step by step

30. Step by step

31. Step by step

32. Step by step
●
Commiting to svn
●
Site set up on server
●
Tweaks / fixes
●
Sign Off

33. Step by step

34. Questions?

35. Thank you!
tim@page-elements.com