The document discusses SilverStripe, an open source content management system (CMS) built with PHP and MySQL. It provides information on installing SilverStripe using Composer, includes code examples for common modules that add functionality like menus, responsive images, caching, and security templates. The document also offers best practices for organizing SilverStripe sites and some bonus materials on automating development tasks and CSS methodologies like BEM.

1. SILVERSTRIPE MODULES
FOR A BETTER LIFE

2. “Bigfork are second-to-none at taking our InDesign files
and recreating them in a content-managed website using
SilverStripe.
The CMS is very simple to use – allowing us and our
clients to update websites quickly and easily.”

3. BOOTSTRAP
$ git clone https://github.com/feejin/Silverstripe-CleanInstall.git
$ cd my-project
$ composer install

4. COMPOSER.JSON
{
"require": {
"silverstripe/cms": "~3.1.15",
"silverstripe/framework": "~3.1.15",
…
},
"autoload": { "psr-4": { "Bigfork": "util/Bigfork" } },
"scripts": {
"post-install-cmd": "BigforkInstallerInstall::postInstall",
"post-update-cmd": "BigforkInstallerInstall::postUpdate"
}
}

5. FRONT-END MODULES

6. MENU MANAGER
"heyday/silverstripe-menumanager"
<% loop $MenuSet('MyMenu').MenuItems %>
<li><a href="$Link" class="$LinkingMode">$MenuTitle</a></li>
<% end_loop %>

7. EXAMPLES
› Auxiliary Links
› Footer Links
› Navigation Menu

8. RESPONSIVE IMAGES
"heyday/silverstripe-responsive-images"

9. PICTUREFILL
ResponsiveImageExtension:
sets:
CarouselSet:
method: CroppedImage
sizes:
- {query: "(min-width: 200px)", size: 480x240}
- {query: "(min-width: 200px) and (-webkit-min-device-pixel-ratio: 1.5)…", size: 960x480}
- {query: "(min-width: 960px)", size: 960x480}
default_size: 960x480
<% loop $CarouselImages %>
<div class="carousel__item">{$CarouselSet}</div>
<% end_if %>

10. FOCUS
POINT
"jonom/focuspoint"

11. FOCUS
POINT

12. UPLOADED IMAGE

13. CROPPEDIMAGE(580,400)

14. CROPPEDFOCUSEDIMAGE(580,400)

15. FOCUS POINT
+
RESPONSIVE
IMAGES
=
AWESOME
CAROUSELS

16. BLOG
"silverstripe/blog"

17. NEWS
<% loop $List('BlogPost').Limit(1) %>
…
<% end_with %>
<% loop $List('BlogPost').Limit(3,1) %>
…
<% end_loop %>

18. CACHE INCLUDE
"heyday/silverstripe-cacheinclude"

19. EASY CACHE
<% cache %>
<% loop Something %> … <% end_loop %>
<% end_cache %>
<% cache_include 'TemplateName' %>
"heyday/silverstripe-cacheinclude-manager"

20. SPECIAL
MENTION
PASSING DATA...
<% include Twitter Tweets=2, User="bigfork" %>
...INTO INCLUDES
<a data-tweet-limit="{$Tweets}">…</a>
Tweets by @{$User}

21. BETTER NAVIGATOR
"jonom/silverstripe-betternavigator"

22. “I’ve unpublished the page and it’s still showing”

23. “I’ve unpublished the page and it’s still showing”

24. CMS MODULES

25. SECURITY
TEMPLATES
"feejin/silverstripe-securitytemplates"

26. SECURITY
TEMPLATES

27. SEO
"silverstripe/googlesitemaps"
"kinglozzer/metatitle"
"kinglozzer/bfgoogleanalytics"

28. INFOBOXES
"stnvh/silverstripe-infoboxes"

29. LAST, BUT NOT LEAST
"kinglozzer/htmleditornoalignment"
"kinglozzer/htmleditoruploadfield"
"silverstripe-australia/gridfieldextensions"

30. GOOD
HOUSEKEEPING

31. TIDYUP TINYMCE

32. _CONFIG.PHP
$config = HtmlEditorConfig::get('cms');
$config->disablePlugins('emotions', 'fullscreen');
$config->setButtonsForLine(1, 'formatselect,separator,bullist,numlist,
separator,bold,italic,sup,sub,separator,sslink,unlink,anchor,separator,ssmedia,pasteword,
separator,spellchecker,undo,redo,code');
$config->setButtonsForLine(2, 'tablecontrols');
$config->setButtonsForLine(3, '');

33. _CONFIG.PHP
$config = HtmlEditorConfig::get('cms');
$config->setOptions(array(
'theme_advanced_blockformats' => 'p,h2,h3',
'paste_auto_cleanup_on_paste' => 'true',
'paste_remove_styles' => 'true',
'paste_strip_class_attributes' => 'all',
'paste_remove_spans' => 'true'
));

34. PAGE TYPE
CLUTTER

35. ONE WEIRD TRICK
LeftAndMain::require_css(basename(__DIR__) . '/css/cms.css');
#Form_AddForm_PageType .disabled {
display: none !important;
}
#Menu-Help {
display: none;
}
.cms-logo a {
background-image: url('http://placekitten.com/26/23');
}

36. BETTER

37. HOUSE RULES

38. Always use pages if possible and practical.

39. If there are too many fields on a page, group them into
tabs. If a tab is too sparsely populated, merge the contents
with another tab.

40. If something can’t be (or shouldn’t be) a page, can it be a
gridfield within a page? If yes, make it so.

41. If the thing can’t or shouldn’t be a page, and gridfieldwithin a page isn’t relevant, resort to modeladmin.

42. FIN.
BIGFORK.CO.UK
@FEEJIN

43. BONUS MATERIAL

44. AUTOMATE WHAT?
› Compiling SCSS into CSS
› Linting SCSS
› Automatically adding vendor prefixes where required
› Combining media queries
› Optimising images
› Javascript linting and uglifying
› Live reload

45. COMPONENT BASED SCSS
style.scss
[includes]
_reset.scss
_typography.scss
[components]
_header.scss
_footer.scss

46. MEDIA QUERIES MIXIN
.header { background-color: $color__black; }
@include respond(960px) {
.header { background-color: $colour__white; }
}
.header {
background-color: #000;
@include respond(960px) {
background-color: $colour__white;
}
}
@include retina() {
.header { … }
}

47. CAVEAT EMPTOR
› Media queries inside rules can make them harder to maintain
› mq-combine can reorder CSS so don’t rely on source order for specificity
› mq-combine also breaks source maps :(

48. BEM
https://en.bem.info

49. BEM–ISH

50. READABLE IN HTML
& CSS FILES
<nav class="nav">
<ul class="nav__menu">
<li class="nav__item nav__item--{$LinkingMode}">
<a class="nav__link" href="{$Link}">{$MenuTitle}</a>
</li>
</ul>
</nav>
.nav { … }
.nav__menu { … }
.nav__item { … }
.nav__item--current { … }

51. SCSS & BEM–ISH
.nav {
…
&__item {
…
&--current {
…
} } }
.nav { … }
.nav__item { … }
.nav__item--current { … }

52. BAD!
.nav {
…
&__item {
…
&--current {
…
} } }
› Can’t search for rules in source files
› Harder to gauge specificity

53. QUESTIONS?
BIGFORK.CO.UK
@FEEJIN