Variations on a Theme

Brad Czerniak [might raise his voice]

§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

http://www.commercialprogression.com

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?

§2. CSS

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!