Slate is a framework for Wordpress child theme development.
- Dependencies
The following dependencies need to be installed on your system before deploying the framework.
- Node.js: http://nodejs.org/
- Ruby: https://www.ruby-lang.org/en/
- Git: http://git-scm.com/
- Sass: http://sass-lang.com/
- Grunt Cli: http://gruntjs.com/
- Bower: http://bower.io/
- A local Wordpress install is optional
- Getting Started
#####Git
- Clone Slate to your local working directory
- Create a new repository for your project
#####Ftp
- Copy an .ftppass file to the root of your local project folder
#####Setup
- Run
npm install
- Run
grunt init
#####Wordpress
Network enable
your parent theme (if not enabled already)- Create a new wordpress site
Network enable
your child theme- Apply the child theme to the new wordpress site
#####Optional
- Create a new sublime project and add the snippets and settings from
util/sublime
to your project
- Documentation
#####Styleguides
- CSS and HTML structure: MVCSS for structure and Suitcss by Nicolas Gallagher for naming classes
- Sass color variable naming: Ben Smithetts approach
- In general: Google web fundamentals
#####Best practices
- Declare css margins in one direction only
- Use svg for vector based images and icons
- Use box-sizing:border-box on all elements
- Do your css sizing in rem
- Css media queries in em
- All images should be fluid images
#####Used technology, libraries, languages
- Checklist
#####Code
- Replace modernizr.js with a built and minified version, or remove it when you're not using it (don't forget to remove the link from header.php as well). Consider adding html5shiv.js and removing the .no-js class from the html element if you're not using modernizr
- Remove the livereload script from footer.php
- Load (only) the fonts you're using (check the domain if you're using typekit)
- Add a google analytics snippet
#####Structure
- Create a contact page with a contactform and test it
- Add a map to the contact page (google maps: here)
- Generate the favicons
- Create a footer menu and add the landingpages to it
- Add the customers' contact details to the footer
- Create a site signature in footer.php (copyright & built by ...)
- Create an app page
#####Final checks
- Check the website in all screensizes and on the relevant browsers (with browserstack.com)
- Go through all the pages, check the links, effects and content
- Call the customer and ask them if they're satisfied
- Add the live domain (through
settings
->domains
)