Difference between revisions of "WP Base"

From Things and Stuff Wiki
Jump to navigation Jump to search
Line 35: Line 35:
  
 
* wordpress-importer - for testing theme
 
* wordpress-importer - for testing theme
 
=== Preprocess ===
 
* http://semantic.gs/
 
  
 
=== Other ===
 
=== Other ===
Line 68: Line 65:
 
  git clone git://github.com/sanchothefat/wp-sass.git wp-content/plugins/wp-sass
 
  git clone git://github.com/sanchothefat/wp-sass.git wp-content/plugins/wp-sass
 
  git submodule update --init --recursive
 
  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|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
 
*
 

Revision as of 01:52, 14 August 2012


A theming process using Bones.

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

Grid

@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

Base profile

Theme plugins

  • wordpress-importer - for testing theme

Other

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;

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