JS Development
1
2
Source: http://thecodinglove-unofficial.soup.io/post/669690240/When-a-graphic-designer-tries-to-code
<div class="message {{if isError "message--error"}}">
Info Message!
</div>
<ul>
{{#each items as |item|}}
<li class="my-item {{if item.hasError "my-item--error"}}">
{{item.name}}
</li>
{{/each}}
</ul>
"The button should have a transition between all states"
$transition-time: 0.3s;
transition: background-color box-shadow $transition-time ease-in-out;
!
<ul class="nav">
<li class="nav__item">Index</li>
<li class="nav__item nav__item--active">Products</li>
<li class="nav__item">Contact</li>
</ul>
!
2
!
/**
* A simple component to display a loading spinner.
*
* ```hbs
* {{loading-spinner}}
* ```
*
* @namespace Component
* @class LoadingSpinner
* @extends Ember.Component
*/
/**
* The lot to display in this component.
*
* @attribute lot
* @type {Model.Lot}
*/
lot: null,
/**
* This action is called whenever the lot is clicked.
*
* @event action
* @param {Model.Lot} lot The lot that was clicked on
* @public
*/
action: null
/**
* A specific function that does something.
*
* @method doSomething
* @param {Model.Lot} lot The lot to do something with
* @return {Boolean}
*/
doSomething(lot) {
// do something in here
return !!lot;
}),
of existing application
outlines design direction
Workflow Summary
button,
.button {
padding: 13px 20px;
width: 100%;
border: none;
font-family: $main-font;
border-radius: $border-radius;
box-shadow: 0 2px 3px rgba($color-darkgrey, 0.4);
@include base-button($white, $color-primary);
}
Stylesheet: _button.scss
.button--secondary {
@include base-button($color-darkgrey, $color-lightgrey);
}
Buttons
=======
```
<button class="button">Button</button>
```
```
<button class="button button--secondary">Button</button>
```
Markdown: _button.md
Style Guide file structure
// index.js
// ...
isDevelopingAddon: function() {
return true;
}
# in app folder
npm link ../my-addon
{{#component-guide-item name="c-button" description="A custom button."}}
{{#component-guide-attributes}}
{{#component-guide-attributes-item name="isLoading" type="Boolean"}}
If true, the button will become disabled and show a loading spinner.
{{/component-guide-attributes-item}}
{{! ... }}
{{/component-guide-attributes}}
{{#component-guide-demo}}
{{#c-button action=(action "clickButton") isLoading=isLoading}}
Save
{{/c-button}}
{{/component-guide-demo}}
{{#component-guide-code}}
\{{#c-button action=(action "clickButton") isLoading=isLoading}}
Save
\{{/c-button}}
{{/component-guide-code}}
{{/component-guide-item}}