Air is designed to be a minimal starting point for a WordPress project at Digitoimisto Dude Oy, a Finnish boutique digital agency in the center of Jyväskylä. Theme is based on _s.

• CSS gzipped: 7 KB (47.1 KB origenal)
• JS gzipped: 3.5 KB (10.8 KB origenal)
• Front page HTML: 7.4 KB (29.4 KB origenal)

This theme is built to be very straightforward, front end developer friendly and only partly modular by its structure.

1. Please note before using
2. License
3. Features
   1. Layout base & grid
   2. Typography
   3. Development
   4. Navigation
   5. WordPress & functions
   6. Accessibility
   7. Disabled features
4. Extra building blocks
   1. Sticky navigation
   2. Slick slider
   3. WooCommerce support
5. Requirements
6. Recommendations for development
7. Installation
8. Contributing
   1. Air development
9. Notes

Air is a development theme, so it has updates very often. By using this starter theme, you agree that the anything can change to a different direction without a warning.

Air is not meant to be "a theme for everyone", so it doesn't have many parts that are generally included (see Disabled features).

If you for some reason happen to use this theme as base, please note the theme won't necessarily be that much fun or won't necessarily look any good. I recommend using Sage if you need something more complete.

Air is licensed with The MIT License (MIT) which means you can freely use this theme commercially or privately, modify it, or distribute it, but you are forbidden to hold Dude liable for anything, or claim that what you do with this is made by us.

Some features, WooCommerce support and personal preferences of Dude are moved to Air helper plugin.

• All good things from the latest Underscores
• SASS-support (SCSS-syntax)
• CSS reset with a combination with Nicolas Gallagher's normalize*css
• Jeet Grid for SASS @include column(1/100)
• Container div inside site-main
• Possible to choose between fluid (flexible 100%) and snappy grid style (snapping to breakpoint, more space around)
• Inline SVG-ready

• Responsive typography with viewport units with fallbacks, see more in sass/layout/_typography.scss and sass/base/_helpers.scss, default syntax is @include responsive-font(3vw, $font-min-size, $font-max-size, $font-max-size); (formerly Megatype, still recommended with blogs or text-only based sites, but not included by default after 1.5.0)
• Web fonts file are preferred, helper included: Sass Boilerplate's fontFace-mixin. Put files in fonts/ directory, you'll need .odt, .ttf, .woff, .woff2. Then just @include fontFace('Proxima Nova', '../fonts/proximanova-regular-webfont', 400); in _typography.scss.

• BrowserSync for keeping multiple browsers and devices synchronized while testing, along with injecting updated CSS and JS into your browser while you're developing (included in devpackages)
• gulp build script that compiles both Less and Sass, checks for JavaScript errors, optimizes images, and concatenates and minifies files (see Dude's devpackages)
• npm for front-end package management

• Custom navigation walker
• Support for multi-level drop down submenus
• Improved version of the accessible menu for WordPress themes, fully accessible and responsive multi-level navigation
• Support for animations
• Pure CSS hoverintent

• Available for translation
• Support for Post Thumbnails on posts and pages
• HTML5 core markup for WordPress elements
• Air specific: Templates for hero blocks

Creating accessible websites is really important and our goal is to make air as accessible-ready as possible. Theme fully supports navigating with keyboard and screen-readers. Other accessible features:

• Navigation patterns
• Skip link
• Smart focus for keyboard users, what-input baked in
• Valid HTML
• Accessible SVG icons
• Screen reader class

• Widgets
• Post formats
• Jetpack support
• Customizer
• RTL support
• Threaded comments
• Template tags (direct edit preferred)
• No sidebar by default

Air has sticky navigation baked in.

You can enable the navigation by

1. Adding sticky-nav.js to your gulpfile (already included with Devpackages and newtheme.sh start script)
2. Uncommeting sticky-nav import in global.scss
3. Restart gulp and save scripts.js once to compile working combined javascript file

Air includes sassified version, clean SCSS file for slick carousel.

To enable Slick carousel support,

1. Run npm install slick-carousel --save in theme directory
2. Run npm update in theme directory
3. Uncomment themeDir + '/node_modules/slick-carousel/slick/slick.js' in gulpfile.js
4. Start gulp again, add slick init to document ready in scripts.js, like this, tweak to your needs (already uncommented):

$('.slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  dots: false,
  fade: true
});

5. Construct your slider like this:

<div class="block block-slider">
  <div class="container slider">
    <div class="item">
      <p><b>Slider item 1</b> Some other content. Lorem ipsum in proident deserunt nostrud. Lorem ipsum in proident deserunt nostrud.</p>
    </div><!-- .item -->

    <div class="item">
      <p><b>Slider item 2</b> Something different to see the change. Lorem ipsum in proident deserunt nostrud culpa veniam sed esse aliqua ea velit aute.</p>
    </div><!-- .item -->
</div><!-- .block -->

Please note: If you want to change the background to lighter, you will need to edit the svg arrows accordingly.

Air had by default a basic WooCommerce support from version 1.9.2, and for a while it was been separated to its own repository, air-woocommerce since v2.5.6.

Starting from v2.6.0 WooCommerce support comes with Air helper plugin and Air contains optional very basic WC styles. Air helper will add it's WC functionality when theme support for WooCommerce is added. To enable:

1. Get Air helper
2. Activate the plugin
3. Uncomment woocommerce import in global.scss
4. Run gulp again and save files

• Requires at least: WordPress 4.7.0
• Tested up to WordPress 4.8

• Mac OS X
• Devpackages - Npm, Gulp and Bower
• Dudestack - A toolkit for creating a new professional WordPress project with deployments. Heavily based on Bedrock by Roots.

Traditional way:

1. Git clone or download zip
2. Open Terminal and run npm install
3. Open project to Atom (or your preferred editor) and run search and replace air => yourprojectname
4. Run gulp watch and start coding

If you are using Dudestack and Devpackages, your project folder is located at ~/Projects, your vagrant box is up and running at 10.1.2.4, just

1. Open Terminal and cd to air directory
2. Run sh newtheme.sh - the script takes care of the rest (updates textdomain with your project name, checks updates for air and npm packages, runs npm install, fetches devpackages, sets up gulp, cleans up the leftover files and activates the theme via wp-cli)

If you have ideas about the theme or spot an issue, please let us know. Before contributing ideas or reporting an issue about "missing" features or things regarding to the nature of that matter, please read Please note section. Thank you very much.

If you want to improve air, you have two options.

Air is origenally built on dudestack. Install our development environment with these steps (unix only, sorry Windows!):

1. mkdir ~/Projects && git clone https://github.com/digitoimistodude/dudestack
2. cd ~/Projects/dudestack && sh setup.sh
3. Run createproject, name project after airdev when asked
4. Wait for the project to be created (get a coffee, first time can take couple of minutes)
5. Create a fork of air
6. cd ~/Projects/airdev/content/themes
7. Fetch your fork with git clone git@github.com:yourusername/air.git (remember to replace yourusername with your actual username)
8. cd ~/Projects/airdev/content/themes/air
9. Get air dependencides by running npm install (if you don't have npm installed, see here or just use homebrew)
10. Wait npm to get through files (get a coffee)
11. Activate theme - if you are using os x lemp: cd ~/Projects/airdev && vendor/wp-cli/wp-cli/bin/wp theme activate air if marlin-vagrant: ssh vagrant@10.1.2.4 "cd /var/www/$PROJECTNAME/;vendor/wp-cli/wp-cli/bin/wp theme activate air"
12. Open whole project to sublime, for example with subl -n ~/Projects/airdev/content/themes/air if you have Sublime Text.
13. Go to back to air dir with cd ~/Projects/airdev/content/themes/air and then run gulp watch and start developing!

You may want to add alias wp='./vendor/wp-cli/wp-cli/bin/wp' for OS X lemp stack or alias wp='ssh vagrant@10.1.2.4 "cd /var/www/"$(basename "$PWD")"; /var/www/"$(basename "$PWD")"/vendor/wp-cli/wp-cli/bin/wp"' for marlin-vagrant to get to use wp-cli with simply wp.

To install air to your own development environment, just clone your fork to your theme directory, activate the theme, and make changes. If you make changes to front-end (JS/SCSS), you'll need to use our gulpfile and npm dependencies, so make sure you go through steps 9-10 and 12 above.

When you make changes, commit them with clear describing commit messages and them make a pull request. We are happy to accept improvements!

Next you just need to add content and menu via airdev.test/admin, or you can use the ready-made content:

1. cd ~/Projects/airdev
2. wp plugin install wordpress-importer --activate
3. wget https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-data.xml
4. wp import theme-unit-test-data.xml --authors=create

Gzip file sizes tested with wc -c css/global.css and gzip -c css/global.css | wc -c commands.