Jan 28, 2015
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!