Slides from presentation at StripeCon London, 16th October 2015

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