dr-potato / abt

Slate

Slate is a framework for Wordpress child theme development.

1. 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

2. 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

3. 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

• HTML5
• HTML5 Boilerplate
• Bourbon and Bourbon Neat
• Normalize.css
• Modernizr

4. 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 )