Code Style Guide

##Guide Suggestion

This is my personal suggestion on how we could standardize Effeckt.css project based on everything I saw it was mentioned before in here and what I recommend.

So because this is a personal suggestion it's what i learned and find easy and confortable and I've been using it for long time.

If I found anything new I'd recommend I will update this thread.

General Styles

• Use two space indent (instead of tabs).
• Put brakes { after rule declarations/function name/while/for/etc.
• Put spaces between rule declarations/function name/while/for/etc and brakes {.
• Put spaces after : in property declarations/objects definitions.
• Use double slash // for comments block (instead of /* */) and put spaces after double slash.
• Any , and ; must not have preceding space.

CSS

CSS Style

• Use hex color codes #000000 unless using rgba().
• Use uppercase letter in hex color codes.
• Define each rule declarations on separate lines.
• Don't nest further than 3 levels deep. (SCSS)
• Define positioning properties first, then display and others.

Example of CSS:

.effeckt-element {
  // Positioning
  position: absolute;
  top: 0;
  left: 0;
  
  // Display
  width: 100%;
  height: 50%;
  margin: 10px 0;
  padding: 10px 20px;

  // Others
  transition: all 0.6s ease;
}

Javascript

• Use Spaces after and before ( and ) and [ and ].
• Use Spaces after and before = assigning values.
• Don't use spaces after unary operators such as ! or ++.
• Use space after , in arguments variable.
• Declaring Objects using multiline.
• Declaring variables using multiline.
• When chained methods make long lines, divide each method on mutiple lines.
• Use $ in front of a variable if it's a jquery object.
• Always use semicolons ;.

Example of JS.

// Space on after and before '='
var i = 0;

// Declaring variables using multiline.
var a, b, c,
    foo = true,
    bar = false;

// Space before and after '(' and ')'
if ( condition ) {
  // space after ',' in arguments variable
  doSomething( boo, bar, i );
} else if ( otherCondition ) {
  somethingElse();
} else {
  otherThing();
}

// Don't use spaces after unary operators such as '!' or '++'
while ( !condition ) {
  iterating++;
}

// Space before and after '[' and ']'
for ( ; i < 100; i++ ) {
  object[ array[ i ] ] = someFn( i );
}

// Declaring objects using multiline
var map = {
  ready: 9,
  when: 4,
  "you are": 15
};

// Long chaining methods
elements
  .addClass( "foo" )
  .children()
      .html( "hello" )
  .end()
  .appendTo( "body" );

Effeckt.css

HTML/CSS

As mentioned before in readme of the project:

• Use effeckt- prefix on CSS.
• Use data-effeckt- prefix on HTML element attribute.
• Use all names as standard.

If there's a effeckt-scale-up on Tabs, should be effeckt-scale-up on Modals also, instead of some variation like effeckt-modal-scaleup or something similar.

So we can guess that if we want to use effeckt-scale-up on any other elements will be the same as in any other element.

Some Data Attribute:

• data-effeckt-type: defined the type of effect it will use.
• data-effeckt-state: defined the state of the element, visible, hidden, loading, animating, entering or exiting.

Effects/Animation

• Effects/Animation on HTML Attribute could have names data-effeckt-type="slide-up" but the class on CSS will always be .effeckt-slide-up not .slide-up to prevent collapse. Even though this could be prevent if we use SCSS with "namespaces", ex:

// Effeckt Module Namespace
.effeckt-module {
  .slide-up {
    // Styles
  }
}

But let's stick to the plan, and use a .effeckt- prefix.

• Use dash - on CSS Class/ID's.
• Use camelCase on keyframes animation names.
• Use effeck prefix on animations too.
• Separate demo styles from Effeckt.css styles.
• Name all effect class, Don't use numbers.
• Don't change effect name over the process. (ex. one name on data-attribute and another on css)
• Each module has it's own directory with separate files per effects, to compile what end-user want.

Example of SCSS Directory Structure

modules
├── buttons
│   ├── expand-right.scss
│   ├── expand-right.scss
│   └── ...
├── captions
│   ├── tunnel.scss
│   ├── revolving_door.scss
│   └── ...
├── modals
│   ├── newspaper.scss
│   ├── letmein.scss
│   └── ...
└── tabs
    ├── scale.scss
    ├── flip.scss
    └── ...

JavaScript

• Use Effeckt prefix in all JavaScript Modules.
• Use this instead of Object Name.
• Use Modernize.
• Events shouldn't always rely on click events, as we focus this to touch device, let use touchstart too.
• Maybe we can use all effeckt module object to attach an element similar to/or as a jQuery Plugin.
• Make every module stick to a template, list-scroll differ from the others module object.

First, this is the javascript module template for Effeckt.css:

var EffecktModule = {

  init: function() {

    this.bindUIActions();

  },

  bindUIActions: function() {

    // event handlers

  },

  specificAction: function() {

  }

};

EffecktModule.init();

Effeckt.css Reference Example

Effect	Class	Data-attribute use	Notes
Buttons	.effeckt-button	[data-effeckt-type] for effect type. [data-effeckt-state] for state (loading). [data-effeckt-message] for message after some kind of action on buttons.	Effeckt Type: .effeckt-expand-up .effeckt-expand-right .effeckt-expand-down .effeckt-expand-left .effeckt-slide-up .effeckt-slide-right .effeckt-slide-down .effeckt-slide-left .effeckt-zoom-in .effeckt-zoom-out .effeckt-fill-from-top .effeckt-fill-from-right .effeckt-fill-from-bottom .effeckt-fill-from-left .effeckt-icon-slide-from-top .effeckt-icon-slide-from-right .effeckt-icon-slide-from-bottom .effeckt-icon-slide-from-left .effeckt-3d-rotate-success .effeckt-3d-rotate-error