All Projects โ†’ digitoimistodude โ†’ Air Light

digitoimistodude / Air Light

Licence: mit
WordPress starter theme - designed to be minimal, lightweight and easy for all kinds of WordPress projects. Public Roadmap: https://favro.com/organization/3b45e73eaf083f68fefef368/c1dd2d4a99d6723904d2e763

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Air Light

Wp Tailwindcss Theme Boilerplate
A minimalist boilerplate for WordPress theme development using Tailwind CSS, SCSS, and Laravel Mix.
Stars: โœญ 199 (-30.18%)
Mutual labels:  wordpress, wordpress-theme, wordpress-development, wordpress-starter-theme
Wordpress Starter
๐Ÿ“ฆ A starter template for WordPress websites
Stars: โœญ 26 (-90.88%)
Mutual labels:  wordpress, wordpress-development, wordpress-starter-theme, sass
Theme
Tonik is a WordPress Starter Theme which aims to modernize, organize and enhance some aspects of WordPress theme development.
Stars: โœญ 1,197 (+320%)
Mutual labels:  wordpress, wordpress-theme, wordpress-development, wordpress-starter-theme
Create React Wptheme
Create modern, React-enabled WordPress themes with a single command.
Stars: โœญ 252 (-11.58%)
Mutual labels:  wordpress, wordpress-theme, wordpress-development, wordpress-starter-theme
Wp Functions List
This is a list of all WordPress functions from version 0 to version 4.8.1 along with the data of when they were first introduced and if they are deprecated or not
Stars: โœญ 88 (-69.12%)
Mutual labels:  wordpress, wordpress-theme, wordpress-development
air
A hyper-minimal WordPress starter theme for developers built with Tailwind CSS.
Stars: โœญ 45 (-84.21%)
Mutual labels:  wordpress-development, wordpress-theme, wordpress-starter-theme
starter-kit-theme
WordPress starter theme with a modern development stack for launching projects faster and easily
Stars: โœญ 25 (-91.23%)
Mutual labels:  wordpress-development, wordpress-theme, wordpress-starter-theme
WordPress-UIkit-Starter-Theme
A WordPress starter theme for developers using the frontend framework UIkit
Stars: โœญ 55 (-80.7%)
Mutual labels:  wordpress-development, wordpress-theme, wordpress-starter-theme
Planet4 Master Theme
Wordpress master theme for the Greenpeace Planet 4 project
Stars: โœญ 34 (-88.07%)
Mutual labels:  wordpress, wordpress-theme, sass
Plate
Plate: a super stripped-down WordPress starter theme for developers.
Stars: โœญ 110 (-61.4%)
Mutual labels:  wordpress, wordpress-theme, sass
untheme
A blank WordPress theme for developers.
Stars: โœญ 82 (-71.23%)
Mutual labels:  wordpress-development, wordpress-theme, wordpress-starter-theme
Fabrica Dev Kit
A toolkit for faster, smoother WordPress 5 development
Stars: โœญ 256 (-10.18%)
Mutual labels:  wordpress, wordpress-theme, wordpress-development
Wpintel
Chrome extension designed for WordPress Vulnerability Scanning and information gathering!
Stars: โœญ 70 (-75.44%)
Mutual labels:  wordpress, wordpress-theme, wordpress-development
Wordless
All the power of Pug, Sass, Coffeescript and WebPack in your WordPress theme. Stop writing themes like it's 1998.
Stars: โœญ 1,374 (+382.11%)
Mutual labels:  wordpress, wordpress-starter-theme, sass
Bathe
The simplest WordPress starter theme including full setup for Sass, PostCSS, Autoprefixer, stylelint, Webpack, Eslint, imagemin, Browsersync, etc.
Stars: โœญ 65 (-77.19%)
Mutual labels:  wordpress, wordpress-starter-theme, sass
Wordpress Bootstrap
Bootstrap in WordPress theme form - Bootstrap 3.3.1
Stars: โœญ 1,494 (+424.21%)
Mutual labels:  wordpress, wordpress-theme, wordpress-starter-theme
Wordpress Gulp Starter Kit
[NOT MAINTAINED] A starter kit for developing WordPress themes with Gulp.
Stars: โœญ 674 (+136.49%)
Mutual labels:  wordpress, wordpress-theme, sass
Sage
WordPress starter theme with a modern development workflow
Stars: โœญ 11,531 (+3945.96%)
Mutual labels:  wordpress, wordpress-theme, wordpress-starter-theme
Lumberjack
Lumberjack is a powerful MVC framework for the modern WordPress developer. Write better, more expressive and easier to maintain code.
Stars: โœญ 261 (-8.42%)
Mutual labels:  wordpress, wordpress-theme, wordpress-development
Live Composer Page Builder
Free page builder plugin for WordPress http://livecomposerplugin.com
Stars: โœญ 143 (-49.82%)
Mutual labels:  wordpress, wordpress-development, wordpress-starter-theme

Air-light - A minimalist WordPress starter theme

Build Status GitHub release GitHub contributors

Air-light (or simply Air) is designed to be a ultra minimal starting point for a WordPress project at Digitoimisto Dude Oy, a Finnish boutique digital agency in the center of Jyvรคskylรค. Theme is originally based on _s. We welcome all happy contributors with open arms! See roadmap.

DemoUsage

  • CSS gzipped: 12 KB (113 KB original)
  • JS gzipped: 3.4 KB (10.8 KB original)
  • Front page HTML: 7.4 KB (29.4 KB original)

Top contributors

This theme is constantly kept up to date by the following persons and a bunch of awesome contributors. Wanna join in development? Read the instructions for contributing and let us know about your first PR!

Roni Laukkarinen Timi Wahalahti Niku Hietanen Michael Bourne
Roni Laukkarinen Timi Wahalahti Niku Hietanen Michael Bourne

Mission & vision

Air-light is built to be very straightforward, backwards compatible, front-end developer friendly and modular by its structure. Following Underscores and WordPress Theme Coding Standards best practices and most of the changes in _s are implemented as soon as they are committed.

Our mission and goal is minimalism and simplicity. Our vision is to build a theme that will not implement its own wrappers or functions, will not use any templating languages that would take things further from traditional PHP or CSS, will contain nothing that people will not use or need. Air-light will be free of weird "app-like" folder structures or odd syntaxes that nobody else uses. We love WordPress as it was and as it is.

Air was renamed to air-light in version 3.7.8 (March 20th, 2018), because air was already taken in the official WordPress theme directory.

Official, approved, accessibility-ready!

Air-light v. 4.2.2 was approved to official WordPress theme directory on June 4, 2018. But please note, all changes you do to the theme without generating your own or changing textdomain will be overridden in theme updates - so if you use this theme as a starting point, please follow instructions and/or replace the textdomain with your own.

Table of contents

  1. Usage
  2. Please note before using
  3. License
  4. Features
    1. Layout base & grid
    2. Typography
    3. Development
    4. Navigation
    5. WordPress & functions
    6. Custom Post Types
    7. Custom Taxonomies
    8. Namespaced PHP
    9. Accessibility
    10. Lazy load
    11. Disabled features
  5. Extra building blocks
    1. Sticky navigation
    2. Slick slider
    3. WooCommerce support
  6. Requirements
  7. Recommendations for development
  8. Our way of building new themes
  9. Contributing
    1. Air development
    2. Debuggers
      1. For Gulp
      2. For your editor
    3. Releasing a new version (staff only)
  10. Notes

Please note before using

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 when you look at this dev-git the next time. Please note this theme has no updates inside WordPress by design. Use this theme to hack it to pieces and create your new awesome theme based on Air! Please also see Debuggers!

Air is not meant to be "a theme for everyone", which means it doesn't have all the parts that are generally included in multi-purpose themes for non-technical people (please see Disabled features).

If you want to use this theme as starter for your new theme, please note the theme won't necessarily be that much fun or won't look good by default and needs work from you. We recommend using Sage if you need something more extended.

License

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.

Theme structure

We try to achieve as classic WordPress theme structure as possible to make it possible for wider audience to use and understand and to go with official WordPress Theme Coding Standards.

themes/your-theme-name/             # โ†’ Root of your air-light based theme
โ”œโ”€โ”€ 404.php                         # โ†’ Default "not found" page
โ”œโ”€โ”€ archive.php                     # โ†’ Default archive template
โ”œโ”€โ”€ bin/                            # โ†’ Scripts
โ”‚   โ”œโ”€โ”€ air-move-in.sh              # โ†’ A script for moving all dev files back to the theme
โ”‚   โ”œโ”€โ”€ air-move-out.sh             # โ†’ A script for moving all dev files out of the theme for testing with Theme Check plugin
โ”‚   โ”œโ”€โ”€ air-pack.sh                 # โ†’ A script that makes a package for WordPress Theme Directory
โ”‚   โ”œโ”€โ”€ newtheme.sh                 # โ†’ The start script for creating YOUR own theme out of air-light
โ”œโ”€โ”€ comments.php                    # โ†’ Default comments template (can be deleted if not needed)
โ”œโ”€โ”€ css/                            # โ†’ CSS files for production (never edit)
โ”‚   โ”œโ”€โ”€ global.css                  # โ†’ Unminified, stylefmtd CSS file
โ”‚   โ””โ”€โ”€ global.min.css              # โ†’ Minified theme CSS, this file is called in scripts-styles.php
โ”‚   โ””โ”€โ”€ gutenberg.min.css           # โ†’ Minified Gutenberg CSS for editor, this file is called in gutenberg.php
โ”œโ”€โ”€ fonts/                          # โ†’ Your webfont files
โ”œโ”€โ”€ footer.php                      # โ†’ Site footer
โ”œโ”€โ”€ front-page.php                  # โ†’ Demo front-page template (not included in wordpress.org version)
โ”œโ”€โ”€ functions.php                   # โ†’ Set up your theme basic settings
โ”œโ”€โ”€ gulpfile.js                     # โ†’ Gulpfile for air-light development
โ”œโ”€โ”€ header.php                      # โ†’ Site header
โ”œโ”€โ”€ images/                         # โ†’ Your theme images, for example default featured images and placeholders
โ”œโ”€โ”€ inc/                            # โ†’ Theme core PHP
โ”‚   โ”œโ”€โ”€ hooks/                      # โ†’ Hook functions
โ”‚   โ”œโ”€โ”€ includes/                   # โ†’ Non-template features
โ”‚   โ”œโ”€โ”€ template-tags/              # โ†’ Template functions and helpers
โ”‚   โ”œโ”€โ”€ post-types/                 # โ†’ Custom Post Types
โ”‚   โ”œโ”€โ”€ taxonomies/                 # โ†’ Custom Taxonomies
โ”‚   โ”œโ”€โ”€ hooks.php                   # โ†’ All hooks the theme runs are here
โ”‚   โ”œโ”€โ”€ includes.php                # โ†’ Include non-template features
โ”‚   โ”œโ”€โ”€ template-tags.php           # โ†’ Include template functions and helpers
โ”œโ”€โ”€ js/                             # โ†’ JavaScript files for production (never edit)
โ”‚   โ”œโ”€โ”€ dist/front-end.js           # โ†’ Obfuscated, concatted, minified file that contains all site JS
โ”‚   โ”œโ”€โ”€ src/                        # โ†’ JavaScript files for development
โ”‚   โ”‚   โ”œโ”€โ”€ navigation.js           # โ†’ Accessible multi-level navigation (from 3.4.5)
โ”‚   โ”‚   โ”œโ”€โ”€ scripts.js              # โ†’ Theme core JavaScript file (from 1.0.0)
โ”‚   โ”‚   โ””โ”€โ”€ sticky-nav.js           # โ†’ Sticky nav functionality (optional)based themes
โ”œโ”€โ”€ node_modules/                   # โ†’ Node.js packages (never edit)
โ”œโ”€โ”€ package.json                    # โ†’ Node.js dependencies and scripts
โ”œโ”€โ”€ page.php                        # โ†’ Default page template
โ”œโ”€โ”€ phpcs.xml                       # โ†’ PHPCodeSniffer/WordPress Theme Coding Standards settings
โ”œโ”€โ”€ sass/                           # โ†’ CSS files for development
โ”‚   โ”œโ”€โ”€ base/                       # โ†’ Theme base styles
โ”‚   โ”‚   โ”œโ”€โ”€ _accessibility.scss     # โ†’ Accessibility
โ”‚   โ”‚   โ”œโ”€โ”€ _normalize.scss         # โ†’ Browser reset
โ”‚   โ”‚   โ””โ”€โ”€ global.scss             # โ†’ Core CSS file that calls all the modular files
โ”‚   โ”‚   โ””โ”€โ”€ gutenberg.scss          # โ†’ Core CSS file for Gutenberg editor and blocks
โ”‚   โ”œโ”€โ”€ components/                 # โ†’ Add your style components to this folder
โ”‚   โ”œโ”€โ”€ features/                   # โ†’ Fuctionality styles
โ”‚   โ”‚   โ”œโ”€โ”€ _breadcrumbs.scss       # โ†’ Styles for hybrid breadcrumbs
โ”‚   โ”‚   โ”œโ”€โ”€ _gallery.scss           # โ†’ Default WordPress gallery feature styles
โ”‚   โ”‚   โ”œโ”€โ”€ _gravity-forms.scss     # โ†’ Defaults for Gravity Forms + WCAG 2.0 form fields for Gravity Forms
โ”‚   โ”‚   โ”œโ”€โ”€ _lazyload.scss          # โ†’ Styles for air-helper lazyload feature (lazyload.js needed)
โ”‚   โ”‚   โ”œโ”€โ”€ _magnific-popup.scss    # โ†’ Defaults for magnific popup
โ”‚   โ”‚   โ”œโ”€โ”€ _top.scss               # โ†’ Back to top styles
โ”‚   โ”‚   โ”œโ”€โ”€ _pagination.scss        # โ†’ Numbered pagination styles
โ”‚   โ”‚   โ”œโ”€โ”€ _sticky-nav.scss        # โ†’ Sticky nav styles (not included by default)
โ”‚   โ”‚   โ””โ”€โ”€ _slick.scss             # โ†’ Styles for slick-carousel (not included by default)
โ”‚   โ”œโ”€โ”€ helpers/                    # โ†’ Helper mixins and functions
โ”‚   โ”‚   โ”œโ”€โ”€ _animations.scss        # โ†’ Animations and effects
โ”‚   โ”‚   โ”œโ”€โ”€ _aspect-ratio.scss      # โ†’ A mixin for aspect ratio
โ”‚   โ”‚   โ”œโ”€โ”€ _general.scss           # โ†’ Mixins for general use, or helpers of other mixins
โ”‚   โ”‚   โ”œโ”€โ”€ _grid.scss              # โ†’ CSS Grid helper mixin
โ”‚   โ”‚   โ””โ”€โ”€ _typography.scss        # โ†’ Typography style mixins
โ”‚   โ”œโ”€โ”€ layout/                     # โ†’ Fuctionality styles
โ”‚   โ”‚   โ”œโ”€โ”€ _demo-content.scss      # โ†’ Styles for demo, start script will delete this file
โ”‚   โ”‚   โ”œโ”€โ”€ _forms.scss             # โ†’ Styles for general forms and Gravity Forms
โ”‚   โ”‚   โ”œโ”€โ”€ _site-footer.scss       # โ†’ Footer styles
โ”‚   โ”‚   โ”œโ”€โ”€ _site-header.scss       # โ†’ Header styles
โ”‚   โ”‚   โ”œโ”€โ”€ _typography.scss        # โ†’ Defaults for typography and fonts
โ”‚   โ”‚   โ””โ”€โ”€ _gutenberg.scss         # โ†’ Site-side styles for Gutenberg (pratically for single.php)
included by default)
โ”‚   โ”œโ”€โ”€ navigation/                 # โ†’ Navigation styles
โ”‚   โ”‚   โ”œโ”€โ”€ _burger.scss            # โ†’ Burger styles and animations
โ”‚   โ”‚   โ”œโ”€โ”€ _nav-core.scss          # โ†’ Styles for both desktop and mobile navigation
โ”‚   โ”‚   โ”œโ”€โ”€ _nav-desktop.scss       # โ†’ Desktop navigation styles and dropdowns
โ”‚   โ”‚   โ””โ”€โ”€ _nav-mobile.scss        # โ†’ Navigation styles for mobile and touch devices
โ”‚   โ”œโ”€โ”€ variables/                  # โ†’ Configurations
โ”‚   โ”‚   โ”œโ”€โ”€ _breakpoints.scss       # โ†’ Widths from mobile to TV screens
โ”‚   โ”‚   โ”œโ”€โ”€ _colors.scss            # โ†’ All the colors of the theme
โ”‚   โ”‚   โ”œโ”€โ”€ _fonts.scss             # โ†’ Font settings
โ”‚   โ”‚   โ””โ”€โ”€ _spacings.scss          # โ†’ Margins and paddings
โ”‚   โ”œโ”€โ”€ views/                      # โ†’ Templates, archives, pages and views go here
โ”‚   โ”‚   โ”œโ”€โ”€ _blog.scss              # โ†’ General blog archive and post styles
โ”‚   โ”‚   โ”œโ”€โ”€ _comments.scss          # โ†’ Comment styles (optional)
โ”‚   โ”‚   โ”œโ”€โ”€ _front-page.scss        # โ†’ Front page styles (demo content, optional)
โ”‚   โ”‚   โ””โ”€โ”€ _page.scss              # โ†’ Default single page styles
โ”œโ”€โ”€ screenshot.png                  # โ†’ Theme screenshot for WP admin
โ”œโ”€โ”€ search.php                      # โ†’ Default search view
โ”œโ”€โ”€ sidebar.php                     # โ†’ Default sidebar (optional)
โ”œโ”€โ”€ single.php                      # โ†’ Default single article or CPT view
โ”œโ”€โ”€ style.css                       # โ†’ Theme meta information
โ”œโ”€โ”€ svg/                            # โ†’ Your theme SVG graphics and icons
โ”œโ”€โ”€ template-parts/                 # โ†’ WordPress template parts. Modules go under this folder.
โ”‚   โ”œโ”€โ”€ header/                     # โ†’ Header modules
โ”‚   โ”‚   โ”œโ”€โ”€ branding.php            # โ†’ Site branding
โ”‚   โ”‚   โ”œโ”€โ”€ navigation.php          # โ†’ Site navigation
โ”‚   โ”œโ”€โ”€ content-modular.php         # โ†’ ACF flexible content
โ”‚   โ””โ”€โ”€ hero.php                    # โ†’ Default hero

Features

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

Layout base & grid

  • All good things from the latest Underscores
  • SASS-support (SCSS-syntax)
  • CSS reset with a combination with Nicolas Gallagher's normalize*css
  • Flexbox-ready
  • CSS Grid-ready
  • Section blocks and containers
  • Basic and minimal CSS framework for forms, commenting and typography
  • Inline SVG-ready

Typography

  • 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($font-size-min, $font-size-max); (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.

Development

  • 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

Navigation

  • WCAG 2.0 accessible with keyboard and screen readeres, aria roles and labels included
  • Custom navigation walker
  • Support for multi-level drop down submenus
  • Support for both absolute and relative navigation
  • Improved version of the accessible menu for WordPress themes, fully accessible and responsive multi-level navigation
  • Support for animations
  • Hover intent with minimal animations
  • Accessible mobile menu
  • Wide selection of tasty hamburger animations

WordPress & functions

  • Available for translation, full Polylang Pro support
  • Support for Post Thumbnails on posts and pages
  • Gutenberg support
  • HTML5 core markup for WordPress elements
  • Air specific: Hero template, section blocks

Custom Post Types

Air-light can register your CPT:s automatically.

  1. Add your custom post type to theme settings under post_types, located in functions.php like this:
'post_types' => [
  'your-post-type' => 'Your_Post_Type'
]
  1. Add a file inc/post-types/your-post-type.php
  2. Extend Post_Type class with Your_Post_Type and define your post type in a public function called register(). See the example: inc/post-types/your-post-type.php.

Custom Taxonomies

Air-light can register your Taxonomies automatically.

  1. Add your taxonomy to theme settings under taxonomies, located in functions.php like this:
'your-taxonomy' => [
  'name' => 'Your_Taxonomy'
  'post_types' => 'post, page'
]
  1. Add a file inc/taxonomies/your-taxonomy.php
  2. Extend Taxonomy class with Your_Taxonomy and define your taxonomy in a public function called register(). See the example: inc/taxonomies/your-taxonomy.php.

Namespaced PHP

Air-light uses namespaced PHP since 5.0.0. This means that we no longer need to prefix functions and hooks, because namespace Air_Light; takes care of that.

When old function format was:

// Pre_get_posts
add_action( 'pre_get_posts', 'dude_pre_get_posts' );
function dude_pre_get_posts( $query ) {
  // Do something
}

New format goes like this:

// Pre_get_posts
add_action( 'pre_get_posts', __NAMESPACE__ . '\pre_get_posts' );
function pre_get_posts( $query ) {
  // Do something
}

Accessibility

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:

Lazy load

From 4.7.1 air-light has a lazy loading image features for background images and imgs. If you don't use this feature, remove it from scripts. This feature depends on air-helper, check out the documentation in air-helper for further instructions.

Disabled features

  • Widgets
  • Post formats
  • Jetpack support
  • (Threaded) comments
  • Underscores Template tags
  • Sidebar

Javascript

Structure

All .js files in /js/src/* is built to production bundles in /js/prod/ folder and development bundles in /js/dev/ folder with the same name and loaded corresponding to the WP_ENV environment variable. The production scripts can be loaded on development by using ?load_production_builds URL parameter. The main scripts file loaded in front end is /js/src/front-end.js.

If you want to add a piece of custom JS, create a file under /js/src/modules/ and import or require it in /js/src/front-end.js. If you need a admin-specific JS, add a /js/src/admin.js and then enqueue /js/dist/admin.js with enqueue_admin_scripts

Legacy support

Our build uses babel to translate scripts to ES2015 compatible JS, so you can use modern JS syntax without thinking about backwards compatibility. There is a /js/src/legacy.js file, which contains the needed polyfills for browsers not supporting the ES2015 syntax and is automatically loaded on the header when such browser is detected.

Linter

We use Airbnb es-lint presets spiced up with our own flavors.

Extra building blocks

Sticky navigation

Air has a sticky navigation baked in.

How to enable

You can enable the navigation by

  1. Adding sticky-nav.js to your gulpfile (already included with Devpackages and bin/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

Slick slider

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

How to enable

To enable Slick carousel support,

  1. Run npm install slick-carousel --save in theme directory
  2. Run npm update in theme directory
  3. Uncomment // import slick from 'slick-carousel'; in scripts.js
  4. Add slick init to document ready in scripts.js, like this, tweak to your needs:
$('.slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  dots: false,
  fade: true
});
  1. Construct your slider like this:
<section class="block block-slider">
  <div class="container">
    <div class="cols slider">
      <div class="col 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="col 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>
  </div>
</section><!-- .block -->

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

WooCommerce support

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.

How to enable

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

Requirements

  • PHP >= 7.0
  • Requires at least: WordPress 4.7.1
  • Tested up to WordPress 5.7

Recommendations for development

  • macOS
  • Devpackages - Npm and Gulp + plugins
  • Dudestack - A toolkit for creating a new professional WordPress project with deployments. Heavily based on Bedrock by Roots.

Our way of building new themes

We use ACF and Gutenberg to build new websites on air-light. This is the default block structure we are used to have:

<section class="block block-something has-dark-bg">
  <div class="container">
    <div class="cols cols-two">
      <div class="col">
        <p><b>Column item 1</b> Some other content. Lorem ipsum in proident deserunt nostrud. Lorem ipsum in proident deserunt nostrud.</p>
      </div><!-- .col -->

      <div class="col">
        <p><b>Column 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><!-- .col -->
    </div>
  </div>
</section><!-- .block -->

Usage

NB! We recommend you DO NOT use this theme by installing it from WordPress Theme Directory, instead use the development version from GitHub by doing the following:

Option 1: Use our WordPress stack and development environment

This is an option we at Dude use. Please note: This way requires many packages and is a bit of work to get up and running. I recommend you read all the documentation thoroughly. You can always use your own setup and try option 2.

  1. Follow instructions to install macos-lemp-stack
  2. Ensure that http://localhost works and ~/Projects is linked to /var/www and both exist
  3. Install dudestack
  4. Create new project by using dudestack's createproject command (explained here)
  5. From Terminal cd into bin folder like cd /path/to/where/you/cloned/air-light/bin
  6. 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)
  7. Cd back to project directory cd ~/Projects/yourproject, run gulp and start coding

Option 2: Use in your own WordPress instance and with your own development environment like Docker, Local by Flywheel or MAMP

If you want to set up this your own way, install using the traditional way because we don't currently provide a cleanup or _s-like theme generation script for other WP-stacks:

  1. Get the cleaned up version of Air-light from WordPress Theme Directory, download zip by clicking the blue Download button
  2. Rename the theme folder from air-light to yourprojectname (your project name here all lowercase without spaces or special characters)
  3. Move theme folder under your WordPress installation
  4. Download Air-light package.json (right click here and select Save Link As...), save it to your theme's folder root
  5. Open Terminal, cd into theme folder and run npm install inside the theme folder
  6. Open project to Visual Studio Code (or to your preferred editor) and run following search & replaces (note: yourprojectname is should always be lowercase without special characters):

Search: air-light
Replace with: yourprojectname

Search: Air-light
Replace with: yourprojectname

  1. If you use custom post types, you need to copy over post-type.php and taxonomy.php (right click here and select Save Link As...) since they are not allowed in WordPress Theme Directory thus not included in the cleaned up version of the theme.

Optional for compiling styles and scripts (Please see this support forum answer):

  1. Get devpackages and extract them to your project root folder.
  2. Edit all paths in these files based on your setup
  3. Run npm install on your project root folder from Terminal
  4. Activate theme on wp-admin, run gulp and start coding (or alternatively do changes and then run single tasks like gulp styles or gulp js)

Contributing

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 contribute to the development, please follow these instructions:

  1. Create a fork of this repository (or new branch if you have editor/maintainer permissions)
  2. Make your changes
  3. Create a pull request

Air development

Installation

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

1. Use dudestack

Air is originally 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-light (press fork button on GitHub)
  6. Go to the theme folder of your WordPress instance via Terminal (cd ~/Projects/airdev/content/themes)
  7. Clone your fork with git clone [email protected]:yourusername/air-light.git (replace yourusername with your actual username)
  8. Cd to your new cloned repository cd ~/Projects/airdev/content/themes/air-light
  9. Get the dependencides by running npm install inside the theme folder (if you don't have npm installed, see here or just use homebrew)
  10. Wait npm to get through files (get another cup of coffee)
  11. Activate theme - if you are using the lightweight macos-lemp-setup: cd ~/Projects/airdev && vendor/wp-cli/wp-cli/bin/wp theme activate air-light if marlin-vagrant: ssh [email protected] "cd /var/www/$PROJECTNAME/;vendor/wp-cli/wp-cli/bin/wp theme activate air" (replace $PROJECTNAME with actual project name)
  12. Open whole project to your preferred coding editor, for example when using Visual Studio Code that would be code ~/Projects/airdev/content/themes/air-light.
  13. Go to back to air-light dir with cd ~/Projects/airdev/content/themes/air-light and then run gulp and start developing!

You may want to add alias wp='./vendor/wp-cli/wp-cli/bin/wp' for macos-lemp-setup or alias wp='ssh [email protected] "cd /var/www/"$(basename "$PWD")"; /var/www/"$(basename "$PWD")"/vendor/wp-cli/wp-cli/bin/wp"' for marlin-vagrant to be able to use wp-cli with simply wp.

2. Use your own stack

To install air-light 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!

Content and unit tests

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

Debuggers

Air-light comes with PHP_CodeSniffer for PHP files, stylelint for SCSS/CSS files and eslint for JS files built inside gulpfile.js. Please note, you need to configure global versions of these separately! Here's how:

For gulp

PHP_CodeSniffer needs to be installed under /usr/local/bin/phpcs with WordPress-Coding-Standards for php-debuggers to work properly in gulp. If you don't want to use phpcs with gulp, you can disable it by commenting out or deleting line gulp.watch(phpSrc, ['phpcs']);.

The golden rule here is to make sure the commands stylelint, eslint and phpcs work from command line.

How to install for Gulp

  1. mkdir -p ~/Projects && cd ~/Projects && git clone -b master --depth 1 https://github.com/squizlabs/PHP_CodeSniffer.git phpcs
  2. git clone -b master https://github.com/PHPCompatibility/PHPCompatibility
  3. git clone -b master --depth 1 https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git wpcs
  4. Please note: Replace yourusername name with your actual user name! sudo ln -s /Users/rolle/Projects/phpcs/bin/phpcs /usr/local/bin/phpcs
  5. sudo chmod +x /usr/local/bin/phpcs
  6. Please note: Replace yourusername name with your actual user name! phpcs --config-set installed_paths "/Users/rolle/Projects/wpcs","/Users/rolle/Projects/PHPCompatibility"
  7. Test your standards with phpcs -i, it should display something like this:
The installed coding standards are PEAR, Zend, PSR2, MySource, Squiz, PSR1, PSR12, PHPCompatibility, WordPress, WordPress-Extra, WordPress-Docs and WordPress-Core
  1. npm i stylelint eslint -g
  2. Check that other linters work: stylelint -v, eslint -v

For your editor

It's also best to have all stylelint, eslint, phpcs living inside your editor. We think Visual Studio Code is best for this, check out the plugins inside vscode-settings repository to make sure everything is installed.

Releasing a new version (staff only)

This release cycle will release a new version to:

Whenever you have updates that are worthwile, commit them with clear commit messages and then do versioning. Every meaningful commit or bunch of commits that form a feature together make the version go up semantically 0.0.1.

Use bash alias (replace YOURUSERNAME with your own):

alias release_new_air_version='git push && git push --tags && rsync -av -e ssh --exclude={"/node_modules/*","/bin/*","/sass/*"} $HOME/Projects/airdev/content/themes/air-light/* [email protected]:/var/www/dudetest.xyz/public_html/air/content/themes/air-light/ && cd $HOME/Projects/airdev/content/themes/air-light/bin && sh air-move-out.sh && sh air-pack.sh'

The release cycle:

  1. Commit your changes or merge a pull request
  2. Search and replace version in style.css, functions.php, package.json, readme.txt, CHANGELOG.md. Remember update Tested up WordPress version as well.
  3. Add a tag with git tag -a x.x.x commands, add the same description than in CHANGELOG.md
  4. Run release_new_air_version (this will move dotfiles etc. out, take care of packing and will give the URL for uploading to WordPress.org)
  5. Follow script instructions (do a theme check and upload the theme)
  6. Run sh air-move-in.sh. This will move dev-version back and restore the git functionality.

That's it, you released a new version!

Notes

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

Theme developers please note: if you use phpcs in SublimeLinter as custom standard on dudestack, you will need extra content/themes/air-light subfolders inside theme directory for it to work on both global projects and with air-light.

Known issues

See tool related issues in devpackages and air-light issue tracker.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].