Difference between revisions of "WP Base"

From Things and Stuff Wiki
Jump to navigation Jump to search
 
(29 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{techy}}
+
{{menu}}
 +
 
 +
A theming process.
 +
 
 +
== Headless ==
 +
 
 +
* https://github.com/postlight/headless-wp-starter
  
−
A theming process using Bones.
 
  
 
== Base theme ==
 
== Base theme ==
Line 8: Line 13:
 
** '''[https://github.com/eddiemachado/bones/blob/master/library/scss/style.scss style.scss]'''
 
** '''[https://github.com/eddiemachado/bones/blob/master/library/scss/style.scss style.scss]'''
 
*** import '''[https://github.com/eddiemachado/bones/blob/master/library/scss/_normalize.scss _normalize.scss]''' - a reset
 
*** import '''[https://github.com/eddiemachado/bones/blob/master/library/scss/_normalize.scss _normalize.scss]''' - a reset
−
*** import '''[https://github.com/eddiemachado/bones/blob/master/library/scss/_mixins.scss _mixins.scss]'''
+
*** import '''[https://github.com/eddiemachado/bones/blob/master/library/scss/_mixins.scss _mixins.scss]''' - colours, typography, basic buttons+alerts
−
*** import '''[https://github.com/eddiemachado/bones/blob/master/library/scss/_base.scss _base.scss]''' - optimized for 320px to 480px
+
*** import '''[https://github.com/eddiemachado/bones/blob/master/library/scss/_base.scss _base.scss]''' - 320px to 480px. basic styles.
−
*** media query, min-width: 481px - '''[https://github.com/eddiemachado/bones/blob/master/library/scss/_481up.scss _481up.scss]''' - larger mobile devices
+
*** media query, min-width: 481px - '''[https://github.com/eddiemachado/bones/blob/master/library/scss/_481up.scss _481up.scss]''' - larger mobile devices. navigation, post & content, footer.
−
*** media query,min-width: 768px - '''[https://github.com/eddiemachado/bones/blob/master/library/scss/_768up.scss _768up.scss]''' - tablet and basic desktop
+
*** media query,min-width: 768px - '''[https://github.com/eddiemachado/bones/blob/master/library/scss/_768up.scss _768up.scss]''' - tablet and desktop. has a grid (1140px, ugh)
−
*** media query, -webkit-min-device-pixel-ratio: 1.5, min--moz-device-pixel-ratio: 1.5, min-device-pixel-ratio: 1.5 - '''_2x.scss'''
+
*** media query, -webkit-min-device-pixel-ratio: 1.5, min--moz-device-pixel-ratio: 1.5, min-device-pixel-ratio: 1.5 - '''_2x.scss''' - for retina devices
 
*** basic print style
 
*** basic print style
 
** webfont goes in '''library/fonts'''
 
** webfont goes in '''library/fonts'''
 +
 +
* Create new Git branch of theme
 +
 +
@include rounded(4px);
 +
@include border-radius(4px,4px,0,0);
 +
@include transition(all,2s,ease-out);
 +
@include box-shadow(5px, 5px, 10px, #000);
 +
@include css-gradient(#dfdfdf,#f8f8f8);
 +
@include box-sizing(border-box);
  
 
== Grid ==
 
== Grid ==
Line 20: Line 34:
 
** [https://github.com/twigkit/semantic.gs/zipball/master zipball]
 
** [https://github.com/twigkit/semantic.gs/zipball/master zipball]
 
** [https://github.com/twigkit/semantic.gs/blob/master/stylesheets/scss/grid.scss grid.scss] | [https://raw.github.com/twigkit/semantic.gs/master/stylesheets/scss/grid.scss grid.scss (raw)]
 
** [https://github.com/twigkit/semantic.gs/blob/master/stylesheets/scss/grid.scss grid.scss] | [https://raw.github.com/twigkit/semantic.gs/master/stylesheets/scss/grid.scss grid.scss (raw)]
−
  @import 'grid';
+
 
 +
wget https://raw.github.com/twigkit/semantic.gs/master/stylesheets/scss/grid.scss grid.scss /
 +
  -O _grid.scss
 +
 
 +
Import in _481up.scss or _768up.scss?
 +
  @import "grid";
 
   defaults to 12 column, 960 grid system. Customize by overriding three variables
 
   defaults to 12 column, 960 grid system. Customize by overriding three variables
 
   (after the import has been declared):
 
   (after the import has been declared):
Line 31: Line 50:
 
   for fluid (percentage-based) grid rather than a fixed pixels
 
   for fluid (percentage-based) grid rather than a fixed pixels
  
−
== Plugins ==
+
See [[Grid/rhythm#semantic.gs]]
 +
 
 +
== Preprocess ==
 
* https://github.com/sanchothefat/wp-sass - uses richthegeek/phpsass
 
* https://github.com/sanchothefat/wp-sass - uses richthegeek/phpsass
  
−
=== Other ===
+
git clone git://github.com/sanchothefat/wp-sass.git wp-content/plugins/wp-sass
−
to sort
+
git submodule update --init --recursive
 +
 
 +
Alter bones.php to register the style.sass after turning on the module.
 +
 
 +
== Install process ==
 +
Is a WIP
 +
 
 +
See https://gist.github.com/milkmiruku/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.
 +
 
 +
=== plugins ===
 +
# backup
 +
wp plugin install backwpup
 +
 +
# cache
 +
wp plugin install w3-total-cache
 +
# wp plugin install wp-super-cache
 +
# wp plugin install cloudflare
 +
 +
# dev
 +
wp plugin install wordpress-sass
 +
wp plugin install rewrite-rules-inspector
 +
wp plugin install font-uploader
 +
wp plugin install wp-show-ids
 +
wp plugin install lorem-ipsum-generator-shortcode
 +
 +
# form
 +
wp plugin install advanced-custom-fields
 +
wp plugin install front-end-editor
 +
wp plugin install hide-login
 +
wp plugin install login-security-solution
 +
 +
# etc
 +
wp plugin install google-analytics-for-wordpress
 +
wp plugin install all-in-one-seo-pack
 +
 
 +
# activate
 +
wp plugin activate backwpup
 +
wp plugin activate w3-total-cache
 +
# wp plugin activate wp-super-cache
 +
# wp plugin activate cloudflare
 +
wp plugin activate wordpress-sass
 +
wp plugin activate rewrite-rules-inspector
 +
wp plugin activate font-uploader
 +
wp plugin activate wp-show-ids
 +
wp plugin activate advanced-custom-fields
 +
wp plugin activate front-end-editor
 +
wp plugin activate hide-login
 +
wp plugin activate login-security-solution
 +
wp plugin activate google-analytics-for-wordpress
 +
wp plugin activate all-in-one-seo-pack
 +
 
 +
# init login-security-solution
 +
 
 +
to sort;
 
* http://wordpress.org/extend/plugins/theme-check/
 
* http://wordpress.org/extend/plugins/theme-check/
  
Line 50: Line 131:
 
* http://wordpress.org/extend/plugins/all-in-one-seo-pack/
 
* http://wordpress.org/extend/plugins/all-in-one-seo-pack/
  
−
== Install script ==
+
== Post-install ==
−
See https://gist.github.com/gists/3157720
+
To work into install script
  
−
mkdir wp-content/themes/bones && cd $_ && wget https://github.com/eddiemachado/bones/zipball/master
+
* Remove sample post, page, links
−
&& unzip master && mv eddie*/* eddie*/.. && rm -rf eddie* && rm master
 
  
−
or
+
* Settings
 +
** Blog / network
 +
** General: title, tagline,
 +
** Permalink? - default nginx blog/2012/08/14/sample-post/, to check if required
  
−
git archive --remote=git://github.com/eddiemachado/bones.git master | tar -xf -
+
* Theme
 +
** Make sure preprocess and grid is available
 +
** Change name, etc, in style.css
 +
** Activate
  
−
the git one doesn't work, to check.
+
* Set preprocess things in
 +
** _mixins.scss - colours, fonts
 +
*** Webfont via Font Squirrel
 +
** _base.scss - styles for single column pages
  
−
* settings, permalinks
+
== Prelaunch ==
−
 
+
* Signup, comment, avatar, trackback settings
−
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
 

Latest revision as of 23:15, 10 April 2019

A theming process.

Headless


Base theme

  • bones
    • bones/library/scss
    • style.scss
      • import _normalize.scss - a reset
      • import _mixins.scss - colours, typography, basic buttons+alerts
      • import _base.scss - 320px to 480px. basic styles.
      • media query, min-width: 481px - _481up.scss - larger mobile devices. navigation, post & content, footer.
      • media query,min-width: 768px - _768up.scss - tablet and desktop. has a grid (1140px, ugh)
      • media query, -webkit-min-device-pixel-ratio: 1.5, min--moz-device-pixel-ratio: 1.5, min-device-pixel-ratio: 1.5 - _2x.scss - for retina devices
      • basic print style
    • webfont goes in library/fonts
  • Create new Git branch of theme
@include rounded(4px);
@include border-radius(4px,4px,0,0);
@include transition(all,2s,ease-out);
@include box-shadow(5px, 5px, 10px, #000);
@include css-gradient(#dfdfdf,#f8f8f8);
@include box-sizing(border-box);

Grid

wget https://raw.github.com/twigkit/semantic.gs/master/stylesheets/scss/grid.scss grid.scss / 
 -O _grid.scss

Import in _481up.scss or _768up.scss? 

@import "grid";
  defaults to 12 column, 960 grid system. Customize by overriding three variables
  (after the 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

See Grid/rhythm#semantic.gs

Preprocess

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

Alter bones.php to register the style.sass after turning on the module.

Install process

Is a WIP

See https://gist.github.com/milkmiruku/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.

plugins

# backup
wp plugin install backwpup

# cache
wp plugin install w3-total-cache
# wp plugin install wp-super-cache
# wp plugin install cloudflare

# dev
wp plugin install wordpress-sass
wp plugin install rewrite-rules-inspector
wp plugin install font-uploader
wp plugin install wp-show-ids
wp plugin install lorem-ipsum-generator-shortcode

# form
wp plugin install advanced-custom-fields
wp plugin install front-end-editor
wp plugin install hide-login
wp plugin install login-security-solution

# etc
wp plugin install google-analytics-for-wordpress
wp plugin install all-in-one-seo-pack

# activate
wp plugin activate backwpup
wp plugin activate w3-total-cache
# wp plugin activate wp-super-cache
# wp plugin activate cloudflare
wp plugin activate wordpress-sass
wp plugin activate rewrite-rules-inspector
wp plugin activate font-uploader
wp plugin activate wp-show-ids
wp plugin activate advanced-custom-fields
wp plugin activate front-end-editor
wp plugin activate hide-login
wp plugin activate login-security-solution
wp plugin activate google-analytics-for-wordpress
wp plugin activate all-in-one-seo-pack

# init login-security-solution

to sort;

  • wordpress-importer - for testing theme

Post-install

To work into install script

  • Remove sample post, page, links
  • Settings
    • Blog / network
    • General: title, tagline,
    • Permalink? - default nginx blog/2012/08/14/sample-post/, to check if required
  • Theme
    • Make sure preprocess and grid is available
    • Change name, etc, in style.css
    • Activate
  • Set preprocess things in
    • _mixins.scss - colours, fonts
      • Webfont via Font Squirrel
    • _base.scss - styles for single column pages

Prelaunch

  • Signup, comment, avatar, trackback settings
Retrieved from "https://wiki.thingsandstuff.org/index.php?title=WP_Base&oldid=50458"