Styleguide Clarification #100
Description
Hey all,
Regarding the styleguide, I'm a little embarrassed cause its all over the place currently. We only have 2 major rules at the moment. I'll try and cleanup where i can. But most of all I want to explain why things are setup the way they are. I'll get this info into the README as well.
Alignment
The Problem: Alignment with tabs with user preference in mind. I don't care if you live 2 vs 4, we support both using tabs. But we need to maintain some formatting, so spaces are used for that.
The Solution: Indent with tabs and align with spaces.
HTML Legibility
The Problem: Attribute based customization in Angular produces long illegible html.
The Solution: Put each attribute on its own line so it is easy to scan. The content of tags is generally on its own line as well.
Examples
I'll demo using visible characters (- for tabs, . for spaces):
// The first attribute is on the same line as the tag
// All following attributes are aligned on their own lines
<div class="form-group"
.....ng-class="{'has-error': options.formField.$invalid}">
-<label for="{{id}}">
--//All content is indented with tabs
--{{options.label || 'Email'}}
--{{options.required ? '*' : ''}}
-</label>
-<input type="email"
-.......class="form-control"
-.......id="{{id}}"
-.......formly-dynamic-name="options.key"
-.......formly-custom-validation="options.validators"
-.......placeholder="{{options.placeholder}}"
-.......aria-describedby="{{id}}_description"
-.......ng-required="options.required"
-.......ng-disabled="options.disabled"
-.......ng-model="result[options.key || index]">
-<p id="{{id}}_description"
-...class="help-block"
-...ng-if="options.description">
--{{options.description}}
-</p>
</div>Which lines up perfectly when viewed in any fixed width font:
<div class="form-group"
ng-class="{'has-error': options.formField.$invalid}">
<label for="{{id}}">
//All content is indented with tabs
{{options.label || 'Email'}}
{{options.required ? '*' : ''}}
</label>
<input type="email"
class="form-control"
id="{{id}}"
formly-dynamic-name="options.key"
formly-custom-validation="options.validators"
placeholder="{{options.placeholder}}"
aria-describedby="{{id}}_description"
ng-required="options.required"
ng-disabled="options.disabled"
ng-model="result[options.key || index]">
<p id="{{id}}_description"
class="help-block"
ng-if="options.description">
{{options.description}}
</p>
</div>Same code without and new lines or fancy stuff:
// The first attribute is on the same line as the tag
// All following attributes are aligned on their own lines
<div class="form-group" ng-class="{'has-error': options.formField.$invalid}">
-<label for="{{id}}">{{options.label || 'Email'}}{{options.required ? '*' : ''}}</label>
-<input type="email" class="form-control" id="{{id}}" formly-dynamic-name="options.key" formly-custom-validation="options.validators" placeholder="{{options.placeholder}}" aria-describedby="{{id}}_description" ng-required="options.required" ng-disabled="options.disabled" ng-model="result[options.key || index]">
-<p id="{{id}}_description" class="help-block" ng-if="options.description">{{options.description}}</p>
</div>If anyone wants to set me straight this is the time and place 😄