Drupal development

Basics

• Semantics, structure and presentation

• Structure of the .info file
• Default .info values
• Assigning content to regions
• Creating a sub-theme
• JavaScript and jQuery

Templates

• Overriding themable output
• Core templates
• Drupal 7 Template Suggestions
• Theming forms in your theme

D7

• node.tpl.php
• block.tpl.php

Themes

Sasson

• http://drupal.org/project/sasson - HTML5, responsive (content first), semantic grid (SASS/SCSS), CSS reset (normalize)

Currently uses this phamlp fork which bundles Compass. This might change if Sasson switches to this fork.

drush sns [name] - generate a subtheme. ff does this auto if theme is sasson.

sasson.info calls

• sasson/styles/boilerplate.css - h5bp.com/css
• sasson/styles/sasson.scss (.info call is to the processed .css, natch)
  • @imports "css3", "960/grid", @import "base";
  • https://github.com/nextmat/compass-960-plugin/blob/master/stylesheets/960/_grid.sass

Notes

• sasson/styles/layout/desktop-first/sasson-base.scss sets .page as 960px. for a 100% wrapper, add a div in subtheme/templates/page.tpl.php

Grid

• compass-960-plugin - grid system used
  • https://github.com/nextmat/compass-960-plugin/blob/master/stylesheets/960/_grid.sass
  • Mastering the 960 Grid System

@import "css3";
@import "960/grid";
@import "base";

$ninesixty-columns: 16;

@include grid(8); - declare an 8 column wide element
@include grid-prefix(2); - add an empty 2-wide element before
@include grid-suffix(2); - add an empty 2-wide element after
@include grid-push(4); - push element 4 to the right
@include grid-pull(4); - pull element 4 to the right
@include alpha; - remove left gutter, for nested grid first element. must got after grid()
@include omega; - remove right gutter, for nested grid last element. must got after grid()

Other

*1*3*5*7*9*11*14*17*20*23*26*29*32*35*38*41*44*47*50*53*56*59*62*65*68

• 71*74*77*80*83*86*89*92*95*98*101*105*109*113*117*121*125*129*133*137*141*145*149*153