WE ARE DEVELOPER

LUMINUS' Developer Operations

If I’m reading HTML, I want to know what the CSS is going to do. If I’m reading CSS I want to know what will happen if I apply it to a block of HTML. In a great system there is a two way street of information. If you look at the CSS, you can tell what will happen. If you look at the HTML, you know what the code will do. ~ MrMrs.

Create Consistency in Code

• Sass Style Guide http://sass-guidelin.es

• PHP Style Guide http://www.php-fig.org/psr/psr-2

• WP Coding Standards https://codex.wordpress.org/WordPress_Coding_Standards

EXPRESSIVE CSS

Any developer who glances at these class names immediately interprets what each class is doing for what job. We can already assume this module is given 1 unit of top padding, the list styles are reset and it's given a container. This ultimately creates a leaner CSS code base as a nice side effect.

By using expressive class names it makes it that much easier for everyone involved to understand what your markup is attempting to do. For example…

 

<ul class"pad1-top list-reset container">…</ul>

CSS NAMING PRINCIPLES

When applicable always start a custom class using the clients name followed by a hyphen. For example a client named "red rocket" requiring some custom component not within the system itself would look like so…

 

<div class="rr-[component-name]"></div>

.rr-[component-name] {…}

 

By enforcing a system of principles our codebase becomes meaningful and semantically rich making developing and introducing new developers to the codebase simple and intuitive.

BEM is the chosen methodology for naming throughout CSS. BEM stands on principles of uniformity in code by creating  consistency that can be understood by seasoned and fresh developers to a project.

 

<ul class"prefix-widget prefix-widget--modifier">
  <li class="prefix-widget__item"></li>
</ul>

SEPARATE STATE FROM STYLE

If it needs a hook for JS then use a prefix like so…

.js-[name]

<div class="js-[name] another class name here too">…</div>

 

 

This helps to alleviate the fright of removing something that could hurt the rest of the system and isolates the event itself so we know what to expect by adding or removing this class name to the markup. This prefixed class name should never show up in the CSS.

CONTENT VS DISPLAY PATTERNS

A Content pattern describes the types of elements within and can be rendered in multiple forms

 

A Display pattern describes a specific rendering and can be applied to multiple types of Content patterns

​“Embracing the difference in pattern types is the key to making a modular design system infinitely more scalable” ~ Dan Mall

PHP

strive to reduce cognitive friction for different authors scanning the code using a shared set of rules and principles.

OOP Approach by grouping similar tasks into classes

Sass Structure

utility - usable classes throughout the entire system for a specific job and used atleast once.

toolbox - custom snippets and ui helpers

functions - return some result in order to execute the desired functionality

mixins - helpers for changing properties and passing args

vars - globals variables for the system

plugins - 3rd party code like Flickity, fancybox etc.

typography - font styles contained for easy updating.

atoms - small bits of the UI such as buttons, inputs and page titles.

molecules -  a unit of smaller atoms combined together. Think search form component

organisms - much larger in size and contains atoms along with molecules and used throughout the system. Think headers, footers for example.

templates - treatments based on visual characteristics of each page variation

states - event driven visual styles based on user interaction

WP Theme Structure

template-parts/

  - global/

    - {file}.php  : partials (chunks of html and php) used throughout the entire system

 

  - page_name/

    - content.php  : content returned through WP Admin Dashboard

 

inc/

  - theme-setup/

    - [wp_method]-[template_helper].php  : required files to generate baseline theme functionality

 

functions/

  - [file_name].php  : custom developer functions

 

functions-dev/

  - [file_name].php  : custom local developer functions for env.

JavaScript Structure

js/

  - libs/

    - [lib_name].js  : global library used such as Modernizr for example.

 

  - src/

    - [functional_name][-[method]].js  : isolated script used for specific event driven behavior.

This structure also allows for use with Async Modular Loaders such as RequireJS and is the preferred directory structure going forward into EcmaScript 2015 where modular loading is encouraged.