Tim Klein's talk on making websites with SilverStripe in no time

WelcomeMaking websites with SilverStripe in no timeTim Kleintim@page-elements.com

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

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

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

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

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/

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● 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 Grid_12 HeaderGrid_4 Grid_4 Grid_4 Left Middle Right

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

http://www.silverstripe.org	111
http://silverstripe.org	80
https://twitter.com	1

Tim Klein's talk on making websites with SilverStripe in no time

by JoannaTMcLeod on Feb 21, 2011

Accessibility

Upload Details

Usage Rights

3 Embeds 192

Statistics

Tim Klein’s talk on making websites with SilverStripe in no time Presentation Transcript