variations on a theme
TRANSCRIPT
§1. Templates (and helpers)
Less is more
❝Always code as if the person who ends up maintaining your code is a violent psychopath who knows where you live.❞
Less is more
This feels good:
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']) ?>
How do we get there?
Blockify [module]https://www.drupal.org/project/blockify
Mantra #1: Everything’s a block
Allows for:.region-header > .block {
float: left;
margin: 0 1em 1em 0;
}
Allows for:
Allows for:
Less is more
Entity view modes= secret sauce
Views is [sometimes] hell
Fields are nice
Formatters are often the answer
Examples:● field_collection_image_link_parent● field_collection_delta_display● display_text_formats● mediaelement_responsive● file_link● file_big_icons
template.php
Preprocess functionspass stuff to templates
YOURTHEME_button() {}Stuff like this usually belongs in template.php
Guideline: Minimize .tpl.php
Guideline: Should this view be fields?
less is more
...but not {less}
Take pride in avoiding Sass
often Distrust libraries
DRY (or others)
I HAVE NO PATIENCE FOR
reset.css, normalize.css
forms.css, footer.css
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;
}
!important
body.node-12 #logo a[href] img
.header-level-2
* { box-sizing: border-box; }
Things I like
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;
}
Big .info files; overridesstylesheets[all][] = admin.cssstylesheets[all][] = aggregator.cssstylesheets[all][] = block.cssstylesheets[all][] = book.cssstylesheets[all][] = comment.cssstylesheets[all][] = contextual.cssstylesheets[all][] = ctools.cssstylesheets[all][] = date.cssstylesheets[all][] = datepicker.1.7.cssstylesheets[all][] = dblog.cssstylesheets[all][] = field.cssstylesheets[all][] = file.cssstylesheets[all][] = filter.cssstylesheets[all][] = forum.css...
There’s been a lot of code
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;
}
}
Practical grids.grid {}
.grid .views-row {
float: left;
margin: 0 20px 20px 0;
}
.grid .view-content {
overflow: hidden;
}
§3. Resource Payload
mantra #2: Flush the caches
Fonts are part of a site
@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');
}
Social iconscan be done a million ways
.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;
}
.social a[href*="facebook.com"]:before {
content: '\192';
}
.social a[href*="facebook.com"]:hover:before {
background-color: #3b5998;
}
less is more
§4. Thanks!