whizark

<a class="button">An example link</a>
<a class="button--ghost">An example link</a>

whizark

// ----
// Sass (v3.4.1)
// Compass (v1.0.1)
// ----

// Sass: Typed value factory & validator using Map

// Direction type that accepts only top, right, left, bottom
// Direction type factory
@function dir-new($dir) {

whizark

// ----
// Sass (v3.4.1)
// Compass (v1.0.1)
// ----

// Sass: Generating decoupled color schemes

// Helper functions
@function tint($color, $percentage) {
    @return mix(white, $color, $percentage);

whizark

<a class="button" href="#">&lt;a&gt; button</a>
<button class="button">&lt;button&gt; button</button>

whizark

<div class="collection">
  <div class="collection__item">Item 1</div>
  <div class="collection__item">Item 2</div>
  <div class="collection__item">Item 3</div>
</div>

<ul class="collection">
  <li class="collection__item">Item 1</li>
  <li class="collection__item">Item 2</li>
  <li class="collection__item">Item 3</li>

whizark

// ----
// Sass (v3.4.1)
// Compass (v1.0.1)
// ----

// A property map
$properties: (
  prop-1: "raw-prop-1-value",
  prop-2: "raw-prop-2-value"
);

whizark

Sass Naming Convention

A Sass Naming Convention for Sass libraries.

ToC

• Basics
• Phrase and Compound Word
• Namespace
• Private Variable/Function/Mixin

whizark

WordPress: Best Practices

This is my best practices for WordPress but it is also the one FOR MOST OF THE WORDPRESSS DESIGNERS/DEVELOPERS. Some of these practices are useful to check code quality of themes/plugins.

Follow PSR

You may/should break away from WordPress Coding Standards and follow PSR if you are not a core/core-plugin developer (If you haven't followed either of WordPress Conding Standards or PSR, it is a bad habit) .

Why

whizark

<?php
// This is just an example FOR WORDPRESS USERS.
//
// To make this better:
//  * use namespace/class/closure etc.
//  * use autoloader
//  * create & use service provider classes
//  * create & use factory for WP_Query, WP_User etc.

// interface ContainerInterface

whizark

<?php
interface AccountInterface
{
    public function getBalance();
    public function increase($money);
    public function decrease($money);
}

trait AccountTrait
{