Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SILVERSTRIPE MODULES
FOR A BETTER LIFE
“Bigfork are second-to-none at taking our InDesign files
and recreating them in a content-managed website using
SilverStri...
BOOTSTRAP
$ git clone https://github.com/feejin/Silverstripe-CleanInstall.git
$ cd my-project
$ composer install
COMPOSER.JSON
{
"require": {
"silverstripe/cms": "~3.1.15",
"silverstripe/framework": "~3.1.15",
…
},
"autoload": { "psr-4...
FRONT-END MODULES
MENU MANAGER
"heyday/silverstripe-menumanager"
<% loop $MenuSet('MyMenu').MenuItems %>
<li><a href="$Link" class="$Linking...
EXAMPLES
› Auxiliary Links
› Footer Links
› Navigation Menu
RESPONSIVE IMAGES
"heyday/silverstripe-responsive-images"
PICTUREFILL
ResponsiveImageExtension:
sets:
CarouselSet:
method: CroppedImage
sizes:
- {query: "(min-width: 200px)", size:...
FOCUS
POINT
"jonom/focuspoint"
FOCUS
POINT
UPLOADED IMAGE
CROPPEDIMAGE(580,400)
CROPPEDFOCUSEDIMAGE(580,400)
FOCUS POINT
+
RESPONSIVE
IMAGES
=
AWESOME
CAROUSELS
BLOG
"silverstripe/blog"
NEWS
<% loop $List('BlogPost').Limit(1) %>
…
<% end_with %>
<% loop $List('BlogPost').Limit(3,1) %>
…
<% end_loop %>
CACHE INCLUDE
"heyday/silverstripe-cacheinclude"
EASY CACHE
<% cache %>
<% loop Something %> … <% end_loop %>
<% end_cache %>
<% cache_include 'TemplateName' %>
"heyday/si...
SPECIAL
MENTION
PASSING DATA...
<% include Twitter Tweets=2, User="bigfork" %>
...INTO INCLUDES
<a data-tweet-limit="{$Twe...
BETTER NAVIGATOR
"jonom/silverstripe-betternavigator"
“I’ve unpublished the page and it’s still showing”
“I’ve unpublished the page and it’s still showing”
CMS MODULES
SECURITY
TEMPLATES
"feejin/silverstripe-securitytemplates"
SECURITY
TEMPLATES
SEO
"silverstripe/googlesitemaps"
"kinglozzer/metatitle"
"kinglozzer/bfgoogleanalytics"
INFOBOXES
"stnvh/silverstripe-infoboxes"
LAST, BUT NOT LEAST
"kinglozzer/htmleditornoalignment"
"kinglozzer/htmleditoruploadfield"
"silverstripe-australia/gridfiel...
GOOD
HOUSEKEEPING
TIDYUP TINYMCE
_CONFIG.PHP
$config = HtmlEditorConfig::get('cms');
$config->disablePlugins('emotions', 'fullscreen');
$config->setButtons...
_CONFIG.PHP
$config = HtmlEditorConfig::get('cms');
$config->setOptions(array(
'theme_advanced_blockformats' => 'p,h2,h3',...
PAGE TYPE
CLUTTER
ONE WEIRD TRICK
LeftAndMain::require_css(basename(__DIR__) . '/css/cms.css');
#Form_AddForm_PageType .disabled {
display: ...
BETTER
HOUSE RULES
Always use pages if possible and practical.
If there are too many fields on a page, group them into
tabs. If a tab is too sparsely populated, merge the contents
with ...
If something can’t be (or shouldn’t be) a page, can it be a
gridfield within a page? If yes, make it so.
If the thing can’t or shouldn’t be a page, and gridfieldwithin a page isn’t relevant, resort to modeladmin.
FIN.
BIGFORK.CO.UK
@FEEJIN
BONUS MATERIAL
AUTOMATE WHAT?
› Compiling SCSS into CSS
› Linting SCSS
› Automatically adding vendor prefixes where required
› Combining ...
COMPONENT BASED SCSS
style.scss
[includes]
_reset.scss
_typography.scss
[components]
_header.scss
_footer.scss
MEDIA QUERIES MIXIN
.header { background-color: $color__black; }
@include respond(960px) {
.header { background-color: $co...
CAVEAT EMPTOR
› Media queries inside rules can make them harder to maintain
› mq-combine can reorder CSS so don’t rely on ...
BEM
https://en.bem.info
BEM–ISH
READABLE IN HTML
& CSS FILES
<nav class="nav">
<ul class="nav__menu">
<li class="nav__item nav__item--{$LinkingMode}">
<a ...
SCSS & BEM–ISH
.nav {
…
&__item {
…
&--current {
…
} } }
.nav { … }
.nav__item { … }
.nav__item--current { … }
BAD!
.nav {
…
&__item {
…
&--current {
…
} } }
› Can’t search for rules in source files
› Harder to gauge specificity
QUESTIONS?
BIGFORK.CO.UK
@FEEJIN
Upcoming SlideShare
Loading in …5
×

SilverStripe Modules for a Better Life

1,102 views

Published on

Slides from presentation at StripeCon London, 16th October 2015

Published in: Technology
  • Be the first to comment

SilverStripe Modules for a Better Life

  1. 1. SILVERSTRIPE MODULES FOR A BETTER LIFE
  2. 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. 3. BOOTSTRAP $ git clone https://github.com/feejin/Silverstripe-CleanInstall.git $ cd my-project $ composer install
  4. 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. 5. FRONT-END MODULES
  6. 6. MENU MANAGER "heyday/silverstripe-menumanager" <% loop $MenuSet('MyMenu').MenuItems %> <li><a href="$Link" class="$LinkingMode">$MenuTitle</a></li> <% end_loop %>
  7. 7. EXAMPLES › Auxiliary Links › Footer Links › Navigation Menu
  8. 8. RESPONSIVE IMAGES "heyday/silverstripe-responsive-images"
  9. 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. 10. FOCUS POINT "jonom/focuspoint"
  11. 11. FOCUS POINT
  12. 12. UPLOADED IMAGE
  13. 13. CROPPEDIMAGE(580,400)
  14. 14. CROPPEDFOCUSEDIMAGE(580,400)
  15. 15. FOCUS POINT + RESPONSIVE IMAGES = AWESOME CAROUSELS
  16. 16. BLOG "silverstripe/blog"
  17. 17. NEWS <% loop $List('BlogPost').Limit(1) %> … <% end_with %> <% loop $List('BlogPost').Limit(3,1) %> … <% end_loop %>
  18. 18. CACHE INCLUDE "heyday/silverstripe-cacheinclude"
  19. 19. EASY CACHE <% cache %> <% loop Something %> … <% end_loop %> <% end_cache %> <% cache_include 'TemplateName' %> "heyday/silverstripe-cacheinclude-manager"
  20. 20. SPECIAL MENTION PASSING DATA... <% include Twitter Tweets=2, User="bigfork" %> ...INTO INCLUDES <a data-tweet-limit="{$Tweets}">…</a> Tweets by @{$User}
  21. 21. BETTER NAVIGATOR "jonom/silverstripe-betternavigator"
  22. 22. “I’ve unpublished the page and it’s still showing”
  23. 23. “I’ve unpublished the page and it’s still showing”
  24. 24. CMS MODULES
  25. 25. SECURITY TEMPLATES "feejin/silverstripe-securitytemplates"
  26. 26. SECURITY TEMPLATES
  27. 27. SEO "silverstripe/googlesitemaps" "kinglozzer/metatitle" "kinglozzer/bfgoogleanalytics"
  28. 28. INFOBOXES "stnvh/silverstripe-infoboxes"
  29. 29. LAST, BUT NOT LEAST "kinglozzer/htmleditornoalignment" "kinglozzer/htmleditoruploadfield" "silverstripe-australia/gridfieldextensions"
  30. 30. GOOD HOUSEKEEPING
  31. 31. TIDYUP TINYMCE
  32. 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. 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. 34. PAGE TYPE CLUTTER
  35. 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. 36. BETTER
  37. 37. HOUSE RULES
  38. 38. Always use pages if possible and practical.
  39. 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. 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. 41. If the thing can’t or shouldn’t be a page, and gridfieldwithin a page isn’t relevant, resort to modeladmin.
  42. 42. FIN. BIGFORK.CO.UK @FEEJIN
  43. 43. BONUS MATERIAL
  44. 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. 45. COMPONENT BASED SCSS style.scss [includes] _reset.scss _typography.scss [components] _header.scss _footer.scss
  46. 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. 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. 48. BEM https://en.bem.info
  49. 49. BEM–ISH
  50. 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. 51. SCSS & BEM–ISH .nav { … &__item { … &--current { … } } } .nav { … } .nav__item { … } .nav__item--current { … }
  52. 52. BAD! .nav { … &__item { … &--current { … } } } › Can’t search for rules in source files › Harder to gauge specificity
  53. 53. QUESTIONS? BIGFORK.CO.UK @FEEJIN

×