WP Base

Base theme

• bones
  • bones/library/scss
  • style.scss
    • import _normalize.scss - a reset
    • import _mixins.scss
    • import _base.scss - optimized for 320px to 480px
    • media query, min-width: 481px - _481up.scss - larger mobile devices
    • media query,min-width: 768px - _768up.scss - tablet and basic desktop
    • media query, -webkit-min-device-pixel-ratio: 1.5, min--moz-device-pixel-ratio: 1.5, min-device-pixel-ratio: 1.5 - _2x.scss
    • basic print style
  • webfont goes in library/fonts

• semantic.gs
  • zipball
  • grid.scss | grid.scss (raw)

@import 'grid.less'; # defaults to 12 column, 960 pixel grid system. Customize by overriding three variables (after the grid.less import has been declared):

@column-width: 60;
@gutter-width: 20;
@columns: 12;

@total-width: 100%; # for fluid (percentage-based) grid rather than a fixed pixels

Other

• 320semanticgs
• _s

Base profile

Theme plugins

• https://github.com/sanchothefat/wp-sass

• http://wordpress.org/extend/plugins/theme-check/

• wordpress-importer - for testing theme

Preprocess

• http://semantic.gs/

Other

• http://wordpress.org/extend/plugins/nginx-compatibility/

• http://wordpress.org/extend/plugins/rewrite-rules-inspector/
  • https://github.com/Automattic/Rewrite-Rules-Inspector
• http://wordpress.org/extend/plugins/backwpup/
• http://wordpress.org/extend/plugins/google-analytics-for-wordpress/
• http://wordpress.org/extend/plugins/google-sitemap-generator/
• http://wordpress.org/extend/plugins/w3-total-cache/
• http://wordpress.org/extend/plugins/all-in-one-seo-pack/

Install script

See https://gist.github.com/gists/3157720

mkdir wp-content/themes/bones && cd $_ && wget https://github.com/eddiemachado/bones/zipball/master && unzip master && mv eddie*/* eddie*/.. && rm -rf eddie* && rm master

or

git archive --remote=git://github.com/eddiemachado/bones.git master | tar -xf -

the git one doesn't work, to check.

• settings, permalinks

test data;

• https://wpcom-themes.svn.automattic.com/demo/test-data.2011-01-17.xml

git clone git://github.com/sanchothefat/wp-sass.git wp-content/plugins/wp-sass
git submodule update --init --recursive

Process

• Use base theme
  • HTML5
  • Mobile first
    • Make sure mobile devices don't get desktop size CSS or content
    • 320 And Up
  • If available, use server-side CSS preprocessing through theme or plugin.
    • LESS and limited SCSS/Compass in PHP (all shared), full SCSS/etc. with Ruby (easier on VPS)
    • Semantic CSS with grid and vertical rhythm systems
    • Web fonts and icons
• Etc.

• Start coding
  • Setup a development site (wp-base-install is WIP)
  • Create new Git branch of theme
  • Set project based CSS preproces variables and mixins
  • Webfont via Font Squirrel

or

• Remove sample post, page, links
• Import from production or other materials
• Change site title and tagline