1. Variations on a
Theme
Brad Czerniak [might raise his voice]

2. §1. Templates (and helpers)

3. Less is more

4. ❝Always code as if the person
who ends up maintaining your
code is a violent psychopath who
knows where you live.❞

5. Less is more

6. This feels good:

7. page.tpl.php
<?php if ($page['header']) print render($page['header']) ?>
<?php if ($page['nav']) print render($page['nav']) ?>
<?php if ($page['content_top']) print render($page['content_top']) ?>
<?php if ($page['content']) print render($page['content']) ?>
<?php if ($page['content_bottom']) print render($page['content_bottom']) ?>
<?php if ($page['footer']) print render($page['footer']) ?>

8. How do we get there?

9. Blockify [module]
https://www.drupal.org/project/blockify

11. Mantra #1: Everything’s a block

12. Allows for:
.region-header > .block {
float: left;
margin: 0 1em 1em 0;
}

13. Allows for:

14. Allows for:

15. Less is more

16. Entity view modes
= secret sauce

17. Views is [sometimes] hell

18. Fields are nice

19. Formatters are often the answer

20. Examples:
● field_collection_image_link_parent
● field_collection_delta_display
● display_text_formats
● mediaelement_responsive
● file_link
● file_big_icons

21. template.php

22. Preprocess functions
pass stuff to templates

23. YOURTHEME_button() {}
Stuff like this usually belongs in template.php

24. Guideline: Minimize .tpl.php

25. Guideline: Should this view be fields?

26. §2. CSS

27. less is more

28. ...but not {less}

29. Take pride in avoiding Sass

30. often Distrust libraries

31. DRY (or others)

32. I HAVE NO PATIENCE FOR

33. reset.css, normalize.css

34. forms.css, footer.css

35. a:link {
background-color: transparent;
border-top: 0 none;
border-right: 0 none;
border-bottom: 0 none;
border-left: 0 none;
border-radius: 0;
clear: none;
color: #0000ff;
cursor: pointer;
display: inline;
float: none;
font-style: normal;
font-weight: normal;
margin: 0;
padding: 0;
position: static;
text-align: left;
text-decoration: underline;
}

36. !important

37. body.node-12 #logo a[href] img

38. .header-level-2

39. * { box-sizing: border-box; }

40. Things I like

41. Utility classes (for blocks)
.pipe-spaced {}
.pipe-spaced li:after {
color: #ccc;
content: '|';
display: inline-block;
padding: 0 0 0 10px;
}
.pipe-spaced li.last:after {
display: none;
}

42. Big .info files
; overrides
stylesheets[all][] = admin.css
stylesheets[all][] = aggregator.css
stylesheets[all][] = block.css
stylesheets[all][] = book.css
stylesheets[all][] = comment.css
stylesheets[all][] = contextual.css
stylesheets[all][] = ctools.css
stylesheets[all][] = date.css
stylesheets[all][] = datepicker.1.7.css
stylesheets[all][] = dblog.css
stylesheets[all][] = field.css
stylesheets[all][] = file.css
stylesheets[all][] = filter.css
stylesheets[all][] = forum.css
...

43. There’s been a lot of code

44. Responsive trickery
.region > .inner {
margin: 0 auto;
max-width: 960px;
padding: 20px 20px;
width: 960px;
}
@media all and (min-width: 1px) {
.region > .inner {
width: inherit;
}
}

45. Practical grids
.grid {}
.grid .views-row {
float: left;
margin: 0 20px 20px 0;
}
.grid .view-content {
overflow: hidden;
}

46. §3. Resource Payload

47. mantra #2: Flush the caches

48. Fonts are part of a site

49. @font-face {
font-family: 'lato';
font-style: normal;
font-weight: normal;
src: url('fonts/lato.eot');
src: url('fonts/lato.eot?') format('embedded-opentype'),
url('fonts/lato.woff') format('woff');
}
@font-face {
font-family: 'lato';
font-style: italic;
font-weight: normal;
src: url('fonts/lato-i.eot');
src: url('fonts/lato-i.eot?') format('embedded-opentype'),
url('fonts/lato-i.woff') format('woff');
}

50. Social icons
can be done a million ways

51. .social {}
.social a[href] {
color: transparent;
display: inline-block;
font-size: 0px;
font-style: normal;
}
.social a[href]:before {
background-color: #888;
color: #fff;
content: '1f517';
display: block;
font-family: 'fontello';
font-size: 16px;
font-size: 1rem;
min-width: 1em;
padding: 5px;
}
.social a[href]:hover:before {
background-color: #111;
color: #fff;
}

52. .social a[href*="facebook.com"]:before {
content: '192';
}
.social a[href*="facebook.com"]:hover:before {
background-color: #3b5998;
}

53. less is more

54. §4. Thanks!